目录
浏览器内核
指渲染引擎，在此之前内核指渲染引擎和JS引擎，但是JS越来越独立，所以讲到浏览器内核一般指渲染引擎（html和css）
web标准构成
结构标准：用于对网页元素进行整理和分类，即HTML
样式标准：用于设置网页元素的版本、颜色、大小等外观样式，即CSS
行为标准：指网页模型的定义及交互的编写，即JS
HTML标签认识
- 水平线标签<hr /> 当然还可以通过插入图片来显示水平线，单词缩写 :horizontal 横线。常用于文章段落之间
- 换行标签<br />，单词缩写：break 打断 换行。
- div和span标签，没有语义，是网页布局主要的两个盒子。div是division的缩写 分割、分区的意思。div常用来组合网页。
- 文本格式化标签：指为文字设置粗体、斜体、下划线等效果。如粗体<strong ></strong>,<b></b> 斜体<i></i>,<em></em>, 删除线<del></del>,<s></s>,下划线<u></u>,<ins></ins>等
属性
属性解释：给标签提供更多信息，
格式为<标签名 属性=“属性值”...>内容< /标签名>
一个标签可以有多个属性，且必须写在开始标签中，属性间不分顺序，标签名与属性、属性与属性之间均以空格分开，任何属性都有默认值，省略则取默认值，采取键值对格式：key="value",如color="red"
图像标签
<img src="图像URL" />
| 属性 | 属性值 | 描述 |
| src（必写属性） | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标放上去悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
相对路径与绝对路径
相对路径：图像文件和HTML文件同一文件夹，只需要输入图像文件的名称即可，如：<img src="logo.gif" />
图像位于下一级文件夹，文件名之间用“/”隔开，“/”指下一层的意思，如：<img src=“/img/img01/logo.gif”>
图像位于上一级文件夹，文件名前加"../"，如果是上两级，则再加一个"../../"，以此类推，如<img src=“../logo.gif”>
绝对路径：完整的地址。如内部路径“D:\web\img\logo.gif”（不要用或少用） ,或完整的网络地址，如"http://www.itcast.cn/mages/logo.gif"
链接标签
<a href="跳转地址" target="目标窗口的弹出方式">显示的链接名称或图片 </a>| 属性 | 属性值 | 描述 |
| href | 外部链接时以http://开头 内部链接时，直接填写内部页面名称如：href="demo.html" | 链接目标的URL地址 |
| target | _self、_blank | 前者为默认值，后者指在新窗口中打开 |
锚点定位
适用于较长页面，我们可以点击某个关键词，从而可以迅速定位到达页面的这个位置。创建锚点链接步骤：
- 使用<a href="#id名">链接名称</a>
- 使用相同的id名标注在要跳转到的目标位置
base标签<base />
可以设置全部链接的打开方式
如 <base target="_blank"> 意为全部链接在新窗口中打开。
特殊字符标签
| 特殊字符 | 描述 | 字符的代码 |
| 空格 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | >； |
| & | 和号 | &； |
|
| 人民币 | ¥； |
| （圈C） | 版权 | ©； |
| （圈R） | 注册商标 | ®； |
| 摄氏度 | °； | |
| ± | 正负号 | ±； |
| * | 乘号 | ×； |
| / | 除号 | ÷； |
| 上标2 | ²； | |
| 下标3 | ³； |
注释标签
格式： <!-- 注释内容 -->
注释快捷键 ctrl+/ （单行注释） ctrl+shift+/（多行注释）
多使用注释标签是一个非常好的习惯
注释标签里面的内容是给程序员看的，浏览器是不执行的
列表标签
无序列表
<ul>
<li> </li>
<li> </li>
</ul><li>与 </li>之间相当于一个容器，可以嵌套所有元素，如<a> </a>、<img />
有序列表
无序列表的<ul>替换成 <ol>即可
自定义列表
用于对术语或名称进行解释或描述，列表项前没有任何项目符号
<dl>
<dt> 籍贯 </dt>
<dd> 广东 </dd>
<dd> 黑龙江 </dd>
...
</dl>其中dt定义标题，dd定义描述或解释
表格标签
一般不用作布局，常用来处理表格式数据。
<table> <!-表格标签，用来定义一个表格，一个四方块，盒子-->
<thead>
<tr> <!--行标签，指表格中的一行-->
<th> 姓名 </th>
<th> 年龄 </th> <!--表头标签，具有加粗和居中的效果-->
</tr>
</thead>
<tbody>
<tr>
<td> Eileen </td>
<td> 23 </td> <!--单元格标签，描述单元格内的文字-->
</tr>
<tr>
<td> 乐乐 </td>
<td> 23 </td> <!--单元格标签，描述单元格内的文字-->
</tr>
...
</tbody>
</table><td> </td>也像一个容器，可以嵌套各标签，如p、span、div、table等，表格是一行一行的添加不是列式添加。
其实一个表格，通常会将它们划分成头部<thead> </thead>和主体<tbody> </tbody>两部分,因此<th>标签会在<thead>标签内，而<td>会在<tbody>标签内。
表格标题标签：
<caption> </caption>，在<table>标签里面，属于表格的一部分，注意区分表头和表格标题，表头<head>指表格的第一行或第一列，表格标题指整个表格的名字。
表格属性
| 属性名 | 属性值 | 含义 |
| border | 像素值，默认border=“0”无边框，值为1实边框 | 设置表格的边框 |
| cellspacing | 像素值，默认2像素，通常设置为0值 | 设置单元格和单元格之间的距离 |
| cellpadding | 像素值，默认为1像素 | 设置单元格文字与单元格边框之间的距离 |
| width | 像素值 | 设置表格的宽度 |
| height | 像素值 | 设置表格的高度 |
| align | left、center、right | 设置整个表格在网页中的位置 |
合并单元格
- 跨行合并：rowspan ，属性值为数字。合并原则：从上到下，即若合并2个，则把下边的单元格删了，在上面的<td>开始标签里加上rowspan="2"
- 跨列合并：colspan，属性值为数字。合并原则：从左到右，方法类似跨行合并
表单标签
包含三部分：
- 表单控件：包含了表单的功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮
- 提示信息：指表单中的说明性文字，提示用户进行填写和操作
- 表单域：相当于一个容器，容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法，若不定义表单域，表单中的数据就无法传送到后台服务器。
input控件（单标签）
| 属性 | 属性值 | 描述 |
| type | text | 单行文本输入框（如用户名） |
| password | 密码输入框（如密码） | |
| radio | 单选按钮（如性别设置，需配合name属性设置“组名”，以达到区分开各组和同一组中实现单选的效果） | |
| checkbox | 复选框（如爱好设置，也需配合name属性使用，同样为了区分开各组） | |
| button | 普通按钮（通过value设置按钮中的显示文本） | |
| submit | 提交按钮（按钮的默认显示文本为“提交”，当然可以通过value设置按钮显示文本） | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮（需配合src=“图片路径” 引入图片） | |
| file | 文件按钮（指通过点击按钮来选择文件） | |
| name | 由用户自定义 | 控件名称 |
| value | 由用户自定义 | input显示的文本内容 |
| size | 正整数 | input的宽度 |
| checked | checked | 定义选择控件默认被选中的项（如默认选择的爱好是跳舞） |
| maxlength | 正整数 | 控件允许输入的最多字符数（如银行密码最多只能输入六位数） |
label标签
为input元素定义标注
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。如点击用户名，自动跳转到用户名的输入框。label绑定元素方法：
- 直接包裹input标签，如<label> 用户名 <input type="text" > </label>
- 有多个文本框时，要指定其中一个文本框焦点，通过for、id来实现。如<label for=“choose”> 用户名 <input type="text" id=“choose”> <input type="text" > </label>
textarea控件（文本域）
前面的input标签为单行输入，而textarea控件可实现大量信息多行输入、自动换行效果（如个人评价文本域输入）
格式为：<textarea> </textarea>
下拉菜单
用select控件定义下拉菜单，语法格式为
<select>
<option>北京 </option>
<option>深圳 </option>
<option>上海 </option>
...
</select>当在<option>中定义selected="selected"时，当前项即为默认选中项
form表单域
<form> </form>标签用来定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中所有内容都会被提交到服务器。
前面还说了两个域，一个是文本域<textarea> </textarea> 留言式；一个是文件域<input type="file" /> 上传文件的
创建表单的基本语法：
<form action="url地址" method="提交方式" name="表单名称">
<input type=""text>
<textarea> </textarea>
...等各种表单控件
</form>action：指将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的地址，如action=“demo.php”
method:用于设置表单数据的提交方式，其取值有get和post。get方式速度快，但表单里的内容在地址栏会显示，如密码，不安全。
post方式速度慢一些，但不会显示表单内容，安全一些。
name：用于指定表单的名称，以区分同一个页面中的多个表单。如重置方面。每个表单都应该有自己的表单域。
HTML5新增标签
- <header> </header>：定义文档的页眉、头部
- <nav> </nav>：定义导航链接的部分
- <footer> </footer>：定义文档或节的页脚、底部、尾部
- <artice> </article>：定义文章
- <section> </section>：定义文档中的节（section、区段）
- <aside> </aside>：定义其所处内容之外的内容、侧边，如侧边导航栏
- <datalist> </datalist>：定义选项列表，如百度搜索功能，输入前面几个字会有后面提示，也可下拉。而section标签的下拉菜单则没有提示。必须与input配合使用
<input type="text" value="输入明星" list="star" /> <!--input里面用list-->
<datalist id="star"> <!--datalist里面用id和input里的list来实现和input的链接-->
<option> 郑爽 </option>
<option> 刘亦菲 </option>
<option> 胡歌 </option>
<option> 张若昀 </option>
</detalist>- <fieldset> </fieldset>：可将表单内的相关元素分组、打包。和legend标签搭配使用。效果是标题写在边框线上。
http://www.doc88.com/<fieldset> <legend>用户登陆</legend> <!--标题--> 用户名：<input type="text"> 密 码：<input type="password"> </fieldset>新增的input type属性值
| 属性值 | 使用实例 | 含义 |
| <input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框（与text不同的是，它后面有个x整体删除） |
| range | <input type="range"> | 自由拖动模块（滑动块） |
| time | <input type="time"> | 小时分钟 |
| date | <input type="date"> | 年月日（操作时会弹出类似手机日历的东西） |
| datetime | <input type="datetime"> | 时间 |
| month | <input type="month"> | 年月 |
| week | <input type="week"> | 星期 年（显示多少年多少周） |
| color | <input type="color"> | 颜色 |
新增input属性
| 属性 | 用法 | 含义 |
| placeholder | <input type="text" placeholder=“请输入用户名”> | 提示信息，可见但不占位，value是可见并且占位 |
| autofocus | <input type="text" autofocus> （不指定属性值时，选择默认属性值） | 页面加载时input元素自动获得焦点，如打开百度，光标自动跳转到搜索框 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete | <input type="text" autocomplete=“on”> | 表单具有记忆功能，记录已经输入过的内容，下次再输入有自动提示。另一个属性值为off。必须结合input的name属性和button按钮 |
| required | <input type="text" required> | 必填项，即内容不能为空 |
| accesskey | <input type="text" accesskey=“s”> | 定义快捷键，使用方法是alt+字母 |
多媒体标签
embed标签
定义嵌入的内容，用于插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。url为音频或视频文件及其路径。
如插入网络视频：<embed src="从优酷等视频复制过来的路径" > </embed>
audio音频标签
如<audio src="多媒体路径" autoplay> </audio>
可通过音频属性控制音频的播放。
autoplay：自动播放 controls：显示播放控件（进度、音量等）
loop：循环播放（属性值为数字，表播放次数，当为-1时，为无限循环）
由于版权原因，不同浏览器支持播放的格式是不一样的。多媒体格式有mp3、ogg、mav。多浏览器支持的代码方案：
<audio controls>
<source src="./music/See You Again.mp3">
<source src="./music/See You Again.wav">
<source src="./music/See You Again.ogg">
您的浏览器不支持HTML音频播放功能。 <!--都不支持则显示文字 -->
</audio>video视频标签
用法同audio音频标签，只是在属性方面多了width、height。多浏览器支持的代码方案和audio一样。
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
