HTML是超文本标记语言，标准通用标记语言下的一个应用。下面我们介绍一下HTML常用标签的使用方法及示例。
一、HTML的基本结构
实例
<!--设置文档类型为：HTML ，是告诉浏览器文档类型 --> <!DOCTYPE html> <!-- lang是设置页面默认语言用的，en为engling --> <html lang="en"> <!-- head 是头标签，是供浏览读取用的 --> <head> <!-- 设置当前页面文本采用的编码字符 --> <meta charset="UTF-8"> <!-- 设置页面标题文本内容,在浏览器窗口标签页显示 --> <title>HTML基本结构</title> </head> <body> <!-- 1. 人与人之间交流是通过双方都能听懂的语言 2. 浏览器只能解析html语言(超文本标记语言) 3. 所以用户与浏览器之间必须使用html语言 4. 人类语言是通过语法将文字组织成能够读写交流的格式 5. html文档也必须遵守一定的结构,才可以用于编写与交流 6. 这种文档结构,就是html文档的编写的规范 --> <h1>我爱HTML </h1> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、标题与段落（div,h1~h6,大多只用到h1~h3,p，hr等）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标题与段落</title> </head> <body> <!-- div是块级标签，始终独占一行，并且支持宽高 --> <div style="background-color:red ;"> happy to you! <hr> <H1>风中有朵雨做的云</H1> <!--hr是 水平分隔线 --> <hr> <H2>风中有朵雨做的云</H2> <hr> <H3>风中有朵雨做的云</H3> <hr> <h4>风中有朵雨做的云</h4> <hr> <h5>风中有朵雨做的云</h5> <hr> <p>风中有朵雨做的云，一朵雨做的云</p> <p>云的心里全都是雨，滴滴全都是你</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、文本修饰（strong,em等）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本修饰</title> </head> <body> <div> <!-- strong:文本加粗；em：文本斜体 --> <p>风中有朵雨做的<strong style="background-color: red;color: sandybrown">云</strong>，一朵雨做的云</p> <p>云的心里全都是<em style="color:steelblue">雨</em>，滴滴全都是你</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、列表（将一组有共同特征的内容归纳在一起，ul,li,ol,dt,dd）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!-- 列表,将一组有共同特征的内容归纳在一起 --> <div> <h3>购物清单</h3> <!-- 无序列表 --> <ul> <li>1.强光手电筒，30元，晚上出门方便</li> <li>2.充电宝，60元，及时给手机电 </li> <li>3.移动硬盘，500元，备份数据</li> </ul> <hr> <!-- 有序列表 --> <ol> <li>强光手电筒，30元，晚上出门方便</li> <li>充电宝，60元，及时给手机电 </li> <li>移动硬盘，500元，备份数据</li> </ol> <hr> <!-- 定义列表,类似于名称解释，常用手做友情链接 --> <dl> <dt>HTML</dt> <dd>超文本标记语言，标准通用标记语言下的一个应用</dd> <hr> <dt>大话西游</dt> <dd>***喜剧、爱情电影，</dd> </dl> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、表格
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格是最重要的格式化数据的工具 其实上面的列表内容,非常适合用表格来展示 经过分析, 上面列表加上表头需要一个四行四列的表格进行展示 完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td 表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) --> <!-- 表头 --> <table border="1" cellpadding="5" cellspacing="0" width="500" height="150"> <caption style="font-size:1.2rem;margin-bottom:10px;font-weight:bold">购物车</caption> <thead> <tr bgcolor="lightblue"> <th>序号 </th> <th>名称</th> <th>价格</th> <th>用途</th> </tr> </thead> <tbody> <tr align="center"> <td>1</td> <td>强光手电筒</td> <td>30元</td> <td>晚上出门方便</td> </tr> <tr align="center"> <td>2</td> <td>充电宝</td> <td>60元</td> <td>及时给手机电</td> </tr> <tr align="center"> <td>3</td> <td>移动硬盘</td> <td>500元</td> <td>备份数据</td> </tr> <tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、表单 （表单涉及:form,label,input,select,textarea,button标签）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单</title> </head> <body> <!-- (1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理 (2) 表单涉及:form,label,input,select,textarea,button标签 (3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性 --> <h2>用户注册</h2> <form action="" method="GET"> <div> <label for="username">用 户 名：</label> <input type="text" id="username" name="username" value="" placeholder="用户名不能少于4位"> </div> <div> <label>密 码 ：<input type="password" name="password" placeholder="密码必须包括数字和字母" size="22"></label> </div> <div> <label>确认密码：<input type="password" name="password" placeholder="密码必须包括数字和字母" size="22"></label> </div> <div> <!-- 单选按钮，每一组的name必须相同，才会只返回唯一值，并自动设置它的checked属性 --> <input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"checked > <label for="female" >女</label> </div> <div> <!-- 复选框 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked> <label for="game" >玩游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"> <label for="smoke" >吸烟</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"> <label for="programme" >编程</label> </div> <div> <label for="edu">学历</label> <select name="edu" id="edu" value="3"> <option value="1">幼儿园</option> <option value="2"selected>小学</option> <option value="3">博士后</option> </select> </div> <div> <label for="common">留言</label> <textarea name="common" id="common" cols="30" rows="10" placeholder="不超过50字"></textarea> </div> <input type="submit" value="注册"> <input type="reset" value="重置"> <button>提交</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七、图片与媒体
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片与媒体</title> </head> <body> <h2>图片与媒体</h2> <!-- 图片 --> <h3>图片</h3> <img src="images/jolie.jpg" alt="朱莉" width="280"> <hr> <!-- 视频 --> <h3>视频</h3> <video src="images/demo.mp4" controls="controls" width="365"></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
八、CSS常用选择器和优先级
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器与优先级</title>
<!-- 如果将css写到当前html的文档中，style的标签中的内容则只适用当前文档 -->
<style>
/* 1、标签选择器 */
h4{
/* 设置背景颜色 */
background-color:red;
/* 设置字体颜色 */
color :yellow}
/*2、 类class选择器 */
.bg-blue{
background-color: lightblue
}
/* 3、id选择器 */
#bg-black{
background-color: black
}
</style>
</head>
<body>
<h4>样式规则＝选择器+声明</h4>
<h4 class="bg-blue">样式规则＝选择器+声明</h4>
<h4 class="bg-blue" id="bg-black">样式规则＝选择器+声明</h4>
<!-- 选择器优先级级别：标签<class<id<style ,比内联样式style属性优先级更高的是JS-->
<h4 class="bg-blue" id="bg-black" style="background-color: pink">样式规则＝选择器+声明</h4>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
