HTML5和HTML语义化 | 青训营笔记

123 阅读2分钟

这是我参加第五届青训营伴学笔记创作活动的1天

本堂课重点内容

一、什么是HTML

微信图片_20230115193651.jpg HTML是超文本标记语言,超文本包括图片,链接、音乐、视频等,HTML中有很多标签,它可以用来构成网页的结构。

二、一些HTML标签

1.输入

用户从多个选项中选则标签。

List  可以对option内容提示


     <datalist *id*="countries">

        <option >11</option>

        <option >22</option>

        <option >33</option>

     </datalist>

2.引用标签


    <blockquote *cite*="">

        <p>

          那些杀不死我的,只会让我变得更强。

        </p>

    </blockquote>
cite 是短引用
code 是代码引用 可以把代码片段放到code标签中

        *<!-- code* *是代码引用多行代码外面加一个* *pre -->*

        <code>

            var a; var b;

            var c=a+b;

        </code>

    </pre>

Strong标签 突出语气严重

em标签  突出一段话里面需要重(zhong)读的词

3.页面内容划分

头部header(logo nav)

主体main( article  )    aside 和主体无关的内容

footer页面尾部标签

4.HTML语义化是什么?

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。

HTML中的元素、属性、及属性值都拥有某些含义

开发者遵循HTML语义来编写HTML

~有序列表用ol;无序列表用ul

Lang 表示内容所使用的语言

语义化的好处:

1.代码可读性

2.可维护性

3.搜索引擎优化

4.提升无障碍性

              HTML是传达内容,而不是传达样式

如何做到语义化?

了解每个标签的属性和含义

思考什么标签最合适描述这个内容

不使用可视化工具生成代码

5.常用的HTML语义化标签


<header></header>  头部

 

<nav></nav>  导航栏

 

<section></section>  区块(有语义化的div)

 

<main></main>  主要区域

 

<article></article>  主要内容

 

<aside></aside>  侧边栏

 

<footer></footer>  底部

6.扩展知识

href和src的区别

src是对资源的引用,它指向的内容会嵌入到当前标签下面 比如js,css外部文件

Href是超文本引用,它指向一些网络资源。