meta标签、语义化标签、块级行级元素

最新推荐文章于 2022-02-12 23:33:25 发布

守住⒈份信仰°

最新推荐文章于 2022-02-12 23:33:25 发布

阅读量363

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_43648337/article/details/108301171

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

meta标签

meta标签主要用来设置网页中的一些元数据，元数据不是给用户看的，是给搜索引擎看的。
常用以下三种属性：
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
常见数据有：
keywords 网站的关键字
description 网站的描述

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">

    <!--
        keywords表示网页的关键字，
        可以同时指定多个关键字，关键字间用逗号隔开
    -->
    <meta name="keywords" content="HTML5,CSS,前端">
    <!--
        description用于指定网站的描述，网站的描述会显示在搜索引擎的结果中
    -->
    <meta name="description" content="这是一个非常不错的网站">
    <!--
        http-equiv用于将页面重定向到另一个网站（3秒后跳转到百度）
    -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

语义化标签

HTML专门负责网页的结构，所以在使用html时应该关注标签的语义，而不是样式（样式可以靠CSS改变）
标题标签：
h1~h6六级标题，重要性依次递减
h1标签的重要性仅次于title标签，一般一个页面中只有一个h1标题
一般情况下标题标签只会使用h1~ h3，h4~h6很少用
hgroup标签内可以放多个相关联的标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <hgroup>
        <h1>将进酒</h1>
        <h2>李白</h2>               
    </hgroup>
</body>
</html>

html5的标签中，哪些是行内元素，哪些是块级元素。

块级元素：块级大多为结构性标记，一般通过块级元素来进行布局（block element）
< address>…< /adderss>
< center>…< /center> 地址文字
< h1>< /h1> 标题一级
< h2>…< /h2> 标题二级
< h3>…< /h3> 标题三级
< h4>…< /h4> 标题四级
< h5>…< /h5> 标题五级
< h6>…< /h6> 标题六级
< hr> 水平分割线
< p>…< /p> 段落
< pre>…< /pre> 预格式化
< blockquote>…< /blockquote> 表示引用（长引用），换行且段落缩进
< marquee>…< /marquee> 滚动文本
< ul>…< /ul> 无序列表
< ol>…< /ol> 有序列表
< dl>…< /dl> 定义列表
< table>…< /table> 表格
< form>…< /form> 表单
< div>…< /div>
行内元素：行内大多为描述性标记，用来包裹内容（inline element）
< em>< /em>表示语音语调的加重
< strong>< /strong>表示强调，重要内容
< span>…< /span>
< a>… < /a> 链接
< br> 换行
< b>…< /b> 加粗
< strong>…< /strong> 加粗
< img > 图片
< sup>…< /sup> 上标
< sub>…< /sub> 下标
< i>…< /i> 斜体
< em>…< /em> 斜体
< del>…< /del> 删除线
< u>…< /u> 下划线
< input>…< /input> 文本框
< textarea>…< /textarea> 多行文本
< select>…< /select> 下拉列表
< q>< /q>短引用，不换行
块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素（p元素例外）
5.都有align属性
6.dispay都是block
7.p元素不能嵌套其他块元素
行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
5.没有align属性
6.display都是inline

浏览器有自动修正功能

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正；比如：
1、标签写在了根元素外部
2、p元素内嵌套了其他块元素
3、根元素内出现了除head和body外的子元素
在进行网页编码时，应严格按照规范书写，修正会导致一些和预期不符的情况发生。

守住⒈份信仰°

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
meta标签、语义化标签、块级行级元素

meta标签主要用来设置网页中的一些元数据，元数据不是给用户看的，是给搜索引擎看的。常用以下三种属性：charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容常见数据有：keywords 网站的关键字description 网站的描述<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <!-- ..
复制链接

扫一扫