HTML 和 HTML5

HTML 或 Hyper Text Markup Lanuage （超文本标记语言） 是一种标记语言，应用特定的标签和元素来示意网页的构造。

超文本指的是一种蕴含链接到其余文本的文本。标记指的是用在文档中的标签和元素。

HTML 文件通常以 .html 后缀为扩展名。网站的主页通常命名为 index.html。

HTML 的规范由 W3C（World Wide Web Consortium） 组织制订。以后的版本为 HTML5。

HTML 标签 Tag

大多数 HTML 元素都有一个开始标签和一个完结标签，例如：

<h1> 响应式网页设计笔记 </h1>

开始标签和完结标签都以尖括号（angle brackets）作为开始和完结。完结标签和开始标签惟一的区别就是多了一个斜杠。

有些元素是自闭合元素（self-closing element），其没有完结标签。这类元素通常应用 <br> 或 <br /> 示意。

文档类型 Document Type

在文档的顶部，须要申明 HTML 的版本。

通过 <!DOCTYPE ...> 来申明 HTML 的版本，"..." 局部是版本号。 <!DOCTYPE html> 对应 HTML5。

! 和大写的 DOCTYPE 很重要，尤其是针对旧版本的浏览器。 但 html 无论大写小写都能够。

所有的 HTML 代码都必须位于 html 标签中。 其中 <html> 位于 <!DOCTYPE html> 之后，</html> 位于网页的结尾。

这是一个网页构造的例子：

<!DOCTYPE html><html>    <!-- Your code --></html>

文档构造 Document Structure

html 的构造次要分为两大部分：head 和 body。 网页的形容放入 head 标签， 网页的内容则应放入 body 标签。

比方 link、meta、title 和 style 都应放入 head 标签。

<!DOCTYPE html><html>  <head>    <meta />    <style>    </style>  </head>    <body>    <div>    </div>  </body></html>

题目 Heading

HTML 一共有六级题目，别离是：

<h1>一级题目</h1>、<h2>二级题目</h2>、<h3>三级题目</h3><h4>四级题目</h4>、<h5>五级题目</h5>、<h6>六级题目</h6>

段落 Pragraph

p 代表 paragraph

<p>这是一个段落</p>

占位符 Placeholder

Web 开发者通常用 lorem ipsum text 来做占位符。 lorem ipsum text 是从古罗马西塞罗的一段驰名经文中随机抽取的。

正文 Comment

<!-- 正文内容 -->

正文的作用是：阐明代码性能以及在不删除代码的状况下使其生效。

构造元素

HTML5 引入了很多更具描述性的 HTML 元素， 包含

<main>主体</main>、<header>页眉</header>、<footer>页脚</footer>、<nav>导航栏</nav>、<video>视频</video>、<article>文章</article>、<section>局部</section>

这些元素让 HTML 更易读，同时有助于搜索引擎优化 （SEO） 和无障碍拜访 （Accessibility）。

main 元素使搜索引擎和开发者能很快地找到网页的次要内容。

图片 Image

<img src=" " alt=" " width="" height="" />

src 指向图片的地址，所有 img 元素必须有 alt 属性

alt 属性有两个作用：

  • 让屏幕阅读器能够通晓图片的内容，这会对网页的可拜访性有很大晋升；
  • 当图片无奈加载时，页面须要显示的代替文本。

留神：

  • img 元素是没有完结标签的。
  • 现实状况下，alt 属性不应该蕴含特殊字符，除非有非凡须要。
  • 所有 HMTL 标签都应该是小写字母。
  • 如果图片是纯装饰性的，把 alt 的属性值设置为空。

超链接 Anchor

用 a 来实现网页间的跳转。

例如：

<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

a 元素也能够用于创立外部链接，跳转到网页内的各个不同局部。

要创立外部链接，须要将链接的 href 属性值设置为一个哈希符号 # 加上想外部链接到的元素的 id，通常是在网页下方的元素。 而后你须要将雷同的 id 属性增加到链接到的元素中。 id 是形容网页元素的一个属性，它的值在整个页面中惟一。例如：

