HTML文档结构

• <title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
• <meta charset="UTF-8">设置当前文件字符编码
• style标签：双标签中设置当前文件样式
• 什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

<!--注释文字 -->

语义化

——明白每个标签的用途
好处：

1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。

- <p>段落文本</p>
<p>标签的默认样式，段前段后都会有空白，可以用css样式来删除或改变它。

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

- h1、h2、h3、h4、h5、h6
分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
><hx>标题文本</hx> (x为1-6)

- <div>…</div>
可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

>确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

- <header>我是头部标签</header>
用来定义头部区域

- <footer>我是底部标签</footer>
用来定义底部区域

- <section>我是一个区域</section>
定义一个区域

- <aside>我是侧边栏</ aside>

-  <br/>

- &nbsp;
空格

- <hr />
分隔线

- <ul>
    <li>我的第一个列表信息</li>
  </ul>
无序列表

- <ol>
   <li>我的第一个列表信息。</li>
   <li>我的第一个列表信息。</li>
 </ol>
有序列表

- <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。

- <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
Hypertext Reference

target：a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

- <table></table>
<table>
 <tr>
    <th></th>
</tr>
 <tr>
    <td></td>
</tr>
</table>

使用thead、tbody、tfoot定义表格
    <table border = '1'>
    <thead>
        <tr>
            <th>科目</th>
            <th>分数</th>
        </tr>
    </thead>>
    <tbody>
        <tr>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>60</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总分</td>
            <td>159</td>
        </tr>
    </tfoot>
    </table>

-     <form method="post" action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username" value="" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" id="pass" value="" />
        <input type="submit" value="确定" name="submit" />
        <input type="reset" value="重置" name="reset" />
    </form>

        <input type="text" name="" placeholder="请输入用户名">
        <input type="password" name="" placeholder="请输入密码">
    <input type="number" name="">
    <input type="url" name="">
数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

    <input type="email" name="">
  数字框的值必须包含@。数字框的值@之后必须有内容,否则会报错误提示。

        <textarea cols="50" rows="10">在这里输入内容...</textarea>

- lable 
      <form>
        <label for="uname">输入你的用户名</label>
        <input type="text" id="uname" placeholder="Enter uname">
        <br>
        <label for="pass">输入你的密码</label>
        <input type="password" id="pass" placeholder="Enter password">
    </form>
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

<input   type="radio/checkbox"   value="值"    name="名称" checked="checked"/> 
   当 type="radio" 时，控件为单选框
   当 type="checkbox" 时，控件为复选框
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中

同一组name要一致
 
 - 下拉菜单
    <select>
            <option value="看书">看书</option>
            <option value="旅游" selected="selected">旅游</option>
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
设置selected="selected"属性，则该选项就被默认选中。

        <input type="reset" value="重置" />
        <input type="submit" value="提交" />