一、HTML页面由哪些重要部分组成：
<！DOCTYPE> 文档类型说明 <html> 使用语言说明 <head>浏览器读取头部 <body>当前html内容存放位置
<!-- DOCTYPE 声明文档类型:html--> <!DOCTYPE html> <!-- lang 当前HTML文档使用语言说明 --> <html lang="en"> <!-- head 浏览器读取头部说明 --> <head> <!-- utf-8 全球通用字符集编码 --> <meta charset="UTF-8"> <title>html结构介绍</title> </head> <!-- body 当前html内容存放位置 --> <body> 介绍html结构实例 </body> </html>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html结构介绍</title> </head> <body> 介绍html结构实例 </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、HTML常用标签介绍：
<h1>.....<h6>标题 <div>块级元素 <ul>无序列表 <ol>无序列表 <dl>无序列表 <li>列表项 <p>段落 <img>图片 <video>视频 <hr>分隔线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML常用标签介绍</title> </head> <body> <!-- h1...h6 标题 --> <h1>HTML常用标签介绍</h1> <!-- p 段落文字 --> <p>很多实用和经常用到的HTML常用标签介绍以及简单的应用</p> <!-- div 块元素 --> <div> <!-- ul 无序列表 --> <ul> <li>这是无序排列第1行</li> <li>这是无序排列第2行</li> <li>这是无序排列第3行</li> <li>这是无序排列第4行</li> </ul> </div> <!-- hr 水平分隔线 --> <hr> <!-- div 块元素 --> <div> <!-- ol 有序列表 --> <ol> <li>这是无序排列第1行</li> <li>这是无序排列第2行</li> <li>这是无序排列第3行</li> <li>这是无序排列第4行</li> </ol> </div> <!-- hr 水平分隔线 --> <hr> <!-- div 块元素 --> <div> <!-- dl 定义列表 --> <ol> <li>这是无序排列第1行</li> <li>这是无序排列第2行</li> <li>这是无序排列第3行</li> <li>这是无序排列第4行</li> </ol> </div> <!-- hr 水平分隔线 --> <hr> <h3>这是一张图片</h3> <!-- img 图片标签 src是引用图片地图 alt是图片文字说明，无图显示时显示文字 --> <img src="images/mz.jpg" alt="没有图片哦"> <h3>一段小视频</h3> <!-- video 视频标签 src引用视频地址 controls显示播放控件 width宽度设置 --> <video src="images/mz.mp4" controls="controls" width="400"></video> </body> </html>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML常用标签介绍</title> </head> <body> <!-- h1...h6 标题 --> <h1>HTML常用标签介绍</h1> <!-- p 段落文字 --> <p>很多实用和经常用到的HTML常用标签介绍以及简单的应用</p> <!-- div 块元素 --> <div> <!-- ul 无序列表 --> <ul> <li>这是无序排列第1行</li> <li>这是无序排列第2行</li> <li>这是无序排列第3行</li> <li>这是无序排列第4行</li> </ul> </div> <!-- hr 水平分隔线 --> <hr> <!-- div 块元素 --> <div> <!-- ol 有序列表 --> <ol> <li>这是无序排列第1行</li> <li>这是无序排列第2行</li> <li>这是无序排列第3行</li> <li>这是无序排列第4行</li> </ol> </div> <!-- hr 水平分隔线 --> <hr> <!-- div 块元素 --> <div> <!-- dl 定义列表 --> <ol> <li>这是无序排列第1行</li> <li>这是无序排列第2行</li> <li>这是无序排列第3行</li> <li>这是无序排列第4行</li> </ol> </div> <!-- hr 水平分隔线 --> <hr> <h3>这是一张图片</h3> <!-- img 图片标签 src是引用图片地图 alt是图片文字说明，无图显示时显示文字 --> <img src="images/mz.jpg" alt="没有图片哦"> <h3>一段小视频</h3> <!-- video 视频标签 src引用视频地址 controls显示播放控件 width宽度设置 --> <video src="images/mz.mp4" controls="controls" width="400"></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、盒子和CSS选择器使用：