html常用标签总结--文档

html结构

<!DOCTYPE html> 文档声明，不是HTML标签必须放首行
<html> 网页的根元素
    <head> 放网页的头部信息
        <meta charset="utf-8"> 设置网页的编码方式
        <title></title> 网页标题
        <link href="css文件的路径" rel="stylesheet" type="text/css"> 引入css样式
    </head>
    <body> 网页主体内容，用户浏览器看到内容
    </body>
</html>

 

常用块级标签


1、标题标签

h1~h6(h标签是双标签)
大小依次减小，重要程度依次减弱
特点：默认宽度100%、高度自适应，独立成行，自带间距加粗效果
注意：<h1></h1>在一个页面中只能使用一次，其他h标签可以使用多次

2、段落标签

 <p></p>
    特点：默认宽度100%、高度自适应，独立成行，自带间距

3、div标签

<div>
    我是一个块级标签，无语义
</div>
特点：默认宽度100%、高度自适应，独立成行

4、列表标签

    1）ul无序列表
        <ul>
            <li>默认排在一列显示，独占一行、自带间距</li>
            <li>每一行前面默认有自带列表符</li>
        </ul>
    2）ol有序列表
        <ol>
            <li>默认排在一列显示，独占一行</li>
            <li>每一行前面序号依次增大</li>
        </ol>
    3）dl自定义列表
        <dl>
            <dt>定义列表标题</dt>
            <dd>描述内容前面自带缩进</dd>
        </dl>

常用行级标签


    1、<span></span>标签

特点：万能标签，用于区分样式

    2、<b></b>标签

是无语义标签，只用来呈现文字的加粗效果

    3、<strong></strong>标签

有语义标签，起加强文本语义，在文本中呈现加粗效果

    4、<i></i>标签

无语义标签，只用来呈现文字倾斜效果

    5、<em></em>标签

有语义标签，起强调文本语义，在文本中呈现倾斜效果

    6、<a href=””></a>标签

特点：超链接，默认宽度高度自适应、文本颜色蓝色、包含内容添加下划线

    7、sub、sup 双标签

特点：用于定义下标、上标

    8、<del></del>标签

删除线效果，默认宽度高度自适应、横向排列

常用行块级标签


    1、<img src=””>图片标签

默认宽度高度由内容撑开，水平布局，可设置宽高

 2、<input type=””>标签

        type取值：text、password等 文本输入框
                 button、submit、reset等 按钮
                 radio 单选按钮
                 checkbox 复选框
        特点：可设置宽高、水平布局


其他标签


    1、<br>标签

特点：强制换行

    2、<hr>标签

特点：水平分割线，自带间距边框效果

    3、表格标签

    <table border="1">
        <caption>表格标题</caption>
        <tr><!--行-->
            <th>表头单元格，默认文字加粗水平、垂直居中</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表格单元格，默认水平居左，垂直居中</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <th>表头单元格</th>
            <td>表格单元格</td>
        </tr>
    </table>

4、form表单

        <form action="#" method="post">
            用来声明表单，定义数据采集范围，一个页面可以有多个表单，但是不能相互嵌套使用
        action 表单数据提交到何处
        method post|get 规定表单数据的提交方式
        </form>


5、select下拉列表

        <select>
                <option value=""></option>
                <option value=""></option>
        </select>
        用于form表单中，提供下拉选项

6、textarea多行文本域

    <textarea cols="1" rows="3"></textarea>
    cols属性：cols="1"表示宽度，一行最多可以输入一个汉字，两个字符
    rows属性：表示行数

7、lable标签

        显示方式：
        <input type="checkbox" id="eat"> 
        <label for="eat">吃饭</label>
        隐式方式：
        <label><input type="checkbox">吃饭</label>
        扩大点击范围，提高用户体验度

 

posted @ 2020-02-15 15:29  JackieDYH  阅读(3)  评论(0)  编辑  收藏  举报  来源