样例： <!DOCTYPE html> <html lang="zh-CN"> <!-- "en" 英文 --> <head> <meta charset="utf-8"> <!-- 声明编码方式等信息 --> <title>first web app</title> <!-- 网页标题 --> </head> <body> <!--网页显示内容 --> welcome to my web <div class="CLASS" id="div1"></div>> <br /> <img src="image/timg.jpg" alt="zhao li ying"> </body> </html> xhtml 1.0 和 html 5.0 前者的声明比较长，字符编码也比较长，其他的没有什么区别 h5 新增了很多标签 文档规范：（xhtml的规范，html5 可部分遵守） 所有的标签必须小写 所有的属性必须用双引号括起来 所有的标签必须闭合,（ 单个标签也一样 <br />，有空格 ） img必须加alt 属性（对图片的描述） 注释： <!-- 888888 --> 标签的特点： 成对出现 <b></b> 单个出现 <br /> 嵌套 标签： 标题标签： 从 h1 --- h6，搜索引擎根据标题标签 将网页的结构和内容编制索引 段落标签：<p></p> 强制换行：<br /> 空格：非文本开头，默认不管文本几个空格，显示都是一个空格，文本开头没有空格 表示一个空格， 表示两个 否则只能用css > > < < 块： div：块元素，表示一块内容，没有具体的语义 span：行内元素，表示一行中的一小段内容，没有具体的语义，通过span来添加样式 含样式 和 语义 的标签 em标签 行内元素，表示语气中的强调词, --- 斜体 i 标签 行内元素, 原本没有语义，w3c 强加的，表示专业词汇 --- 斜体 b 标签 行内元素， 原本没有语义，w3c 强加的，表示文档中的关键词或者产品名 --- 加粗 strong标签，行内元素，表示强调，--- 加粗 语义化的标签： 就是在布局的时候，多使用语义化的标签，对于搜索引擎在爬网的时候，认识这些标签，提升排名 图像： <img src="image/577defb499e90.jpg" alt="赵丽颖"> 路径： 相对路径：<img src="image/577defb499e90.jpg" alt="赵丽颖"> 绝对路径：<img src="F:背景/timg.jpg" alt="赵丽颖"> 路径写死，只能按照此路径搜索。 链接： <a></a> <a href="www.taobao.com" title="跳到淘宝网">淘宝</a> title是，鼠标移到上面，就有一个提示 <a href="www.magedu.com" title="magedu"> <img src="image/timg (4).jpg" alt="meiren"> </a> <a href="#">返回顶部</a> # 表示返回顶部 <a href="javascript:;">缺省值</a> 表示什么都不做，这样就不会跳到顶部 <a href="http://www.baidu.com" target="_blank">baidu</a> 新开一个网页 定义页面内的跳转 不推荐用name，用id 如：三个标题互相跳转 href 是 # + 标题的id <h1 id=22>2</h1> <a href="#11">1</a> <a href="#22">2</a> <a href="#33">3</a> <p> 2、div：块元素，表示一块内容，没有具体的语义 span：行内元素，表示一行中的一小段内容，没有具体的语义，通过span来添加样式 含样式 和 语义 的标签 em标签 行内元素，表示语气中的强调词, --- 斜体 i 标签 行内元素, 原本没有语义，w3c 强加的，表示专业词汇 --- 斜体 b 标签 行内元素， 原本没有语义，w3c 强加的，表示文档中的关键词或者产品名 --- 加粗 stron </p> dl,dt,dd: html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹， 此组合标签我们也又叫表格标签， 与table表格类似组合标签，故名我们也叫dl表格 <dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。 如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。 如： <dl> <dt>html</dt> <dd>复制页面的结构</dd> <dt>css</dt> <dd>负责页面表现</dd> <dt>js</dt> <dd>fuze页面的行为</dd> </dl> 有序列表：自动添加编号 <ol> <li>study</li> <li>study</li> <li>study</li> </ol> 无序列表：前面添加小圆点 <ul> <li>study</li> <li>study</li> <li>study</li> </ul> 定义列表： <dl> <dt>名词</dt> <dd>解释名词</dd> </dl> 表格： <table border="1"> 定义边框 <tr> <th>name</th> <th>age</th> <th>gender</th> </tr> <tr> <td>jack</td> 一个格子 <td>12</td> <td>M</td> </tr> </table> 表单：用户输入信息 <h>用户注册</h> <form action="http://www.jerry.com" method="post"> 提交到哪里,默认是get，post通过http报文 method提交 <div> <label for="username">用户名：</label> 加for 可以激活，点汉子，就可以激活，可以输入信息 <input type="text" name="username" id="username" > 会有一个输入框,value="tom"有一个默认值 </div> <div> <label>密码：</label> <input type="text" name="">n </div> <div> <label>性别：</label> <input type="raio" name="gender" id="m"> <label for="m">男</label> 这样点男，也可以选中 <input type="raio" name="gender">女 </div> <div> <label>爱好：</label> <input type="checkbox" name="like" value="game"> game <input type="checkbox" name="like" value="nv"> gill <input type="checkbox" name="like" value="shuijiao"> sleep <input type="checkbox" name="like" value="mai"> shopping </div> <div> <label>签名：</label> <select name="city"> 下拉框 <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div> 上传文件 <label>照片：</label> <input type="file" name=""> </div> <div> 输入文本信息 <label>个人描述</label> <textarea></textarea> </div> <input type="submit" name="" value="提交"> <input type="reset" value="重置"> 清空表单 <input type="button" value="" ="按钮"> 单纯做个按钮 <input type="image" name="" src="f:/背景/timg (4).jpg"> 用图片做提交按钮，有时候出现提交两次的bug <input type="hidden" name="hid" value="100000"> 不显示，只传值value </form> value值，get 的方式 ，提交后，会在url中显示的 内嵌框架：嵌入一个网页 <iframe src="http://www.baidu.com"></iframe>