Web标准的构成
主要包括结构、表现、行为三个方面。
结构 用于对网页元素进行整理和分类，html。
表现 用于设置网页元素的版式、颜色、大小等外观样式，css。
行为 是指网页模型的定义及交互的编写，javascript。
基本结构标签
1、HTML 标签通常是成对出现的，例如 <html>和</html> ，我们称为双标签。
<br />换行标签，为单标签。
| <html></html> | 页面中最大标签，称为根标签 |
| <head><head> | 头部标签，须要设置title |
| <title></title> | 网页标题 |
| <body></body> | 元素包含文档的所有内容 |
2、<!DOCTYPE>文档类型声明（声明型）：用来告诉浏览器使用哪种HTML版本来显示网页。
位于最前位置。
不是HTML标签，是文档类型声明标签。
<!DOCTYPE html>意为采用HTML5版本来显示网页。
3、lang为language缩写，用来定义文档显示的语言。
①en定义为英语（英文网页）
②zh-CN定义语言为中文（中文网页）。不影响代码，此属性对浏览器和引擎有作用（会提示翻译）
<html lang="en">4、字符集（Character set）,在<head>标签内，通过charset属性规定HTML文档应使用哪种字符编码。
charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8。UTF -8 万国码，是目前最常用的字符集编码方式，采取UTF -8来保存文字。
<meta charset="UTF-8">；5、文本格式化标签
| <strong></strong> | 加粗 |
| <em><em> | 倾斜 |
| <del></del> | 删除线 |
| <ins></ins> | 下划线 |
6、盒子标签
<div>一行只能放一个大盒子</div>
<span>一行可以放多个小盒子</span>7、图像标签和路径
<img src="123.jpg" alt="丹丹呀" title="小马同志" width="20" height="25" border="2"/>
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | <img>标签的必须属性，它用于指定图像文件的路径和文件 |
| alt | 文本 | 替换文本（当图片不能显示时候显示的文字） |
| title | 文本 | 提示文本（鼠标放到图像上，显示的文字） |
| height | 像素 | 高度 |
| width | 像素 | 宽度 |
| border | 像素 | 边框粗细 |
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
（通用： ..为上级路径 .为当前路径）
| 同一级路径 | <img src="123.png"> | |
| 下一级路径 | / | <img src="images/123.png"> images为被引图片所在文件名 |
| 上一级路径 | ../ | <img src="../123.png"> 可以用多个../../ |
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。（斜杠方向与相对地址不一样，为反斜杠）；如果是网站上原有图片，直接复制地址。
8、超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>anchor：锚
| 属性 | 作用 |
|---|---|
| href | 必须属性，用于指定链接目标的url地址 |
| target | 用于指定连接页面的打开方式。_self为默认值，_blank为在新窗口中打开 |
1、外部链接
<a href="http://www.qq.com">腾讯</a>
2、内部链接：直接链接内部页面名称即可
<a href="页面名称.html">文本</a>
3、空链接：没有确定链接目标时，用#
<a href="#">这是个空链接</a>
4、下载链接：地址链接的是 文件 .exe 或者是 .zip .rar等压缩包形式，会下载这个文件
<a href="文件名.zip">下载</a>
5、网页元素的链接：网页中各种元素都可以添加超链接，如图片
<a href="http://www.baidu.com"><img src="123.gif"/></a>
6、锚点链接：①在链接文本的href属性中，设置属性值为 #名字 的形式 ②找到目标位置标签，添加id属性=刚才的名字
<a href="#two">第二集</a>
<h3 id="two">第二集介绍</h3>
9、注释
快捷键为 ctrl + /
<!-- 注释语句 -->10、特殊字符
11、表格标签
表格不是用来布局页面的,而是用来展示数据
table用来定义表格的标签trtable row 用来定义表格中的行，必须嵌套在<table></table>标签中；thtable head用来定义表格中的表头单元格，表头单元格里面的内容加粗居中显示tdtable data 用来定义表格中的单元格，必须嵌套在<tr></tr>标签中
快捷键：可以用 table>tr*3>td*3 快速生成三行三列表格； 用 table>(tr>th*3)+(tr*2>td*3) 快速生成第一行是表头的三行三列表格。
表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的。
（align：排列 cell：单元格）
| align | left,center,right | 规定表格相对周围元素的对齐方式 |
| border | 1或者’’ ‘’ | 规定表格单元是否拥有边框，默认为" "，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width、height | 像素值或百分比 | 规定表格的宽度、高度 |
<table align=center border="1" cellpadding="20" cellspacing="0" width="500">12、表格结构标签
为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大区域。
- 用
<thead></thead>：用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行 （th标签为单元格，thead标签为区域） - 用
<tbody></tbody>：用于定义表格的主体，主要是用于放数据本体 - 以上标签都是放在
<table></table>标签中。
13、合并单元格
方式：
- 跨行合并：
rowspan=“合并单元格的个数” - 跨列合并：
colspan=“合并单元格的个数”
跨行：最上侧单元格为目标单元格, 写合并代码；
跨列：最左侧单元格为目标单元格, 写合并代码。
<table border="1" cellspacing="0" width="500" height="249" >
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" ></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>14、列表标签
表格是用来显示数据的，那么列表就是用来布局的。
- 无序列表：
<ul>unordered lists - 有序列表：
<ol>ordered lists - 自定义列表：
<dl>definition lists - <li></li>标签 lists
| 标签名 | 定义 | 说明 |
|---|---|---|
| <ul></ul> | 无序列表 | 里面只能包含li，没有顺序。lil 里面可以包含任何标签 |
| <ol></ol> | 有序列表 | 里面只能包含li，有顺序。li里面可以包含任何标签 |
| <dl></dl> | 自定义列表 | 里面只能包含dt和dd，dt和dd里面可以放任何标签。 <dl>标签用于定义描述列表（或定义列表）；<dt>定义项目/名字；<dd>描述每一个项目/名字 dt与dd同级 |
无序列表
<h4>最喜欢的食物</h4>
<ul>
<li>火锅</li>
<li>烧烤</li>
<li><p>海鲜</p></li>
</ul>
有序列表
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华 2000</li>
<li>刘若英 1800</li>
<li>pink 1700</li>
</ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>名词的解释1</dd>
<dd>名词的解释2</dd>
</dl>15、表单标签
表单目的是为了收集用户信息。 在网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
- 一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
表单域是一个包含表单元素的区域。在写表单元素之前,应该有个表单域把他们进行包含，表单域是 form标签.
<form></from>标签用于定义表单域，以实现用户信息的收集和传递，把它范围内的表单元素信息提交给服务器。
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| methond | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
<form action="url地址" method="提交方式" name="表单域的名称">
</form>15.1 表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
①input输入表单元素
- 在表单元素中<input> (输入) 标签为单标签,用于收集用户信息。
- 在<input>标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
| button | 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) |
| checkbox 复选框 | 定义复选框 |
| file 文件 | 定义输入字段和"浏览"按钮，供文件上传 |
| hidden 隐藏 | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。该字段中的字符被掩码 |
| radio 收音机 | 定义单选按钮 |
| reset 重置 | 定义重置按钮。重置按钮会清楚表单中的所有数据 |
| submit 提交 | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 |
除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定inpute元素的值 |
| placeholder 占位符 | 由用户自定义 | 与value相似，显示在文本框时不影响输入 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
- name 是表单元素的名字，要求单选框和复选框要有相同的name值，value不一致。
- checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
<form>
用户名：<input type="text" value="请输入用户名"> <br>
密码：<input type="password"> <br>
<!-- radio是单选框，可以多选一 -->
<!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
<!-- checkbox是多选框，可以多选 -->
爱好：吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
<!-- 默认选中男 -->
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
<!-- button配合js使用 -->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域：上传文件使用的 -->
上传头像：<input type="file">
</form>
label标签 为 input 元素定义标注（标签），用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验；label标签的 for属性 应当与相关元素的id 属性相同。
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />②select下拉表单元素
- 下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>③textarea文本域元素
- 当用户输入内容较多的情况下，可以使用<textarea>标签，用于定义多行文本输入的控件。
- cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。
<textarea rows="3" cols="20">
文本内容
</textarea>
15.2 表单总结
-
input 输入表单元素
-
select 下拉表单元素
-
textarea 文本域表单元素
这三组表单元素都应该包含在 form 表单域里面，并且有 name 属性
<form>
<input type=“text" name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>
4133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
