Html/Css基础学习一（基础标签）

一、Html简介

　　HTML是描述网页的一种语言，它不是编程语言，而是一种标记语言。由标记标签构成，HTML使用标记标签来描述页面。HTML标签是由尖括号包围的关键词，如<head></head>，标签一般是成对出现的，前一个是开始标签，后一个是结束标签。也有一种标签是单个的，这种标签称为自闭和标签。

基础结构如下：

<!DOCTYPE html>
<!-- 规定标准的html --> <html lang="en"> <!-- 一个页面只有一对HTML标签，除非嵌套了iframe --> <head> <!--头部中大部分标签是不可见的--> <meta charset="UTF-8"> <!--这种不像title一样有对应标签的叫做自闭和标签--> <title>Title</title> <!--像title这种有对应标签的这种是主动闭合标签--> <!--title修改的是浏览器tab内容--> </head> <body> </body> </html>

二、基本标签介绍

　　基本标签如div、span等模块标签，标题标签、段落标签等服务于文字的，input等输入数据的标签等等。一般是放在html页面的<body></body>标签中的。

1、<p></p>段落标签

　　 p标签就是段落标签，用于展现网络页面中的文字段落，一般和</br>换行标签配合使用。下面的代码就是其基础使用方法。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>来看看段落标签，如果我加了&lt;br&gt;<br>后面跟的这句话就会自动换行</p> </body> </html>

　　在网页上呈现效果如下：

来看看段落标签，如果我加了<br>
后面跟的这句话就会自动换行

　　其中<和>配合可以呈现出尖括号的效果，直接使用尖括号在html文件中会被识别为标签，无法展示在网页上，所以需要用<和>来表现尖括号。

2、<h></h>标题标签

　　标题标签顾名思义，专门用于标题。标题的大小是不同的，展现出来的效果也是不同的。标题标签的基础使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>&lt;h1&gt;标题标签</h1> <h2>&lt;h2&gt;标题标签</h2> <h3>&lt;h3&gt;标题标签</h3> <h4>&lt;h4&gt;标题标签</h4> </body> </html>

　　在网页上的呈现效果如下：

3、<div></div>块级标签

　　块级标签，会占满整行，是HTML页面中比较常出现的标签，本身没有任何属性，可以通过CSS进行装饰后成为任何一种。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>div是伪白班标签，有一个将其变为块级标签的属性，也是可以通过修饰变成其他标签</div> </body> </html>

　　展示的效果如下：

　　可以看到即使这行文字并没有占满整行，检查元素时可以看到其实整行都属于div块状标签的范围。

4、<span></span>行内标签

　　行内标签也是什么属性都不带，可以通过CSS装饰变成其他标签。其相比于div标签的区别就是，其占用范围就是文字范围，不会占满整行。基础使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span>span是行内标签，也是可以通过修饰变成其他标签</span> </body> </html>

　　在界面上的展示效果如下：

5、<input></input>文本框标签

　　文本框标签包含多个属性，如text、password、button、CheckBox、radio、file、submit、reset等等。可以表现文本输入框、密码输入框、按钮、勾选框、单选框、选择文件、提交和重置等功能。基础使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" placeholder="请输入用户名" name="username" value="admin"> <input type="password" placeholder="请输入密码" name="password"> <span>是否记住登录</span><input type="checkbox" name="checkbox" checked="checked"> <div>性别</div> <span>男</span><input type="radio" checked="checked" name="sex"> <span>女</span><input type="radio" name="sex"> </body> </html>

　　以上代码在网页界面上的呈现效果如下：

　　注1：可以看到第一个文本输入框中有默认值“admin”，这是因为在input标签中增加了属性value="admin"这样就设置了默认值。

　　注2：第二个密码输入框中，有提示文字，是通过属性placeholder="请输入密码"实现的，而且因为其type=password，输入的密码会自动隐藏。

　　注3：是否记住登录中是默认勾选状态，这是因为在input标签中增加了属性checked="checked"，使其处于被勾选状态。

