一、HTML中常用标签及属性

一、HTML基础语法

　　---> 单标签、双标签、块级元素、行内元素

　　单双标签其实就是HTML文档中标签书写的格式，页面中最常见的是双标签；

　　单标签就是只有一个标签，也就是一个空元素：meta、img、hr、br

　　双标签有开始标签和结束标签

　　块级元素：独占一行，对宽高的属性值生效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽）

　　例如：div p ul h1~h6 .....

　　行内元素：对宽高属性值不生效，完全靠内容撑开宽高，可以跟其他标签存在一行

　　例如：span b strong em a img input ......

　　行内块元素：结合行内和块级元素的特点，不仅对宽高的属性值生效，还可以跟多个标签存在一行

　　例如：input img

二、HTML中常用标签 ---> 文档头部

<!DOCTYPE html>
<!-- 申明，这行以下的文档都是html文档 -->
<html lang="en">
<head>
    <!-- 设置字符集编码 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义网页头部 -->
    <title>Document</title>
    <!-- link标签引入外部文件 rel定义文档与被链接文档的关系 shortcut icon:链接图片  type规定链接文档的类型 image/x-icon 图片类型 -->
    <link rel="shortcut icon" type="image/x-icon" href="">
    <!-- link标签引入外部文件 rel定义文档与被链接文档的关系 stylesheet:层叠样式表  type规定链接文档的类型 text/css CSS样式表 -->
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    
</body>
</html>

三、HTML中常用标签 ---> 文本标签级属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 块级元素，段落标签 text-indent:段落缩进 1个em就是1个字体的长度;  -->
    <!-- font-size:字体大小设置 1px一个像素点大小;color:字体颜色;font-weight:bold 字体加粗;font-family:字体类型 -->
    <p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p>
    <!-- ************ -->
    <!-- 行内元素标签 -->
    <!-- 斜体标签1 -->
    <em></em>
    <!-- 斜体标签2 -->
    <i></i>
    <!-- 删除线标签 -->
    <del></del><span></span>
    <!-- ************ -->
    <!-- 换行标签，单标签，内部没有属性，上面的段落、行内标签可以通过br换行 -->
    <br>
    <!-- 预格式标签，保留文本中的换行或者空格 -->
    <pre></pre>
    <!-- 标题标签，h1~h6，块级元素，从大到小，h1最大 -->
    <!-- text-align:设置文本位置 left:靠左 center:居中 right:靠右 -->
    <h1 style="text-align: center;"></h1>
    <!-- background:背景颜色 height:标签高度 line-height:设置行高 -->
    <h2 style="background: pink;height: 50px;line-height: ;"></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
</body>
</html>

四、HTML中常用标签 ---> 超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 去掉a链接下划线 */
        a{text-decoration: none;}
        /* 伪属性，鼠标移上字体变红,下划线显示 */
        a:hover{color: red;text-decoration: underline;}
        div{height: 1000px;background: pink;width:400px;}
    </style>
</head>
<body>
    <!-- 链接标签 href:链接地址，"#"本页面跳转，默认自带下划线 -->
    <a href="#">我是一个链接</a>
    <!-- 图片链接 -->
    <a href=""><img src="" alt=""></a>
    <!-- 设置锚点定位  -->
    <a href="top">页面顶部</a>
    <div>

    </div>
    <a href="" id="top">回到顶部</a>
</body>
</html>

五、HTML中常用标签 ---> 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
    <style type="text/css">
        /* 清空li样式；文化素质宽高；设置边框线 */
        ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;}
        /* 设置前面样式为图片，但是无法调整图片与文字的间距 */
        ul li{list-style: url(图片地址);}
        /* 伪元素；在文字前面设置图片与文字的间距 */
        ul li::before{content: url(图片地址);margin-right: 30px;}
        /* 伪元素；在文字前面设置图片与文字的间距 */
        ul li::after{content: url(图片地址);}
    </style>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>web前端</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>西瓜
            <ul>
                <li>有籽西瓜</li>
                <li>无籽西瓜</li>
            </ul>
        </li>
        <li>苹果</li>
        <li>西柚</li>
    </ul>
</body>
</html>

六、HTML中常用标签 ---> form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单</title>
    <style type="text/css">
        /* padding内边距 */
        input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;}
        /* border: none去掉按钮自带的边框线 */
        button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;}
    </style>
</head>
<body>
    <!-- method在后端传输数据用到,传值方式get/post -->
    <!-- action传值url地址 -->
    <form method="" action="">
        <!-- type类型，输入域的类型：text文本型，password密码类型 -->
        <!-- placeholder文本框内部的提示信息 -->
        <input type="text" name="username" placeholder="请输入用户名"><br>
        <input type="password" name="pwd" placeholder="请输入用密码"><br>
        <button>登陆</button>
    </form>
</body>
</html>

七、HTML中常用标签 ---> 表格（table）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style type="text/css">
        /* 清除默认样式 */
        *{margin: 0px;padding: 0px;}
        /* border-collapse: collapse;合并多余的边框线 */
        table{border: 1px solid #ccc;border-collapse: collapse;}
        tr th{height: 200px;border: 1px solid #ccc;width: 100px;}
        tr td{height: 200px;border: 1px solid #ccc;width: 100px;}
    </style>
</head>
<body>
    <table>
        <!-- 表头定义用th -->
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
        <!-- 定义行用tr -->
        <tr>
            <!-- 定义列用td -->
            <!-- colspan="5"合并5列 -->
            <td colspan="5"></td>
        </tr>
        <tr>
            <!-- 定义列用td -->
            <!-- rowspan="2"合并两行，同时删除合并行的列 -->
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

posted @ 2020-08-27 15:54 百万弟弟阅读(1142) 评论(0) 收藏举报

刷新页面返回顶部

百万弟弟

一、HTML中常用标签及属性

公告