html 入门（合集）

一、静态页面和动态页面

判断页面是否动态页面或静态页面的标准在于：是否与服务器进行交互，不是具有“会动”的元素（如视频、Flash等）的页面就叫动态页面。

静态页面绝大部分由4类元素组成：文本、图形、多媒体文件（视频音频）和超链接。

二. 段落与文字
1. 标题标签h1~h6
    A. 一个页面中只能有一个h1，但可以有多个h2到h6。从h1到h6，级别越来越低，也就是字体越来越小。
2. 段落标签p，用于标记一段文字
    A.  连续多个段落标签p或标题标签h1~h6之间会自动换行，并且有一定的空隙。
3. 换行标签br，即<br/>
    A. 被换行标签分割的多个连续段落间没有空隙。
    e.g. <p>hello<br/>world</p>
4. 文本格式化标签
    4.1. 加粗标签b或strong
     A. 实际开发中尽量用strong，因为strong的语义性比b要强。
     e.g. <p>普通文本</p>
         <b>加粗文本</b>
         <strong>加粗文本</strong>
    4.2. 斜体标签i、cite或em
     A. 实际开发中尽量用em，其他两个很少使用。
    4.3. 上标标签sup和下标标签sub
     e.g. <p>(a+b)²=a²+b²</p>
    4.4. 大字号标签big和小字号标签small（很少使用，一般用css替代）
     e.g. <p>普通字体文本 </p>
          <big>大字号文本</big>
          <small>小字号文本</small>
    4.5. 删除线标签s（很少使用，一般用css替代）
     e.g. <p>新鲜的新西兰奇异果</p>
          <p><s>原价:￥6.50/kg</s></p>
          <p><strong>现在仅售：￥4.00/kg</strong></p>
    4.6. 下划线标签u（很少使用，一般用css替代
    注：格式化标签如果连续存在多行（不一定是相同的标签），则包含的文字会被解析成一行（中间多一个空格），这点和标题标签h1~h6以及文本标签p不同。
5. 水平线标签hr，即<hr/>
6. div标签，即division
    用来划分一个区域，为html文档内大块内容提供结构和样式.
7. 特殊符号
    7.1. 空格，标记为"&nbsp;"
          A. 在html文件中插入空格是无效的，必须使用代码，即”&nbsp;“，可记忆为牛逼空格。
    注：特殊符号都是以&开始，以英文结尾，并且在html文档中使用时不需要用<>
8. 自闭合标签
    A. 一般标签内部可以插入其他标签或文字；自闭合标签内部不能插入其他标签或文字，只能定义自身的属性。
    B. 常见的自闭合标签包括：
       <meta/> 定义页面的说明信息，供搜索引擎查看。
       <link/> 用于连接外部的CSS文件或脚本文件。
       <base/> 定义页面所有链接的基础定位
       <br/> 换行
       <hr/> 水平线
       <input/> 用于定义表单元素
       <img/> 图像标签
9. 块元素和行内元素
    html标签（元素）根据表现形式，可以分为块标签（block）和行内标签（inline）
    9.1. 块元素（块标签）
          A. 在浏览器中的显示效果上，块元素独占一行，排斥其他元素（块元素和行内元素）。
          B. 在html语法上，块元素内部可以容纳其他块元素或行内元素
          C. 常用的块元素有div、h1~h6、p、hr、ol、ul
    9.2. 行内元素（行内标签）
          A. 在浏览器中的显示效果上，可默认与其他行内元素位于同一行。
              如果在html文件中，两个行内元素写在一行，则元素内的内容连续显示。
              如果在html文件中，两个行内元素写在连续的两行，则元素内的内容之间自动插入一个空格，但不会换行显示。
              如果想要两个行内元素内的内容换行显示，则只有插入换行标签<br />。
          B. 在html语法上，行内元素内部可以容纳其他行内元素，但不能容纳块元素。
          C. 常用的行内元素有strong、em、s、u、a、span、img、input。

三. 列表
     列表是网页中一种常用的数据排列方式，包括有序列表、无需列表和定义列表。
1. 有序列表ol，即ordered list
    A. 有序列表中各个列表项是有顺序的，一般用数字或字母作为顺序，默认为数字。
    B. 有序列表从<ol>开始，到<ol/>结束，中间的列表项是<li>标签内的内容。ol标签的子标签只能是li。
        e.g. <ol>
               <li>中国</li>
               <li>日本</li>
             </ol>
    C. 可以通过type属性改变列表项顺序的显示样式，可取值包括1、a、A、i和I，默认为1。
        e.g. <ol type="A">
               <li>中国</li>
               <li>日本</li>
             </ol>
2. 无需列表ul，即unordered list，在三种列表中最常用
    A. 无序列表中各个列表项是无顺序的。
    B. 无序列表从<ul>开始，到<ul/>结束，中间的列表项是<li>标签内的内容。ul标签的子标签只能是li。
    C. 可以通过type属性改变列表项顺序的显示样式，可取值包括disc（实心圆）、circle（空心圆）和square（实心方框），默认为disc。
        e.g. <ul type="square">
               <li>中国</li>
               <li>日本</li>
             </ul>
