P4-前端基础-语义化标签

1.概述

在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

2.语义化标签介绍

2.1.标题段落

<!DOCTYPE HTML5>
<html><head><meta charset="UTF-8"><title>语义化标签</title>
</head><body><!-- 在网页中HTML专门用来负责网页的结构所以在使用html标签时，应该关注的是标签的语义，而不是它的样式标题标签：h1 ~ h6 一共有六级标题从h1~h6重要性递减，h1最重要，h6最不重要h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1一般情况下标题标签只会使用到h1~h3，h4~h6很少用标题标签都是块元素在页面中独占一行的元素称为块元素（block element）--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup--><hgroup><h3>回乡偶书二首</h1><h4>其一</h2></hgroup><!-- p标签表示页面中的一个段落p也是一个块元素--><p>少小离家老大回</p><p>乡音无改鬓毛衰</p><p>儿童相见不相识</p><p>笑问客从何处来</p>孔子曰：<!-- blockquote 表示一个长引用 --><blockquote>学而时习之，不亦说乎</blockquote><!-- q表示一个短引用-->子曰<q>学而时习之，乐呵乐呵！</q><!-- br标签表示页面中的换行--><br><br>语义化标签换行</body></html>

2.2.块元素和行内元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>语义化标签</title></head><body><!-- 块元素（block element）- 在网页中一般通过块元素来对页面进行布局行内元素（inline element）- 行内元素主要用来包裹文字- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素- 块元素中基本上什么都能放- p元素中不能放任何的块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如：标签写在了根元素的外部p元素中嵌套了块元素根元素中出现了除head和body以外的子元素... ...--><p><h1>在块标签中嵌套块标签</h1></p></body>
</html>

2.3.布局标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>语义化标签</title></head><body><!-- 布局标签（结构化语义标签）--><!-- header 表示网页的头部main 表示网页的主体部分(一个页面中只会有一个main)footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章section 表示一个独立的区块，上边的标签都不能表示时使用sectiondiv 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素span 行内元素，没有任何的语义，一般用于在网页中选中文字--><header>网页头部</header><main>网页主体，一个网页只会有一个main</main><footer>网页底部</footer><nav>网页导航</nav><aside>和主体相关的其他内容（侧边栏）</aside><article>表示一个独立的文章</article><section>表示一个独立的区块</section><div>没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素</div><span>行内元素，没有任何的语义，一般用于在网页中选中文字</span></body>
</html>

P4-前端基础-语义化标签相关推荐

【前端】语义化标签详解
1 语义,语义化,HTML HTML描述的是网页内容的含义,即,语义. 语义化HTML,就是用最恰当的HTML元素,标记内容. 语义化标签,也即,有含义的标签. 2 意义提升可访问性和互操作性(内容 ...
独占一行 html_HTML基础-语义化标签
1.语义化标签:在网页中HTML专门用来负责网页结果 ,故在使用html标签时,应该关注的是标签的语义,而不是它的样式 2.标题标签:h1~h6 一共有六级标题从h1~h6重要性递减,h1最重要,h ...
web开发—— 前端基础（6） ——语义化标签
在网页中HTML专门用来负责网页的结构,在使用html标签时,应该关注标签的语法,而不是它的样式! 首先:标题标签有6级,h1~h6,h1时一级标题,h6是6级标题,h1最重要,h6最不重要. 一般情 ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
前端--实体，meta，语义化标签1
实体 <body><!-- 在网页中编写的多个空格会自动被浏览器解析为一个空格在HTML中,有些时候不能直接书写一些特殊符号,比如连续的空格,比如字母两侧的大于小于号如果需要需要书写 ...
HTML5语义化标签综合基础案例,HTML5语义化标签综合案例
HTML 标签声明必须是 HTML 文档的第一行,位于标签之前. 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 请始终向 HTML 文档添加 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
html标签语义化的好处,(2019)[前端]面试题[9]：HTML5语义化标签和新特性
问题知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化? 说说你了解的HTML5语义化标签,HTML5新增了那些新特性? Hello,欢迎来到我的博客,每天一道面试题,我们共同进步 ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...

P4-前端基础-语义化标签

P4-前端基础-语义化标签

1.概述

2.语义化标签介绍

2.1.标题段落

2.2.块元素和行内元素

2.3.布局标签

P4-前端基础-语义化标签相关推荐

最新文章

热门文章