ife-task1:零基础HTML编码--HTML语义化

HTML 是一种标记语言
HTML 标签：标记了html文档和元素
HTML 元素：从开始到结束标签的所有代码，是基本的构造区块
HTML 属性:一般都在开始标签中定义，名称/值形式出现
HTML 之前遗忘的标签：这些标签都是为了更好的语义化，语义化方便爬虫等分析

1.nav标签

<nav> :导航栏（横竖均可），用于link other pages

<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

2.文章结构标签

对一些表示块的标签应用的不是很多，导航用nav，头部用header，文章用article，区块用section，插入图片用figure，侧边栏用aside，正确的使用这些标签无疑能让代码的可读性更高，结构性更强

<article> :定义外部的内容，外部内容可以是来自外部的新闻提供者的一篇新的文章或者是来自blog的文本

<header>:定义文档的页眉；对应<footer>定义文章的页脚

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
<aside> 的内容可用作文章的侧栏。

<section>
<header>
<h1></h1>
        ......
<h6></h6>
</header>

<aside>
</aside>

<article>
<p></p>
</article>

<footer>
</footer>
</section>

3.图片排列标签

  <figure>:用作文档中插图的图像
<figcaption>:定义figure元素的标题caption

<figure>
<figcaption>标题</figcaption>
<img src=""/>
    ......
<figcaption>标题</figcaption>
<img src=""/>
</figure>

4.table标签

<table>

<thead>

<tr>

<th></th>

            ......

</tr>

</thead>

<tbody>

<tr>

<td></td>

            ......

</tr>

        ......

</tbody>

<tfoot>

<tr>

<td></td>

            ......

</tr>

</tfoot>

5.表单标签

表单会用到的标签<form>

<span> 标签被用来组合文档中的行内元素。

<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<input>文本，单选，多选，提交按钮

<label>主要用于绑定一个表单元素，当点击label便签的时候，被绑定的表单元素就会获得焦点,和其他表单元素比如input一起使用
      <input type="radio" name="sex" id="male"/>
      <label for="male">男</label>
      <input type="radio" name="sex" id="female"/>
      <label for="female">女</label>

<textarea>多行文本

<select>下拉框选择；
input标签的属性placeholder，pattern 属性规定用于验证输入字段的模式，模式指的是正则表达式pattern="[0-9A-Za-z]{6,16}"

<fieldset>表单内相关元素分组，可以将表单一部分内容打包，生成一组相关表单的字段
legend 元素为 fieldset 元素定义标题（caption）。

秒客网