首页 > 代码库 > Html语言的标签讲解
Html语言的标签讲解
一、head头部中的内容：
1、<meta charset="UTF-8"> <--!告诉浏览器什么编码-->
2、<meta http-equiv="Refresh" Content = "5"/> <!--页面自动刷新功能，每隔5秒-->
3、<meta http-equiv="Refresh" Content = "5; Url=http://www.baidu.com"/><!--页面自动刷新功能，每隔5秒，跳转到百度首页-->
4、<meta name="keywords" content="博文，python"/><!--网页的关键字-->
5、<meta name="description" content="各种发布的博文，python语言、linux运维等各方面的技术"/><!--网页描述-->
6、<title>欢迎加入博客园</title><--!网页显示标题-->
7、<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=edge"/><!--指定页面的渲染模式，此指按照最高的渲染模式，主要解决兼容性的问题-->
<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE7"/><!--指定页面的渲染模式，此指按照IE7的渲染模式，主要解决兼容性的问题-->
8、link标签：主要是引入css样式、页面顶部图标、js脚本
<link rel="shortcut icon" href="http://www.mamicode.com/image/页面图标.png"/><--!引入页面顶部图标-->
。。。
二、body的杂七杂八
三类标签的分类：块级标签、行内标签（或内联标签）和各种符号
区别：块级标签占一行，行内标签（或内联标签）占一块
A》块级标签
1、div标签：<div style="background-color: red">div:块级标签</div>
2、p标签：段落 <p style="background-color: red">p:块级标签</p>
3、br标签：换行 <p style="background-color: red">p:块<br/>级标签</p>
4、h1-h6标题标签：
5、列表标签
6、label标签
label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。
当鼠标点击label标签内的文本时，自动将焦点转移到控件本身。
B》行内标签（或内联标签）
1、a标签：<a style="background-color:greenyellow">a:行内标签</a>
a标签的跳转用途：
特有的属性 href = "http://www.baidu.com"
<a href="http://www.baidu.com">百度</a>
target属性：打开的链接页，将以重新打开一页、在当前页等形式展开
<a href="http://www.baidu.com" target="_blank">百度</a><!--在新的一页中打开链接页-->
<a href="http://www.baidu.com" target="_parent">百度</a><!--在父级页中打开链接页，可以理解为本页中-->
a标签的锚点用途：
<a href="http://www.mamicode.com/#第一章">第一章（点击此处直接跳到id为第一章的div处）</a>
<a href="http://www.mamicode.com/#第二章">第二章（点击此处直接跳到id为第二章的div处）</a>
<a href="http://www.mamicode.com/#第三章">第三章（点击此处直接跳到id为第三章的div处）</a>
<div id="第一章">第一章内容</div>
<div id="第二章">第二章内容</div>
<div id="第三章">第三章内容</div>
2、span标签：内联标签，不会独占一行。格式化文本
<span>span标签</span>
例如一段文本：<p>我是中国人</p>，你想把“中国”二字单独加粗，这时你就可以使用<p>我是<span>中国</span>人</p>，然后对其设置CSS就可以了。
三、允许用户输入值的系列标签
1、input系列
邮箱：<input type="email"/> <!--系统自动去检测填写的内容是否符合邮箱的格式-->
登录用户名：<input type="text"/> <!--单行输入框的应用-->
密码：<input type="password"/> <!--自动将输入的字符或者数据转换为黑点形式-->
性别：男<input type="radio" name="sex"/>女<input type="radio" name="sex"/> <!--单选框的应用-->
属性：男<input type="radio" name="sex" checked ="checked" /> <!--checked属性表示默认选中-->
爱好：篮球<input type="checkbox"/> 足球<input type="checkbox"/> 排球<input type="checkbox"/> <!--复选框的应用-->
属性：默认选中的方式和单选框一样的设置方式，checked = "checked"
城市：<select><option>北京</option><option>上海</option><option>广州</option></select> <!--下来框的应用-->
属性：<select multiple size="10">...</select> mutiple：表示可以同时多选，size = “10” 表示列表中显示10个选项
<option selected="selected">北京</option> 表示默认选中北京。与上面的单选框、多选框关键字不一样
简介：<textarea></textarea> <!--多行输入框的应用-->
照片：<input type="file"/> <!--上传文件功能的应用-->
补充：
<div>登录用户名：<input type="text" name="username" value="http://www.mamicode.com/root" placeholder="请输入默认值"/></div>
name属性：相当于id，标识符；value 表示默认值；placeholder="请输入默认值" 表示：提示信息，当此文本框中输入值后，此提示信息自动消失，清空后，提示信息又出现
图片：<div><img src="http://www.mamicode.com/image/页面图标.png" alt="图标" title="页面图标"></div> <!--alt表示：当图片不存在时，图片的位置会显示“图片”两个字。title表示：当鼠标放到图片上，会显示“页面图标”四个字-->
<fieldset>
<legend>注册</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
2、form表单标签：用来提交表单内的数据
属性：
action = “URL” 点击summit按钮后，会自动将数据提交到URL这个界面
method = "POST" 表示以哪种提交方式提交，可以是POST，GET等
enctype = "multipart/form-data" 表示上传文件
例：<form action="http://www.baidu.com/index/">
注：form表单提交数据时，各个标签都要有name属性值
例：
<!--form标签用来提交表单内的数据，跳转至www.baidu.com，同时支持了文件的上传（enctype="multipart/form-data"）-->
<!--特别需要注意单选框（radio）,多选框（checkbox）,下拉菜单（select）三个标签在form中的应用-->
<form action="http://www.baidu.com" enctype="multipart/form-data">
<p>
邮 箱：<input type="email" name="email"/>
</p>
<p>
登录用户名：<input type="text" name="username"/>
</p>
<p>
密 码：<input type="password" name="pwd"/>
</p>
<p>
确认密码：<input type="password" name="pwd_sure"/>
</p>
<p>
性 别：男<input type="radio" name="sex" value="http://www.mamicode.com/1"/>女<input type="radio" name="sex" value="http://www.mamicode.com/2"/>
</p>
<p>爱 好：
篮球<input type="checkbox" name="hobby" value="http://www.mamicode.com/lanqiu"/>
足球<input type="checkbox" name="hobby" value="http://www.mamicode.com/zuqiu"/>
排球<input type="checkbox" name="hobby" value="http://www.mamicode.com/paiqiu"/>
</p>
<p>城 市：
<select name="city">
<option value="http://www.mamicode.com/beijing">
北京
</option>
<option value="http://www.mamicode.com/hebei">
河北
</option>
<option value="http://www.mamicode.com/henan">
河南
</option>
</select>
</p>
<p>简 介：
<textarea name="jianjie"></textarea>
</p>
<p>
<input type="submit" value="http://www.mamicode.com/提交"/>
<input type="reset" value="http://www.mamicode.com/重置"/>
</p>
</form>
四、table表格的介绍
表格标签：<table> 、 <thead> 、<tbody>
行标签：<tr>
列标签：<td> 、<th>
跨多列：<td colspan="2">我占了两列</td> 表示跨两列
跨多行：<td rowspan="2">我占了两行</td> 表示跨两行
<table border="1" style="text-align: center"> <!--border：表格边框，text-align：center:文本居中-->
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option>百度</option>
<option>hao123</option>
</select>
</td>
<td>python</td>
<td><a href="">删除</a>|<a href="http://www.baidu.com">跳转</a></td>
</tr>
<tr>
<td>2</td>
<td>
<select>
<option>百度</option>
<option>hao123</option>
</select>
</td>
<td>python</td>
<td><a href="">删除</a>|<a href="http://www.hao123.com">跳转</a></td>
</tr>
</tbody>
</table>
五、CSS实战之前戏
margin: 0 auto 表示边距。默认边距为8像素。这样设置表示距离上、下边距为0，左、右边距自动平分。
border：1px 表示边框的大小
text-align:center 文本居中，还有居左：left，居右：right（水平方向）
height:48px 定义高度，为48px
width：16px 定义宽度，为16px
background-color:#bbbbbb 定义背景颜色
color:black 定义文本颜色
font-size: 18px 定义字体大小
line-height:36px 表示字体的位置，当div的高度为36px时，此时字体在垂直的中间位置
display: inline 表示具有内联标签的特性
display:block 表示具有块级标签的特性
display:inline-block 表示具有内联标签特性，也有块级标签的特性
注：
横线标签：<hr>
Html语言的标签讲解