Html基础和Html5

Html基础和Html5

Html基础

前言：
HTML 是一种标记语言，使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成，标签之间是文本内容。 不同的标签可以让文本内容以标题、段落、列表等形式展现。

标题标签
h1 元素通常被用作主标题，h2 元素通常被用作副标题， 还有 h3、h4、h5、h6 元素，它们分别用作不同级别的标题。

<h1></h1>
<h2></h2>
<h3></h3>
........

段落标签
p 元素是网站上段落文本使用的元素。
p 是“paragraph（段落）”的缩写。
所以可以像这样创建一个段落：

<p>I'm a p tag!</p>

注意：
按照惯例，所有 HTML 标签都应该是小写字母。

HTML 的注释
说明：

• 注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
• 注释的另一个用途就是在不删除代码的前提下，让代码不起作用。

 在 HTML 中，注释的开始标签是 <!-- 结束标签是 -->。

Html5

HTML5 引入了很多更具描述性的 HTML 元素， 包括 main、header、footer、nav、video、article、section 等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。

给网站添加图片
可以使用 img 元素来为你的网站添加图片，其中 src 属性指向图片的地址。
所有的 img 元素必须有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。

<img src="https://www.baidu.com//your-image.jpg">

注意
img 元素是没有结束标签的。

用 a 实现网页间的跳转
你可以用 a（Anchor，简写为 a）来实现网页间的跳转。

a 需要一个 href 属性指向跳转的目的地。 同时，它还应有内容。 例如：

<a href="https://www.baidu.com">
this links to baidu.com</a>

浏览器将显示文本 this links to baidu.com，这是一个可点击的链接。 你可以通过这个链接访问 https://www.baidu.com。

用 a 实现网页内部跳转
a（anchor）元素也可以用于创建内部链接，跳转到网页内的各个不同部分。

要创建内部链接，你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id，通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。

当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。

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

当用户点击 Contacts 链接，可以访问网页中带有 Contacts 标题元素的部分。

用 # 号来创建链接占位符
有时你想为网站添加一个 a 元素，但还不确定要将它链接到哪里。

href="#"

给图片添加链接
你可以通过把元素嵌套进 a 里使其变成一个链接。
如果我们要把图片嵌套进 a 元素， 可以这样写：

<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>

完成后，请你把鼠标光标悬停在你的图像上， 鼠标光标将变成点击光标。 于是图片就变成了链接。

创建无序列表和有序列表

HTML 有一个特定的元素用于创建无序列表。

无序列表以 <ul> 开始，中间包含一个或多个 <li> 元素， 最后以 </ul> 结束。
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

HTML 中有用于创建有序列表的特定元素。

有序列表以 <ol> 开始，中间包含一个或多个 <li> 元素。 最后以 </ol> 结束。
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

创建一个输入框

input 输入框可以让你轻松获得用户的输入。

你可以像这样创建一个文本输入框：

<input type="text">

注意
input 输入框是没有结束标签的。

给输入框添加占位符
占位符文本用户在 input 输入框中输入任何东西前的预定义文本。
你可以像这样创建一个占位符：

<input type="text" placeholder="this is placeholder text">

创建一个表单

我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可。

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

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

 <form action="https://www.freecatphotoapp.com/submit-cat-photo">
 <input type="text" placeholder="cat photo URL">
 <button type="submit">this button submits the form</button>
  </form>

给表单添加一个必填字段
当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。

如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如

<input type="text" required>

创建一组单选按钮

radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。

单选按钮是 input 选择框的一种类型。

每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

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

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