　　注4：性别只能二选其一，所以在input标签中增加了属性name="sex"，这样就会自动识别，此类添加了这个标签的radio只能选择其中一个。

6、<form></form>表单标签

　　表单标签可以理解为载体，承载着向后端提交数据的功能。一般和input连用，得到文本标签获取到的输入信息后，向后端传输。表单标签提交数据分为get型提交和post型提交，get提交会在url上面挂参数，post提交会在body上挂参数。使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/login" method="post"> <input type="text" placeholder="请输入用户名" name="username" value="admin"> <input type="password" placeholder="请输入密码" name="password"> </form> </body> </html>

7、<label></label>标题标签

　　标题标签也是一般和input标签连用，利用label标签中的for="username"和input标签中的id="username"进行关联，label标签可用于说明这个文本标签代表什么含义，也可以增加input的点击范围，只需要点击文字就可以输入数据。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label for="username">用户名：</label> <input id="username" type="text" placeholder="placeholder属性"/> </body> </html>

　　在网页上的展示效果如下：

8、<textarea></textarea>多行标签

　　多行文本标签会自动将标签间的数据展示在一个文本框中，会自动换行。基础使用方法如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <textarea name="more">此处填写多行文本标签中的数据，数据会自动转行，也可以展示其他格式的数据，如just do it英文，和1234数字等等</textarea> </body> </html>

　　其展示在网页上的效果如下：

　　使用鼠标点击其右下角不放，移动鼠标，可以调整多行文本框的格式。

9、<select></select>下拉框标签

①select&option

　　select option是下拉框标签。option标签中的value是定义送往服务器的值不用于排序，默认选择在option上增加select="selected"，multiple用以定义显示多个数据,size属性用于定义展示数据超过多少个就出现滚动条。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h5 style="display: inline">单选</h5>
    <select name="city">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
    </select>
    <h5 style="display: inline">多选</h5>
    <select name="city" multiple="multiple">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
    </select>
    <h5 style="display: inline">超过4个就出滚动条</h5>
    <select name="city" size="4">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
        <option value="5">吉林</option>
        <option value="6">漠河</option>
    </select>
</body>
</html>

　　在网页界面上的展示效果如下：

②select&optgroup

　　select和optgroup的配合可以对下拉选项进行分组操作，其中optgroup中的属性label用于定义组，不可被选择，其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div><h4>分组的下拉选择框，黑龙江省&四川省属于label无法被选择</h4></div>
    <select name="city" size="12" multiple="multiple">
        <optgroup label="黑龙江省">
            <option value="1">哈尔滨</option>
            <option value="2">牡丹江</option>
            <option value="3">宁安</option>
            <option value="4">林口</option>
            <option value="5">古城</option>
        </optgroup>
        <optgroup label="四川省">
            <option value="1">成都</option>
            <option value="2">绵阳</option>
        </optgroup>
    </select>
</body>
</html>

　　在网页界面上的展示效果如下：

10、<a></a>超链接标签

　　超链接用于在网页展示链接地址，可以点击链接跳转到目标界面，a标签中的href属性为跳转的地址；target属性定义用什么方式跳转，比如target="_blank"指不在当前界面跳转而是打开一个新的tab页。

　　同时a标签还可以做锚点，通过id进行对应关系的映射，超链接默认带有下划线，可以通过属性text-decoration:none来实现。

　　超链接标签的基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div><a href="http://www.imdsx.cn" target="_blank" style="text-decoration:underline">大师兄博客</a></div>
    <div><a href="http://www.baidu.com" target="_blank" style="text-decoration:none">百度一下</a></div>
</body>
</html>

　　以上代码在网页上的呈现效果如下，都可以点击文字进入新的网页：

11、</img>图片标签

　　图片标签是一个自闭和标签，可以在网页上展示图片，因为图片大小不一定适合直接放在页面上，还可以对展示方法进行设置。

