HTML知识点整理
Uniqlo
8年前
<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>