<a href="#contacts-header">Contacts</a>...<h2 id="contacts-header">Contacts</h2>

能够在其余文本元素内嵌套链接，也能够在链接内嵌套元素。

<p>Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.</p>

target 是超链接元素的一个属性，它用来指定链接的打开方式。 属性值 _blank 示意链接会在新标签页关上。 href 是锚点元素的另一个属性，它用来指定链接的 URL。

如果把 a 的 href 属性值设置为 #，创立的是一个死链接（不跳转到其余页面）

列表 List

无序列表 Unordered List

无序列表以 <ul> 开始，两头蕴含一个或多个 <li> 元素， 最初以 </ul> 完结。

例如:

<ul>  <li>milk</li>  <li>cheese</li></ul>

有序列表 Ordered List

有序列表以 <ol> 开始，两头蕴含一个或多个 <li> 元素。 最初以 </ol> 完结。

例如:

<ol>  <li>Garfield</li>  <li>Sylvester</li></ol>

表单 Form

通过 HTML 来实现发送数据给服务器的表单， 只须要给 form 元素增加 action 属性即可。如果不指定 action，提交的申请会发送给以后网页。

例如：

<form action="/url-where-you-want-to-submit-form-data">  <input></form>

数据

当表单提交后，浏览器会发出请求，客户端或服务器脚本会响应该申请并解决数据。

默认状况下，表单数据是作为 GET 申请被发送的，为 URL 含有的已提交数据。

举个例子：如果发送申请到：https://example.com/animals，提交数据为：frog，则 URL：

https://example.com/animals?animal=frog

所以能够从前端或者后端从 URL 获得数据。

当然也能够应用 POST 办法，改变申请属性：

<form method="post">  ...</form>

如果应用了 POST ，数据被贮存在申请体（request of body）。此时数据不会在 URL 中显示，只能通过前后端脚本获得数据。

通常来说，如果是登录注册表单，信息敏感型表单，须要应用 POST 办法；如果数据是可分享的，搜寻型表单，能够应用 GET 办法，此时浏览器历史会记录该 URL。

标签 Label

应用标签形容表单组件的内容，比应用纯 HTML 文本更具备可拜访性。

<label for="color">最喜爱的色彩</label><input type="text" id="color" name="color">

标签的 for 属性匹配输入框的 id 属性。

输入框 Text Field

input 输入框能够取得用户的输出。

创立一个文本输入框：

<input type="text" id="color" name="color">

留神 input 输入框是没有完结标签的。

属性

id

输入框的 id 属性连贯输入框和标签。

name

输入框的 name 属性批示了用户输出的数据。例如：

name="mountain"，用户输出："Gutenberg"，那么申请中会蕴含：mountain=Gutenberg。

占位符

用户在 input 输入框中输出任何内容前的预约义文本。

创立一个占位符：

<input type="text" placeholder="这是一段占位符">

类型

  • button
  • checkbox
  • color
  • date
  • file
  • email
  • hidden
  • number
  • password
  • radio
  • range
  • search
  • submit
  • text
  • time
  • url
  • ...

文本区 TextArea

多行文本应用 textarea 标签。

<label for="comment">Comment</label><textare id="comment" name="comment"></textare>

选择器 Select

应用 select 标签。

<label for="color">Color</label><select id="color" name="color">  <option value="orange">Orange</option>  <option value="pink">Pink</option></select>

首先把 label 的 for 和 select 的 id 分割，而后退出独有的 name 属性值。

在 select 中退出多个 option，每个代表一个选项。每个 option 都有一个独特的 value 属性，能够辨别不同的选项。value 属性是用于解决数据的，而 option 标签的两头的人类可读的或者用于用户的。

日期 Date

HTML5 标准增加了 date 类型来创立日期选择器。 如果浏览器反对，在点击 input 标签时，会弹出日期选择器。

