html基础之html标签

HTML(HyperText Markup Language)，超文本标记语言。是一长串字符串，能够被浏览器所解析。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

html分三个重要的模块。

HTML：一个赤裸的人

CSS：是这个人的衣服

JS（JavaScript）：这个人的动作

1、html head部分

<!DOCTYPE html><!--规定标准的html-->
<!--一个页面只有一个html标签-->
<!--标签的属性 lang="en"指定英文-->
<html lang="en">
<head>
    <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
    <!--meta是自闭和标签-->
    <meta charset="UTF-8">
    <!--每隔一秒钟刷新一次-->
    <meta http-equiv="refresh" content="1">
    <meta http-equiv="refresh" content="2;url=http://www.baidu.com">
    <!--titlt是主动闭合标签-->
    <!--更改浏览器tab的名字-->
    <title>双鱼座</title>
    <!--rel 代表link做什么用，href代表路径-->
    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">
    <!-- 引入css -->
    <link rel="stylesheet" href="tmp.css">
    <!-- css样式-->
    <style></style>
    <!-- 引入js -->
    <script src="tmp.js"></script>
</head>
<body>
</body>
</html>

2.html body部分

符号

<a href="http://www.imdsx.cn">大&nbsp师&nbsp兄</a>

空格：&nbsp 大于号：&gt 小于号 &lt 记住常用的这三个，其他的用时百度

块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)

行内标签：SPAN标签(白板)

H，标题标签，由h1到h6，标题由大到小

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>
</body>
</html>

p，段落标签，每行文字之间有一定的间距，在检查模式下可查看到（也属于块级标签，鼠标悬浮去看，如果占了整行就是块级标签）；

br，换行；

span，（行内标签），鼠标悬浮去看，如果只占了文字的那一块就是行内标签；（白板标签），没有任何的样式，可以通过css修饰变成p标签等任何标签。

div，块级标签，也叫伪白板标签，可以通过css修饰变成任何一种标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双鱼座</title>
</head>
<body>
   <p>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
   <span>年轻,就是拿来折腾的。</span>
   <div>年轻,就是拿来折腾的。</div>
</body>
</html>

input，文本框标签，包含多个属性，button、text、password、checkbox、radio、file、submit、reset

form，表单标签可以理解为载体，承载着所有要像后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中

label，label 标题标签与input联合运用，增加input的点击范围可直接点击文字就输入 for：映射到input的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双鱼座</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名" name="username" value="admin">
    <input placeholder="请输入密码" type="password" name="password">
    <span>是否记住登录</span><input type="checkbox" checked="checked" name="xxx" >
    <div>性别</div>
    <span>男</span><input type="radio" checked="checked" name="sex">
    <span>女</span><input type="radio" name="sex">
    <input type="file" name="file">
    <!--button是需要和js连用，通过js进行提交操作-->
    <input type="button" value="提交">
    <form action="http://www.baidu.com" method="post">  <!--- form标签是一个承载体，可以理解为一张白纸，input是往白纸上写字 -->
        <input type="text" name="username" value="admin">
        <input type="reset" value="重置">
        <!--submit如果和form表单连用，则直接提交表单-->
        <input type="submit" value="提交">
        <input type="button" value="button登录">
    </form>
        <label for="i1">用户名</label><input id="i1" type="text" value="admin"> <!-- 扩展了input的可点击范围 -->
        <span>密码</span><input type="password">
        <!-- 多行文本 -->
        <textarea>多行文本，内容较多的时候会出现下拉条</textarea>
</body>
</html>

select option，select option 下拉框标签默认选择在option上增加selected size属性显示多少个多选属性：multiple

select optgroup，对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双鱼座</title>
</head>
<body>
    <select name="city" size="3" multiple="multiple">
        <option value="1">北京</option>
        <option value="2" selected="selected">河北</option>
        <option value="3">黑龙江</option>
        <option value="4">湖北</option>
    </select>
    <select>
        <optgroup label="黑龙江">
            <option>牡丹江</option>
            <option>哈尔冰</option>
        </optgroup>
        <optgroup label="湖北">
            <option>武汉</option>
            <option>荆州</option>
        </optgroup>
    </select>
</body>
</html>

a，超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射去掉a标签的下划线通过属性text-decoration:none

ul，列表 ul li · 形式的列表；列表 ol li 数字形式的列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双鱼座</title>
</head>
<body>
    <!--超链接标签-->
    <a href="http://www.baidu.com">百度一下</a>
    <a href="#kk">跳转</a>
    <div id="kk">ddddddddddddddddddddddddd</div>  <!--锚点-->
    <ul>
        <li>武汉</li>
        <li>荆州</li>
    </ul>
    <ol>
        <li>北京</li>
        <li>河北</li>
    </ol>
    <dl>
        <dt>湖北</dt>
        <dd>武汉</dd>
        <dd>荆州</dd>
    </dl>
</body>
</html>

table，table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双鱼座</title>
</head>
<body>
    <table border="1">
        <thead>
        <!--行-->
        <tr>
            <!--表头当中的列-->
            <th>id</th>
            <th>请求方式</th>
            <th>参数</th>
            <th>接口</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody>
        <!--行-->
        <tr>
            <!--表体当中的列-->
            <td>1</td>
            <td rowspan="4">post</td>
            <td>{'name':'dsx'}</td>
            <td>/login</td>
            <td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
            <td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>{'name':'dsx'}</td>
            <td>/login</td>
            <td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
            <td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>{'name':'dsx'}</td>
            <td>/login</td>
            <td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
            <td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>{'name':'dsx'}</td>
            <td>/login</td>
            <td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
            <td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

img，img 图片标签 src：图片的位置图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双鱼座</title>
</head>
<body>
    <a href="http://www.baidu.com"><img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="图片加载失败时显示的文字" title="鼠标悬浮时显示的文字"></a> 
</body>
</html>

html基础之html标签

猜你喜欢