3. 定义列表dl，即definition list，在实际开发中很少使用
    A. 定义列表从<dl>开始，到<dl/>结束，中间的每个列表项包括<dt>和<dd>两个子标签，<dt>(definition term)后面添加要解释的名词，<dd>(definition description)后面则添加该名词的具体解释。
        e.g. <dl>
               <dt>HTML</dt>
               <dd>制作网页的标准语言，控制网页的结构</dd>
               <dt>CSS</dt>
               <dd>层叠样式表，控制网页的样式</dd>
               <dt>JavaScript</dt>
               <dd>脚本语言，控制网页的行为</dd>
            </dl>

四. 表格
1. 基本标签
    A. 表格的基本标签包括
        table（表格），必要标签
        caption（表名）
        tr（行，即table row），必要标签
        th（表头，即table header，浏览器将其解释为加粗且居中显示）
        td（单元格，即table data cell，浏览器将其解释为居左显示），必要标签
        e.g. <table>
               <caption>成绩表</caption>
               <tr>
                 <th>姓名</th>
                 <th>语文</th>
                 <th>数学</th>
               </tr>
               <tr>
                 <td>小明</td>
                 <td>90</td>
                 <td>80</td>
               </tr>
               <tr>
                 <td>小丽</td>
                 <td>98</td>
                 <td>90</td>
               </tr>
               <tr>
                 <td>平均</td>
                 <td>94</td>
                 <td>85</td>
               </tr>
            </table>
    B. 默认情况下，表格没有边框，需要使用CSS添加。
2. 表格语义话
    A. 可通过使用thead、tbody和tfoot标签增加表格的语义话
        e.g. <table>
               <caption>成绩表</caption>
               <thead>
                 <tr>
                   <th>姓名</th>
                   <th>语文</th>
                   <th>数学</th>
                 </tr>
               <thead/>
               <tbody>
                 <tr>
                   <td>小明</td>
                   <td>90</td>
                   <td>80</td>
                 </tr>
                 <tr>
                   <td>小丽</td>
                   <td>98</td>
                   <td>90</td>
                 </tr>
               <tbody>
               <tfoot>     
                 <tr>
                   <td>平均</td>
                   <td>94</td>
                   <td>85</td>
                 </tr>
               <tfoot>
            </table>
        注：可以看出，有没有thead、tbody和tfoot标签对显示效果没有影响，只是增强了html代码的语义话。
3. 合并行
    使用th或td标签的rowspan属性，rowspan=x表示合并当前单元格下侧的x个单元格（包括当前单元格），也就是当前单元格横跨的行数。
4. 合并列
    使用th或td标签的colspan属性，colspan=x表示合并当前单元格右侧的x个单元格（包括当前单元格），也就是当前单元格横跨的列数。

五. 图像
1. img标签和基本属性src、alt、title
    src：图片的地址，支持相对地址和绝对地址，开发过程中一般使用相对地址
    alt：图片无法征程显示时的提示文字
    title：鼠标移到图片上的提示文字
    注：一般情况下，alt和title设置成一样的值

六. 超链接，hyperlink
    A. 使用标签a表示一个超链接，常用到href属性和target属性
       href：链接地址，即点击链接后跳转到的地方
       target：通常设置为_self（默认方式，在当前窗口打开链接）或_blank（在新窗口打开链接）
    B. 内部链接、外部链接和锚点链接
        内部链接指链接地址是本网站的内容，锚点链接属于内部链接的一种；外部链接指链接地址为第三方网站。
        锚点链接指跳转的地址为本网页的某一位置，通常用于网页内容太长时方便浏览。
        e.g. <a href="#音乐">音乐<br/>
             ......
             <div id="音乐">
              ......
             </div>

七. 表单
1. form标签
    A. 用form标签创建一个表单，表单中所有内容都要在form标签之间。
    B. form标签常用属性有name、action、method、target和enctype
        name：用于区分不同表单，同时也可以防止表单提交到后台后出现混乱。
        action：用于定义表单提交的地址，也就是处理表单搜集到的数据送到哪里处理（没理解，有待后续深入研究）。
        method：用于定义使用http的哪种方法提交表单数据，可取get（默认值）和post（没理解，有待后续深入研究）。
        target：和标签a的target属性一样（没理解，有待后续深入研究）。
        enctype：用于定义编码方式，一般采用默认，即不需要设置。
    C. 表单对象就是放在form标签内的对象，
       表单对象有三种：input、textarea、select和option。其中，select和option要配合使用，类似于ul和li。
       对于需要和服务器交互的表单对象，一定要放在form标签内，否则也可以放在form标签外。
