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="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="#第一章">第一章（点击此处直接跳到id为第一章的div处）</a>

　　　　  <a href="#第二章">第二章（点击此处直接跳到id为第二章的div处）</a>

　　　　  <a href="#第三章">第三章（点击此处直接跳到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"/>&nbsp;足球<input type="checkbox"/>&nbsp;排球<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="root" placeholder="请输入默认值"/></div>

name属性：相当于id，标识符；value 表示默认值；placeholder="请输入默认值" 表示：提示信息，当此文本框中输入值后，此提示信息自动消失，清空后，提示信息又出现

图片：<div><img src="data: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>
        邮&nbsp;&nbsp;&nbsp;箱：<input type="email" name="email"/>
    </p>
    <p>
        登录用户名：<input type="text" name="username"/>
    </p>
    <p>
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd"/>
    </p>
    <p>
        确认密码：<input type="password" name="pwd_sure"/>
    </p>
    <p>
        性&nbsp;&nbsp;&nbsp;别：男<input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="2"/>
    </p>
    <p>爱&nbsp;&nbsp;&nbsp;好：
        篮球<input type="checkbox" name="hobby" value="lanqiu"/>
        足球<input type="checkbox" name="hobby" value="zuqiu"/>
        排球<input type="checkbox" name="hobby" value="paiqiu"/>
    </p>
    <p>城&nbsp;&nbsp;&nbsp;市：
        <select name="city">
            <option value="beijing">
                北京
            </option>
            <option value="hebei">
                河北
            </option>
            <option value="henan">
                河南
            </option>
        </select>
    </p>
    <p>简&nbsp;&nbsp;&nbsp;介：
        <textarea name="jianjie"></textarea>
    </p>
    <p>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </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>