在开发web前端网页熟练应用是每个前端开发者必须掌握的。以下是一些html页面中常用的标签。
html常用标签实例
<!-- 设置文档类型为:html --> <!DOCTYPE html> <!-- 设置文档默认语言 --> <html lang="en"> <!--head头标签 他的内容仅供浏览器读取 --> <head> <!-- 设置当前页面中的文本采用的默认编码字符集 --> <meta charset="UTF-8"> <!-- 设置当前页面的标题，显示在浏览器窗口标签页 --> <title>学习html常用的标签</title> </head> <body> <!-- 块级元素：独占一行，对宽高的属性生效，如果不给宽度，块级元素就默认浏览器的宽度 例如:div p ul h1-h6 --> <!-- 1.标题标签 <h1><h2>...<h6>.. 2.段落标签 <p> --> <div> <h1>h1字体效果</h1> <h2>h2字体效果</h2> <h3>h3字体效果</h3> <h4>h4字体效果</h4> <p>个别字体样式文字不完整，请换一种字体继续转换！增加个性<strong>签名</strong>图片尺寸，更改文件格式的同时缩小了文件大小，生成速度更快，<em>下载</em>更方便。兼顾使用手机上网的朋友们</p> </div> <hr> <!-- 列表标签 --> <div> <!-- 无序列表 --> <ul> <li>1.我是第一</li> <li>2.我是第二</li> <li>3.我是第三</li> </ul> <!-- 有序列表 --> <ol> <li>1.我是第一</li> <li>1.我是第二</li> <li>1.我是第三</li> </ol> <!-- 定义列表 类似于名词解释 --> <dl> <dt>郑成功</dt> <dd>民族英雄</dd> <dt>郑智化</dt> <dd>歌手</dd> </dl> </div> <hr> <!-- 表格 --> <table cellpadding="5" border="1px" cellspacing=0> <caption>学生成绩表</caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>科目</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小明</td> <td>语文</td> <td>80</td> </tr> <tr> <td>2</td> <td>小郑</td> <td>数学</td> <td>90</td> </tr> <tr> <td>3</td> <td>小新</td> <td>天天</td> <td>89</td> </tr> </tbody> </table> <hr> <!-- 表单 --> <h2>添加学生</h2> <form action="" method="POST"> <div> <label for="use_id">学号</label> <input type="text" id="use_id" name="use_id" placeholder="请填写学号" size="50" /> </div> <div> <label for="use_name">姓名</label> <input type="text" id="use_name" name="use_name" placeholder="请填写姓名" size="50" /> </div> <div> <label>性别</label> <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label> </div> <div> <label>兴趣爱好</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="shu" id="shu"><label for="shu">看书</label> <input type="checkbox" name="hobby[]" value="ball" id="ball"><label for="ball">打球</label> </div> <div> <label for="edu">籍贯</label> <select name="edu" id="edu"> <option value="1">万达村</option> <option value="2">正荣村</option> <option value="3">碧桂园村</option> </select> </div> <div> <label for="liuyan"></label> <textarea name="liuyan" id="liuyan" rows="10" cols="30" placeholder="字数不少于100字"></textarea> </div> <div> <input type="submit" name="sub" value="提交数据"> <input type="reset" value="重置"> </div> </form> <!-- 引入图片 --> <img src="http://www.uustv.com/1.gif" alt="图片1" /> <!-- 引入视屏文件 --> <video src="http://video.699pic.com/videos/04/54/34/a_NdVdi6RRDJXw1547045435.mp4" controls='controls' ></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>设置文档类型为:html.Html 是文档根标签，有且仅有一个，代表整个文档
元素是用标签来表示的，标签分为
双标签：他的内容来自当前文档
单标签：他的内容通常是引用外部资源例如图片，文件等
块级元素：独占一行，对宽高的属性生效，如果不给宽度，块级元素就默认浏览器的宽度 例如:div p ul h1-h6
行内元素：对宽高属性值不生效，完全靠内容撑开宽高，可以跟其他标签存在一行 例如 span b strong em a img input
行内块元素：结合行内和块元素的特点，不仅对宽高的属性值生效还可以跟多个标签存在一行 例如img input
2.CSS样式规则和常用选择器优先级
a.CSS样式规则=选择器+样式声明
b.常用选择器优先级：标签 < 类class选择器 < id选择器 <行内样式
实例
<!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>CSS样式规则</title>
<style>
/* 常用选择器优先级：标签 < 类class选择器 < id选择器 <行内样式 */
h1{ background-color: blue}
.uu{background-color: crimson}
#pp{background-color: darkmagenta}
</style>
</head>
<body>
<!-- CSS样式规则=选择器+样式声明 -->
<h1>hellow</h1>
<h1 class="uu">hellow</h1>
<h1 class="uu" id="pp">hellow</h1>
<h1 class="uu" id="pp" style="background-color: darkslategray;">hellow</h1>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例