<label for="input1">Enter a date:</label><input type="date" id="input1" name="input1">

HTML5 还引入了 time 标签与 datetime 属性来标准化工夫。 time 元素是一个行内元素，用于在一个页面上显示日期或工夫。 datetime 属性蕴含的无效格局。 辅助设施能够获取这个值。 这个属性也有助于防止凌乱，因为它规定了工夫的标准化版本，甚至能够在文本中以非正式的形式或学术形式应用它。

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

按钮 Button

给表单增加一个 submit（提交）按钮。 点击提交按钮时，表单中的数据将会被发送到 action 属性指定的 URL 上。

例如：

<button type="submit">this button submits the form</button>

必填项

能够指定某些字段为必填项（required），只有当用户填写了该字段后，才能够提交表单。

在 input 元素中加上 required 属性就能够了，例如：<input type="text" required>

单选框 Radio

radio buttons（单选按钮）是 input 抉择框的一种类型。

每一个单选按钮都应该嵌套在它本人的 label（标签）元素中。 相当于给 input 元素和包裹它的 label 元素建设起了对应关系。

所有关联的单选按钮应该领有雷同的 name 属性。 创立一组单选按钮，选中其中一个按钮，其余按钮即显示为未选中，以确保用户只提供一个答案。

<label>   <input type="radio" name="indoor-outdoor">Indoor

最佳实际是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值雷同。 这使得辅助技术可能在标签和相干的 input 元素之间建设关联关系。

也能够在 label 标签中嵌入 input 元素：

<label for="indoor">   <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
<form>  <label for="name">Name:</label>  <input type="text" id="name" name="name"></form>

fieldset 标签包裹整组单选按钮，实现这个性能。 它常常应用 legend 标签来提供分组的形容，以便屏幕阅读器用户会浏览 fieldset 元素中的每个选项。

当选项的含意很明确时，如“性别抉择”，fieldset 与 legend 标签能够省略。 这时，应用蕴含 for 属性的 label 标签就足够了。

<form>  <fieldset>    <legend>Choose one of these three items:</legend>    <input id="one" type="radio" name="items" value="one">    <label for="one">Choice One</label><br>    <input id="two" type="radio" name="items" value="two">    <label for="two">Choice Two</label><br>    <input id="three" type="radio" name="items" value="three">    <label for="three">Choice Three</label>  </fieldset></form>

复选框 Checkbox

checkboxes（复选框）是 input 抉择框的一种类型。

每一个复选框都应该嵌套在它本人的 label（标签）元素中。 这样，相当于给 input 元素和包裹它的 label 元素建设起了对应关系。

所有关联的复选框应该领有雷同的 name 属性。

使得 input 与 label 关联的最佳实际是在 label 元素上设置 for属性，让其值与相关联的 input 复选框的 id 属性值雷同。

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

value 属性

提交表单时，被选中项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的理论内容。

<label for="indoor">  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor</label><label for="outdoor">  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor</label>

这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会蕴含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。

如果没有指明 value 属性值，则会应用默认值做为表单数据提交，也就是 on。 在这种状况下，如果用户选中 "indoor" 选项而后提交表单，表单数据则会蕴含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因而最好将 value 属性值设置为一些有意义的内容。

默认值

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。

<input type="radio" name="test-name" checked>

表格 Table

表格把数据组织为行和列的模式。

  • table表格
  • tr表行
  • th表头
  • td表项
  • tbody主体
  • caption字幕
  • colspan合并列
  • rowspan 合并行
The table header
The table bodywith two columns

援用 Quote

应用q和blockquote示意援用内容

<q>quote</q><blockquote>    quote</blockquote>

代码块 Code

应用 code 示意代码块

<code>console.log();</code>

文本格式 Pre

应用pre使得 HTML 按预约文本显示

<pre>something</pre>

划分元素 Division Element

div 元素也叫内容划分元素，是一个包裹其余元素的通用容器。

它也是 HTML 中呈现频率最高的元素。

<div>  <p> something </p></div>