HTML知识点整理

Uniqlo 7年前
   <p>写在前面:这是一篇HTML知识点整理笔记!</p>    <h2>HTML</h2>    <h2>㈠HTML入门</h2>    <p>HTML 是用来描述网页的一种语言。</p>    <ul>     <li>HTML 指的是超文本标记语言 ( <strong>H</strong> yper <strong>T</strong> ext <strong>M</strong> arkup <strong>L</strong> anguage)</li>     <li>HTML 不是一种编程语言,而是一种 <em>标记语言</em> (markup language)</li>     <li>标记语言是一套 <em>标记标签</em> (markup tag)</li>    </ul>    <h2>HTML 编辑器</h2>    <ul>     <li>Sublime Text 3</li>     <li>WebStorm</li>    </ul>    <h2>㈡ HTML文档结构</h2>    <h2>HTML文档基本结构</h2>    <pre>  <code class="language-xml">DTD(Document Type Definition)  -------------- 文档定义类型  <html>  -------------- 文本描述网页      <head>  -------------- 文档头部标记:含脚本,样式表等等。          <meta />   -------------- 定义文档字符集、使用语言、作者等基本信息          <title>标题</title>  -------------- 定义文档的标题      </head>      <body>   -------------- 网页主体,是可见的页面内容          <h1>Hello world</h1> -----------标题      </body>  </html></code></pre>    <ul>     <li><html> 与 </html> 之间的文本描述网页</li>     <li><body> 与 </body> 之间的文本是可见的页面内容</li>     <li><head>与</head>头部元素的容器:      <ul>       <li> <p><head> 定义关于文档的信息。</p> <p><title> 定义文档标题。</p> <p><base> 定义页面上所有链接的默认地址或默认目标。</p> <p><link> 定义文档与外部资源之间的关系。</p> <p><meta> 定义关于 HTML 文档的元数据。</p> <p><script> 定义客户端脚本。</p> <p><style> 定义文档的样式信息。</p> </li>      </ul> </li>    </ul>    <p>例子:</p>    <pre>  <code class="language-xml"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">       <head>           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />              <title>制作我的第一个网页</title>       </head>       <body>              <h1>Hello world</h1>      </body>   </html></code></pre>    <h3>HTML 文档类型</h3>    <ul>     <li><!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。</li>     <li>作用:指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。</li>    </ul>    <pre>  <code class="language-xml">//HTML 5  <!DOCTYPE html>    //HTML 4.01 Strict  该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    //HTML 4.01 Transitional  该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">    //HTML 4.01 Frameset  该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"   "http://www.w3.org/TR/html4/frameset.dtd">    //XHTML 1.0  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></pre>    <h3>HTML 标记标签</h3>    <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>    <ul>     <li>HTML 标签是由 <strong>尖括号</strong> 包围的关键词,比如 <html></li>     <li>HTML 标签分为单标记和双标记:      <ul>       <li>单标记:<标记名称 属性名称="属性值" ... />,比如 <br/></li>       <li>双标记:<标记名称 属性名称="属性值" ... ></标记名称>,比如 <strong>和</strong> ;第一个标签是 <em>开始标签</em> ,第二个标签是 <em>结束标签</em> 。</li>      </ul> </li>    </ul>    <h3>HTML 属性</h3>    <ul>     <li> <p>属性总是以名称/值对的形式出现,比如: <em>name="value"</em> 。</p> </li>     <li> <p>属性总是在 HTML 元素的 <strong>开始标签</strong> 中规定。</p> </li>     <li> <p>属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。</p> <pre>  <code class="language-xml">属性    值&描述  class    规定元素的类名(classname)  id         规定元素的唯一 id  name    名称,一般也是唯一的  style    规定元素的行内样式(inline style)  title    规定元素的额外信息(可在工具提示中显示)  ...</code></pre> <p>注意:实际中很少用到,都通过css和js来设置!</p> </li>    </ul>    <h2>注释</h2>    <pre>  <code class="language-xml">//注释:<!--注释-->  <a href="www.baidu.com">百度一下 你不知道</a> <!--注释写在这里-->    //注释一行代码  <!-- 此刻不显示图片:  [站外图片上传中……(3)]  -->    //条件注释  <!--[if IE 8]>      .... some HTML here ....  <![endif]--></code></pre>    <h2>㈢ 元素(标签+属性+文本)</h2>    <p>HTML 元素:</p>    <p>HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。</p>    <ul>     <li>HTML 元素以开始标签起始</li>     <li>HTML 元素以结束标签终止</li>     <li>元素的内容是开始标签与结束标签之间的内容;某些 HTML 元素具有空内容(empty content)</li>     <li>大多数 HTML 元素可以 <strong>嵌套</strong> 。</li>    </ul>    <h2>1. 文字</h2>    <pre>  <code class="language-xml"><b>字体加粗</b>  <i>斜体字体</i>  <u>下划线</u>  <s>删除线</s>    上标:X<sup>2</sup>  下标:Y<sub>3</sub>    //字体相关属性:  <font size="5" color="red" face="黑体">字体,添加属性值</font>    <font size="3" color="#333333" face="黑体">size的值是1~7;color的表达方式:英语单词 RGB 十六进制</font></code></pre>    <h2>2. 标题 段落 换行 水平线</h2>    <pre>  <code class="language-xml">//标题:  <h1 align="center">1号标题</h1>  <h2>2号标题</h2>  <h3>3号标题</h3>  <h4>4号标题</h4>  <h5>5号标题</h5>  <h6>6号标题</h6>      //段落:<p></p>  <p>第一段</p>  <p align="left">第二段</p>  <p align="center">第三段</p>  <p align="right">第四段</p>      //换行:<br />                   <br />  //换行      //水平线:<hr />  <hr />  <hr size="10" width="800"/>  <hr size="10" width="800" noshade="noshade"/>    <hr size="30%" width="80%" /> //随屏幕百分比变化</code></pre>    <h2>3. 图片 超链接 锚点链接</h2>    <pre>  <code class="language-xml">/* 相对路径和绝对路径   绝对路径:协议+主机+路径+文档   相对路径:./ 当前目录  ../ 父级目录   / 根目录   ../../父目录的父目录    URL:scheme://host.domain:port/path/filename  */      //图像:<img src="" />    [站外图片上传中……(4)]    属性:  scr    //source 图像的URL地址  title  //鼠标悬停显示的图片描述  alt    //在浏览器无法载入图像时展示给读者提示的信息  width  height  broder //边框        //超链接:<a href=""></a>    <a href="http://www.baidu.com" target="_blank"></a>    href: 链接地址  target: 定义被链接的文档在何处显示  _blank(新标签打开)                                    _self (当前标签打开)                                   _parent                                  _top      //锚点链接:定义一个唯一的'id' 赋给href 实现跳转  <a href="#p1">点击前往第七段</a>  <p id="p1">第七段</p></code></pre>    <h2>4. HTML的实体</h2>    <pre>  <code class="language-xml">在 HTML 中,某些字符是预留的:小于号(<)和 大于号(>),会误认为是标签。  因此,在 HTML 源代码中使用字符实体(character entities)来显示预留字符。     //空格  &quto;  //引号  ¥  //¥  ×   &divede;</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e1e1667dc0ef1634ad970ef01f00300a.png"></p>    <p>HTML的实体.png</p>    <h2>5. 列表: ol ul li</h2>    <pre>  <code class="language-xml">分为:     有序列表:<ol></ol>      &      无序列表:<ul></ul>    1)有序列表: 用于显示具有统一特征的有序数据    <ol type="i" start="3">    <li>新闻1</li>    <li>新闻2</li>    <li>新闻3</li>    <li>新闻4</li>  </ol>    属性   值              描述  type   1 数字(默认)    排序         a 字母         A 大写字母A         i 小写罗马         I 大写罗马  start  数字           起始数字      2)无序列表:用于显示同一特征的无限数据    <ul type="circle">    <li>...</li>    <li>...</li>    <li>...</li>  </ul>    属性   值                    type   disc 实心圆(默认)              circle  空心圆         square 实心矩形         none  无</code></pre>    <h2>6. 表格: table</h2>    <ul>     <li>用途:table元素的作用是显示表格化的数据!</li>     <li>table元素可以嵌套。</li>    </ul>    <pre>  <code class="language-xml">//用途:table元素的作用是显示表格化的数据!    <table>  ---------表格    <tr>   ---------行      <th>内容</th>  ---------单元格(字体加粗)      <td>内容</td>  ---------单元格      <td>内容</td>    </tr>  </table>      table属性               值             width  height  bgcolor           背景颜色(英语颜色;RGB;十六进制)  background        背景图片  border  bordercolor  cellpadding       单元格与内容之间的间距  cellspacing       单元格与单元格的边距  align        tr属性            值  align           (left|center|right)  bgcolor         (英文颜色|rgb(255,255,255)|十六进制)  valign          垂直对齐方式(top|middle|bottom)        th td属性         值  align           (left|center|right)  bgcolor         (英文颜色|rgb(255,255,255)|十六进制)  valign          垂直对齐方式(top|middle|bottom)  rowspan         行合并  clospan         列合并        <table border="1" bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="pink" align="center">    <tr>      <th colspan="3">表格的表头:合并3列</th>      <td rowspan="5">合并5行</td>    </tr>    <tr bgcolor="blank" align="left" valign="top">      <th></th>      <th></th>      <th></th>    </tr>    <tr>      <td></td>      <td></td>      <td></td>    </tr>    <tr>      <td></td>      <td></td>      <td></td>    </tr>    <tr>      <td></td>      <td></td>      <td></td>    </tr>  </table>          //表格的嵌套  <table border="1" cellspacing="0" cellpadding="10">    <tr>      <th>[站外图片上传中……(5)]</th>      <td align="center" valign="top">        <table>          <tr>            <th rowspan="6">JEEP 牧马人</th>          </tr>          <tr>            <td>姓名</td>            <td>CwLife</td>          </tr>          <tr>            <td></td>            <td></td>          </tr>          <tr>            <td></td>            <td></td>          </tr>           <tr>            <td></td>            <td></td>          </tr>          <tr>            <td></td>            <td></td>          </tr>          <tr>            <td></td>            <td></td>          </tr>        </table>      </th>    </tr>    <tr>      <td></td>      <td></td>    </tr>  </table></code></pre>    <h2>7. 表单: form</h2>    <ul>     <li> <p>作用:用于收集用户输入;</p> </li>     <li> <p>表单元素:</p> <p><input type=""/> 根据不同的 type 属性,可以变化为多种形态。</p> <p><select></select> 定义下拉列表。</p> <p><textarea></textarea> 定义多行输入字段(文本域)。</p> <p><button></button> 定义可点击的按钮。</p> </li>    </ul>    <pre>  <code class="language-xml">作用:用于收集用户输入;  表单元素: 指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等    <form action="action_page.php" method="POST" name="">    表单元素...  </form>    属性  name      表单的名字  method    规定在提交表单时所用的方法:get/post  action    定义在提交表单时执行的动作          常用的表单元素:    <input type=""/>  根据不同的 type 属性,可以变化为多种形态。  <select></select>  定义下拉列表。  <textarea></textarea>  定义多行输入字段(文本域)。  <button></button> 定义可点击的按钮。    文本框:<input type="text"> 定义供文本输入的单行输入字段。  <input type="text" name="控件名字" value="值" maxlength="最大输入字符长度" size="控件宽度" readonly="readonly"(只读) />    密码框:<input type="password"> 定义密码字段。  <input type="password" name="控件名字" value="值" maxlength="最大输入字符长度" size="控件宽度" readonly="readonly"(只读) />    多选勾选控件:<input type="checkbox"> 定义复选框  <input type="checkbox" name="控件名字" value="值" checked="checked"(已选中) disabled = "disabled"(禁用控件) />    单选勾选控件:<input type="radio"> 定义单选按钮。  <input type="radio" name="控件名字" value="值" checked="checked"(已选中) disabled = "disabled"(禁用控件) />    提交表单按钮:<input type="submit"> 定义提交表单数据至表单处理程序的按钮。  <input type="submit" value="按钮字样" />    重置表单按钮:  <input type="reset" value="按钮字样" />    上传文件按钮:  <input type="file" name="文件名称">    隐藏域:  <input type="hidden" name="控件名字" value="值" />    按钮:<input type="button> 定义按钮。  <input type="button" onclick="alert('Hello World!')" value="Click Me!">    <!--  HTML5 增加了多个新的输入类型:(老式浏览器不支持的输入类型,会被视为输入类型 text)        •    color      •    date      •    datetime      •    datetime-local      •    email      •    month      •    number      •    range      •    search      •    tel      •    time      •    url      •    week    <input type="number"> 用于应该包含数字值的输入字段。  <input type="number" name="quantity" min="1" max="5">    <input type="color"> 用于应该包含颜色的输入字段。  <input type="color" name="favcolor">    <input type="range"> 用于应该包含一定范围内的值的输入字段。  <input type="range" name="points" min="0" max="10">    <input type="date"> 用于应该包含日期的输入字段。  <input type="date" name="bday" max="1979-12-31"><br>    <input type="month"> 允许用户选择月份和年份。  <input type="month" name="bdaymonth">    <input type="week"> 允许用户选择周和年。   <input type="week" name="week_year">    <input type="time"> 允许用户选择时间(无时区)。  <input type="time" name="usr_time">    <input type="datetime"> 允许用户选择日期和时间(有时区)。  <input type="datetime" name="bdaytime">    <input type="datetime-local"> 允许用户选择日期和时间(无时区)。  <input type="datetime-local" name="bdaytime">    <input type="email"> 用于应该包含电子邮件地址的输入字段。  <input type="email" name="email">    <input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。  <input type="search" name="googlesearch">    <input type="tel"> 用于应该包含电话号码的输入字段。  <input type="tel" name="usrtel">    <input type="url"> 用于应该包含 URL 地址的输入字段。  <input type="url" name="homepage">  -->        多行文本控件:  <textarea name="控件名称" cols="设置长度" rows="设置宽度">    文本内容  </textarea>      下拉框控件:  <select name="控件名字">    <option value="值" selected="selected"(已选中)>选择内容</option>    <option value="值" >选择内容</option>    <option value="值" >选择内容</option>  </select>    下拉选项的分组:  <optgroup label="分组标签01">    <option value="值" selected="selected"(已选中)>选择内容</option>    <option value="值" >选择内容</option>    <option value="值" >选择内容</option>  </optgroup>      //e.g.    <select name="请选择">      <optgroup label="分组一">        <option value="值" selected="selected">选择内容1</option> <!--默认选中-->        <option value="值" >选择内容2</option>        <option value="值" >选择内容3</option>      </optgroup>      <optgroup label="分组二">        <option value="值" selected="selected">选择内容1</option> <!--默认选中-->        <option value="值" >选择内容2</option>        <option value="值" >选择内容3</option>      </optgroup>      <optgroup label="分组三">        <option value="值" selected="selected">选择内容1</option> <!--默认选中-->        <option value="值" >选择内容2</option>        <option value="值" >选择内容3</option>      </optgroup>    </select>        按钮:  <button type="button" onclick="alert('Hello World!')">Click Me!</button>        实例:    <form name="" method="" action="">    用户名:<input type="text" name="控件名字" value="" maxlength="" size="" readonly="readonly" />    <br />    密 码:<input type="password" name="控件名字" value="" maxlength="6" />    <hr />    多选一<input type="checkbox" name="控件名字" value="值" />    多选二<input type="checkbox" name="控件名字" value="值" />    多选三<input type="checkbox" name="控件名字" value="值" />      <hr />    男<input type="radio" name="控件名字" value="值" checked="checked" /> <!--默认选项;-->    女<input type="radio" name="控件名字" value="值" /> <!--关联要同名字-->    <hr/>    <select name="请选择">      <optgroup label="分组一">        <option value="值" selected="selected">选择内容1</option> <!--默认选中-->        <option value="值" >选择内容2</option>        <option value="值" >选择内容3</option>      </optgroup>      <optgroup label="分组二">        <option value="值" selected="selected">选择内容1</option> <!--默认选中-->        <option value="值" >选择内容2</option>        <option value="值" >选择内容3</option>      </optgroup>      <optgroup label="分组三">        <option value="值" selected="selected">选择内容1</option> <!--默认选中-->        <option value="值" >选择内容2</option>        <option value="值" >选择内容3</option>      </optgroup>    </select>      <hr/>    <input type="submit" value="登录" />    <input type="reset" value="重置按钮" />    <button>按钮标题</button>      <hr />    <input type="file" name="filename">    </form></code></pre>    <p>​</p>    <p>实践:</p>    <pre>  <code class="language-xml"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />      <title>用户注册例子</title>   </head>   <body>       <form name="" method="" action="">          <table align="center" width="500" cellspacing="0" cellpadding="10" border="1" bgcolor="cyan">              <tr>                  <th colspan="2">用户注册</th>              </tr>              <tr>                  <th>用户名:</th>                  <td>                      <input type="text" name="inputyourname" value="" maxlength="20" \>                  </td>              </tr>              <tr>                  <th>密 码:</th>                  <td>                      <input type="text" name="inputyourpsw" value="" maxlength="20" \>                  </td>              </tr>              <tr>                  <th>性 别:</th>                  <td>                      男<input type="radio" name="sex" value="" \>                      女<input type="radio" name="sex" value="" \>                      保密<input type="radio" name="sex" value="" checked="checked"\>                  </td>              </tr>              <tr>                  <th>爱 好:</th>                  <td>                      <input type="checkbox" name="love" value="" checked="checked" \>唱歌                      <input type="checkbox" name="love" value=""  \>跳舞                      <input type="checkbox" name="love" value=""  \>绘画                      <input type="checkbox" name="love" value=""  \>书法                      <input type="checkbox" name="love" value=""  \>篮球                      <br \>                      <input type="checkbox" name="love" value=""  \>足球                      <input type="checkbox" name="love" value=""  \>乒乓球                      <input type="checkbox" name="love" value=""  \>游泳                      <input type="checkbox" name="love" value=""  \>溜冰                  </td>              </tr>              <tr>                  <th>家 乡:</th>                  <td>                      <select name="">                          <optgroup label="第一选区">                              <option value="" selected="selected">选项11</option>                              <option value="">选项12</option>                              <option value="">选项13</option>                          </optgroup>                          <optgroup label="第二选区">                              <option value="">选项21</option>                              <option value="">选项22</option>                              <option value="">选项23</option>                          </optgroup>                          <optgroup label="第三选区">                              <option value="">选项31</option>                              <option value="">选项32</option>                              <option value="">选项33</option>                          </optgroup>                      </select>                  </td>              </tr>              <tr>                  <th>自我介绍:</th>                  <td>                      <textarea cols="50" rows="10" >                          请输入自我介绍:                      </textarea>                  </td>              </tr>              <tr>                  <td colspan="2" align="center">                      <button>我要注册</button>                  </td>              </tr>          </table>      </form>    </body>   </html></code></pre>    <p>实例结果:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4585b9c9d1e3daea29f2420983ad5889.jpg"></p>    <h2>8. 框架: frameset</h2>    <pre>  <code class="language-xml">//通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。    1. 框架结构标签:<frameset></frameset>  作用:定义如何将窗口分割  属性名  值  rows  横向分割(固定值px|百分比|*)有三种写法:(200,300,500)(20%,30%,*)(20%,*,*)  cols  纵向分割(固定值px|百分比|*)  border 边框宽度(px)  frameborder 是否显示边框(0|1) 0-不显示 1-显示        2.框架标签:<frame />  作用:定义了放置在每个框架中的HTML文档。  属性  scr    URL链接  name   窗口名称  scrolling    滚动条,默认显示(no)  noresize     边框是否可以被拖动(noresize)      //e.g.:设置一个两列的框架集: 第一列占据浏览器窗口的 25%。第二列占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中  <frameset cols="25%,75%">     <frame src="frame_a.htm">     <frame src="frame_b.htm">  </frameset>        3.内联框架:<iframe src=""></iframe>  作用:用于在网页内显示网页  <iframe src="demo_iframe.html" width="200" height="200" frameborder="0"></iframe>        4. noframes标签: <noframes></noframes>  用于为不支持框架集的浏览器显示文本    e.g.  <noframes>对比起,您的浏览器不支持框架集类型</noframes></code></pre>    <p>框架集练习:后台管理系统</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7f8d2487a54b70900fb25556a27e12be.jpg"></p>    <pre>  <code class="language-xml">//home.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang = "EN">   <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>框架集练习--后台管理系统</title>   </head>       <frameset rows="150,*" border = "1" frameborder ="1" >  <!--切割成上下两部分(150,*)-->          <frame src="head.html" noresize="noresize" /> <!--顶部head.html-->          <frameset cols ="200,*" border ="3" frameborder = "1">  <!--切割左右两部分(150,*)-->              <frame src="leftnavi.html" noresize="noresize" />  <!--左边导航栏leftnavi.html-->              <frame src="right1.html" noresize="noresize" name="body" />  <!--右侧是主题:right1.html-->          </frameset>      </frameset>    </html>        //.head.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>制作我的第一个网页</title>   </head>   <body>      <h1 align="center">后台管理系统</h1>  </body>   </html>        //leftnavi.html  <body>      <ul type="none">       <li><h3><a href="right1.html" target="body">选择一</a></h3></li>          <li><h3><a href="http://www.163.com" target="body">网页首页</a></h3></li>          <li><h3><a href="http://www.baidu.com" target="body">百度主页</a></h3></li>          <li><h3><a href="http://www.sina.com.cn" target="body">新浪中国</a></h3></li>          <li><h3><a href="">选择一</a></h3></li>          <li><h3><a href="">选择一</a></h3></li>          <li><h3><a href="">选择一</a></h3></li>          <li><h3><a href="">选择一</a></h3></li>     </ul>  </body>       //right.html</code></pre>    <h2>9 样式和脚本</h2>    <pre>  <code class="language-xml">//样式标签:<style></style>    //脚本标签:<script></script></code></pre>    <h2>10. 块: div span</h2>    <p>HTML 元素被定义为块级元素或内联元素。</p>    <ul>     <li>块级元素:以新行来显示。</li>     <li>内联元素:不会以新行来显示。</li>    </ul>    <pre>  <code class="language-xml">//div和span标签    <div> 元素是块级元素,常用于组合其他 HTML 元素的容器,进行文档布局。---  <span> 元素是内联元素,常用作文本的容器。      块级元素:  <body></body>  <div></div>  //常用的布局元素  <h1></h1>...<h6></h6>  <ol></ol>  <ul></ul>  <li></li>  <p></p>  <table></table>  <tr></tr>  <td></td>      内联元素:  <a href=""></a>  <i></i>  <u></u>  <b></b>  <span></span>  //文本标签  <font></font></code></pre>    <p> </p>    <p>来自:http://www.jianshu.com/p/72a590b29cbc</p>    <p> </p>