src：图片的位置，可以是一个链接也可以是本地的绝对路径；
alt：设置文案，当图片加载失败时，展示这个文案
title：定义鼠标悬浮在图片上时展示的文字

　　如果要对图片的展示方法进行设置，可以使用div标签开辟一个模块，将图片展示在该模块中，然后通过overflow属性来进行控制。

overflow:auto自适应，如果图片较大则外框加载滚动条，如果图片较小则直接显示
overflow:hidden如果图片较大则将大于外框的部分直接剪裁掉
overflow:scroll不论图片大小，外框都加载滚动条

　　其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 201px;height: 201px;border: 1px red solid;overflow: auto">
        <img src="http://www.nnzhp.cn/wp-content/themes/QQ/images/logo.jpg" style="height: 200px;width: 200px;" alt="加载失败时出现" title="鼠标悬停在图片上时出现的文字"></div>
</body>
</html>

　　以上代码在网页上的呈现效果如下：

12、ul/ol/dl列表标签

　　列表标签用于在网页上展示列表数据。分为ul&li模式、ol&li模式以及dl&dt&dd模式。前两种是单纯的列表，后一种有分层模式。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="ul-css" style="top: 10px;left: 10px">
        <div><h4>列表 ul li · 形式的列表</h4></div>
        <div style="display: inline-block">
            <ul>
                <li>第一列</li>
                <li>第二列</li>
            </ul>
        </div>
    </div>
    <div class="ul-css">
        <div><h4 style="display: inline-block">列表 ol li 数字形式的列表</h4></div>
        <div style="display: inline-block">
            <ol>
                <li>第一列</li>
                <li>第二列</li>
            </ol>
        </div>
    </div>
    <div style="padding-left: 20px">
        <div><h4>分层列表 dl dd内层 dt外层</h4></div>
        <div>
            <dl>
                <dt>黑龙江</dt>
                <dd>哈尔滨</dd>
                <dd>牡丹江</dd>
            </dl>
            <dl>
                <dt>北京</dt>
                <dd>北京</dd>
            </dl>
        </div>
    </div>
</body>
</html>

列表标签基础使用方法

　　以上代码在网页上的展示效果如下：

13、<table></table>表格标签

　　表格标签就是在界面上展示表格。th为表头，tbody为内容，tr为行数据，td为列数据，boder用于定义表格的边框。cosplan可以用来定义这个数据占几列，rowspan可以用来定义这个数据占几行，类似于单元格合并展示同一个数据。其基础的使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
    <table border="1" >
        <thead>
        <tr>
            <th>ID</th>
            <th>用例名称</th>
            <th>执行人</th>
            <th colspan="2">编辑</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>table表格测试</td>
            <td rowspan="4">大师兄</td>
            <td><a href="tmp.html">详情</a></td>
            <td><a href="edit.html">编辑</a></td>
        </tr>
        <tr>
            <td>2</td>
            <!-- colspan等于几就占几列-->
            <td>table表格测试</td>
            <td><a href="tmp.html">详情</a></td>
            <td><a href="edit.html">编辑</a></td>
        </tr>
        <tr>
            <td>3</td>
            <!-- rowspan等于几就占几行-->
            <td rowspan="2">table表格测试</td>
            <td><a href="tmp.html">详情</a></td>
            <td><a href="edit.html">编辑</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td><a href="tmp.html">详情</a></td>
            <td><a href="edit.html">编辑</a></td>
        </tr>
        </tbody>
    </table>
    </div>
</body>
</html>

表格标签使用方法

　　以上代码在页面上的展示效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h5 style="display: inline">单选</h5>
    <select name="city">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
    </select>
    <h5 style="display: inline">多选</h5>
    <select name="city" multiple="multiple">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
    </select>
    <h5 style="display: inline">超过4个就出滚动条</h5>
    <select name="city" size="4">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
        <option value="5">吉林</option>
        <option value="6">漠河</option>
    </select>
</body>
</html>