2. input标签
    input标签是自闭合标签，属性值type不同会有不同的显示状态，type属性常用取值如下：
    type="text"：单行文本框
    type="password"：密码文本框
    type="button"：普通按钮
    type="reset"：重置按钮
    type="submit"：提交按钮
    type="image"：图像形式的提交按钮
    type="radio"：单选按钮
    type="checkbox"：复选按钮
    type="hidden"：隐藏字段
    type="file"：文件上传
    2.1. 单行文本框，type="text"
     A. type=”text“时，还有以下三个属性可以使用：
        value：单行文本框的默认值
        size：单行文本框的长度，以字符为单位
        maxlength：单行文本框中最多可以输入的字符数
        e.g. <form>
              年龄：<input type="text" value="18" size="10" maxlength="3" />
             </form>
    2.2. 密码文本框，type="password"
     A. 当input标签的type=”password“时，同样可以使用value、size和maxlength三个属性，具体含义值和type="text"的含义相同，只不过文本框中的字符不可见。
        e.g. <form>
              密码：<input type="password" value="password" size="7" maxlength="6" />
             </form>
    2.3. 单选按钮，type="radio"
     A. 当input标签的type="radio"时，必须设置name属性和value属性。
        name：用于区分不同radio选项的分组，同组（选项间互斥）内的选项name值必须相同，如果不同会出现可以同时选择多个的现象
        value：用于定义选中该选项时对应的值，该值常用于向后台传输。
        e.g.
             <form>
              性别:
              <input type="radio" name="male" value="男"/>男
              <input type="radio" name="male" value="女"/>女<br />
              属于:
              <input type="radio" name="range" value="00后"/>00后
              <input type="radio" name="range" value="90后"/>90后
              <input type="radio" name="range" value="其他"/>其他
             </form>
    2.4. 复选框，type="checkbox"
     A. 和单选按钮radio不同，checkbox由于可以多选，所以不需要设置name属性
     B. 复选框必须使用id属性，同时在标签label中指定对应的id
     C. checked属性取值为”checked“时，默认选中该项
     e.g. <form>
           亲属:
           <input type="checkbox" id="id1" value="v1" checked="checked"/><label for="id1">爸爸</label>
           <input type="checkbox" id="id2" value="v2"/><label for="id2">妈妈</label>
          </form>
    2.5. 按钮
     2.5.1. 普通按钮，type="button"
      A. 普通按钮一般需要配合javascript基本实现表单，value属性值就是显示在按钮上的值。
     2.5.2. 提交按钮type="submit"和重置按钮type="reset"
      A. 分别用于提交和重置当前表单（form）的数据，value属性的含义和普通按钮含义一样。
     e.g. <form>
           姓名：<input type="text" size="20" maxlength="10" /><br />
           年龄： <input type="text" size="5" maxlength="5" /><br />
           <input type="reset" value="reset" /><br />
           <input type="submit" value="submit" />
          </form>
     2.5.3. 图片按钮，type="img"
      A. 需要设置src属性指定图片位置，其他和普通按钮一样
      e.g. <input type="image" src="q.jpeg" οnclick="alert('click')" />
      注：前端开发中如果能用css，则尽量用css，少用图片按钮，因为传输图片的数据量比较大。
    2.6. 隐藏域，type="hidden"
     A. 用于传送数据，但不想被用户看到的场景，value属性值就是待传输的数据。
     e.g. <input type="hidden" value="10"/>
    2.7. 文件域，type="file"，
     A. 常用于上传文件，浏览器中会显示一个按钮和文字提示（是否选择了文件）
     e.g. <input type="file" value="aa"/>
3. textarea标签
    e.g. <form>
          <textarea rows="3" cols="10">默认值</textarea>
         </form>
4. 下拉列表，select和option配合使用
    A. option标签中value属性值用于向后台返回选择该option对应的值。
     e.g. <select>
           <option value="golang">Golang</option>
           <option value="C++">C++ </option>
           <option value="python">Python</option>
          </select>
    B. select默认内只显示一个option值，可通过size属性更改
     e.g. <select size="2">
           <option>Golang</option>
           <option>C++ </option>
           <option>Python</option>
          </select>
    C. select默认只能选择一个option，可通过multiple属性更改为选多个，实际使用时按住ctrl键就可以多选。
    e.g. <select multiple="multiple">
          <option>Golang</option>
          <option>C++ </option>
          <option>Python</option>
         </select>

八. 多媒体
1. embed标签
 用于插入多媒体文件，包括音频、视频和flash等，需要设置src属性。可以设置width和height属性，以像素为单位。
 e.g. <embed src="a.mp4" width="400px" heidht="80px" />
2. bgsound标签
 A. 用于给网页添加背景音乐，需要设置src属性。可以设置loop属性表示循环播放的次数，设置为-1时表示循环无数次。
 e.g. <bgsound src="a.mp3" loop="3" />
 B. 只适用于IE浏览器，可以用embed或object标签替代（待验证）。

九. 浮动框架
1. iframe标签，即浮动框架标签
 A. 浮动框架是浏览器中嵌入的一个子窗口，需要设置src属性。
    可以设置可以设置width和height属性，以像素为单位。
    可以设置scrolling属性，表示是否显示滚动条，可取值为auto、yes、no。