每天浪漫主义
【TOS2021】光遇/Meet light
在 HTML5 中推出了很多语义化的标签,所谓语义化就是标签能够对内容有所表达,比如 p 标签就是段落 paragraph 的意思。其实如果只是实现页面的效果,只使用 div 和 span 就可以做到。但是语义化的好处就是对开发者比较友好,文档的结构清晰,各部分功能一目了然,便于开发和维护。同时语义化的文档也能够对 SEO 起到更好的效果。
语义化标签的优势:
提示:在实际网页开发时会大量频繁的使用div和span这两个没有语义的布局标签
span标签是超文本标记语言(HTML)的行内标签, 用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。 然后我们加入css样式后 定义页面的导航链接部分区域,不是所有的链接都需要包含在 定义页面独立的内容,它可以有自己的header、footer、sections等,专注于单个主题的博客文章,报纸文章或网页文章。article可以嵌套article,只要里面的article与外面的是部分与整体的关系。 元素用于标记文档的各个部分,例如长表单文章的章节或主要部分。 HTML 定义与主要内容相关的内容块。通常显示为侧边栏。 元素定义文档的底部区域,通常包含文档的作者,著作权信息,链接的使用条款,联系信息等 在 HTML 中,某些字符是预留的。 对于这篇学习笔记就暂时到这了,兄弟们加油❤️ 如果又出错的,请各位友友指正。 新人报到,各位友友们,给我个三联(点赞,关注,收藏)提示:
作为一个 “容器”,
我们称之为没有语义的布局表签
然而,其可以将内容分组,从而可以使用class或是id属性方便的定义内容的格式。
<body>
<div>div>
body>
span
被用来组合文档中的行内元素。
span没有固定的格式表现。当对它应用样式时,它会产生视觉上的变化。<span>span>
有语义的布局标签
HTML5提供了新的语义元素来定义网页的不同部分,它们被称为“切片元素”。
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>Documenttitle>
head>
<body>
<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">平板电脑a>li>
<li class="crumb"><a href="#">ipad a>li>
<li class="crumb">iPad proli>
ol>
nav>
<h1>iPad proh1>
<p>新生代 M1 动力、震撼的 XDR 显示屏、超快 5G 速度,已为终极 iPad 体验加载就绪。开飙倒计时,开始。p>
body>
html>
nav {
border-bottom: 1px solid black;
}
.crumbs ol {
list-style-type: none;
padding-left: 0;
}
.crumb {
display: inline-block;
}
.crumb a::after {
display: inline-block;
color: #000;
content: '>';
font-size: 80%;
font-weight: bold;
padding: 0 3px;
}
<article>
article>
<h1>你好h1>
<section>
<h2>介绍一下我自己h2>
<p>我是极具浪漫主义色彩的菜鸟程序员.p>
section>
<aside>
<p>通常表现为侧边栏或者标注框p>
aside>
字符实体
HTML 中的预留字符必须被替换为字符实体。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。而不能够被显示出来,这是我们就需要使用它的实体名称。
从现在做起,坚持下去,一天进步一小点,不久的将来,你会感谢曾经努力的你!