2021-9-21

最新推荐文章于 2024-08-24 19:49:19 发布

添福宝615

最新推荐文章于 2024-08-24 19:49:19 发布

阅读量76

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_61923897/article/details/120453937

版权

一、语义化标签

1、没有语义的布局标签——div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行显示多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 没有语义的布局标签 -->
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
</body>
</html>

2、有语义的布局标签

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：（独占一行）

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

[注：以上标签显示特点和div一致，但是比div多了不同的语义]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有语义的布局标签 -->
    <header>网页的头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
</body>
</html>

3、字符实体

HTML的空格合并现象

场景：如果在HTML代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文;

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--HTML空格合并现象  -->
    四叶草：爱你们哟~ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TFBOYS：想你们了啦~<br><br>

    p标签长这个样子：&lt;p&gt;&lt;/p&gt;

</body>
</html>

4、综合案例一：优秀学生信息表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width, initial-scale=">
    <title>Document</title>
</head>
<body>
    <table border="1" width="400" height="400">
        <!--表格整体的大标题  -->
        <caption><h3>优秀学生信息表格</h3></caption>
        <!-- 表格的头部 -->
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
       <!--表格的主体  -->
        <tbody>
            <tr>
                <!-- 保留 -->
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
    
            </tr>
            <tr>    
                     删除   <!--  -->
                <!-- <td>高三</td> -->
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
    
            </tr>
        </tbody>
       <!-- 表格的底部 -->
       <tfoot>
        <tr>
            <td>评语</td>
            <!-- 保留 -->
            <td colspan="3">你们都很优秀</td>
            <!-- 删除 -->
            <!-- <td>你们都很优秀</td>
            <td>你们都很优秀</td> -->

        </tr>
       </tfoot>
       
    </table>
</body>
</html>

5、综合案列二：会员注册表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>橙海不会暗，我啵不会散</h1>
    <hr>
    <form >
        昵称：<input type="text" placeholder="请输入昵称"><br><br>

        性别：<input type="radio" name="gerder">男
            <input type="radio"name="gerder">女<br><br>

        生日：<input type="date">    <br><br>

        城市：<select>
                <option >上海</option>
                <option >北京</option>
                <option >深圳</option>
                <option >重庆</option>
            </select><br><br>

        婚姻状况：<input type="radio" name="marry" checked>未婚
                <input type="radio" name="marry">已婚
                <input type="radio"name="marry">保密<br><br> 
                
        兴趣爱好：<input type="checkbox" checked>TFBOYS  
                <input type="checkbox">王俊凯       
                <input type="checkbox">王源
                <input type="checkbox">易烊千玺  <br><br>

        个人介绍：<br><br>
                <textarea cols="50" rows="10">

                </textarea> 
                <h2>我承诺</h2>  
                <ul>
                    <li>十年之约，不离不弃</li>
                    <li>从开始到未来之只为王俊凯</li>
                    <li>农夫山泉有点甜，不爱王源有点悬</li>
                    <li>一心一意，易烊千玺</li>
                </ul>  
            <input type="checkbox">我同意所有款项 <br><br> 
            <input type="submit" value="免费注册">
            <input type="reset">
    </form>
</body>
</html>

添福宝615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-9-21

一、语义化标签1、没有语义的布局标签——div和span场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签div标签：一行只显示一个（独占一行）span标签：一行显示多个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
复制链接

扫一扫