;meta name='keywords' content='HTML CSS java script'><!--网站关键字-->
4 <meta name='author' content='ren'><!--网站作者-->
5 <meta name="description" content="What is this website about?" /><!--网站描述-->
6 </head>
3,HTML实体
在HTML中,许多字符是预留的,比如大于>和小于<,浏览器将把它当做标签的一部分,而不是要向用户展示的字符。
所以,如果我们要向用户展示这两个符号,我们应该这样:<(小于)>(大于)。“&”开头,“;”结尾,中间是英文字母。
由于HTML把空字符完全解读为英文单词分隔符,所以无论我们在编译器中输入多少空格或回车来隔开两个字符,它在浏览器最终只会呈现出一个空格。
1 <p>h e l l o</p>
2
3 <!--终端呈现永远是:h e l l o-->
所以要想在页面呈现伛个空格,请使用HTML实体:
1 <p>h e l l o<p>
2
3 <!--最终呈现:h e l l o-->
更多HTML实体请参考:https://www.w3school.com.cn/tags/html_ref_entities.html
三 HTML语义化
语义化的含义就是用合理的、正确的标签来展示HTML结构和内容。语义化的优点如下:
易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,如盲人阅读器根据语义渲染网页
HTML提供了很多语义标签,用于呈现网页不同类型的内容(一下是H5新增的)。
标签 |
描述 |
<article> |
定义文章。 |
<aside> |
定义页面内容以外的内容。 |
<details> |
定义用户能够查看或隐藏的额外细节。 |
<figcaption> |
定义 <figure> 元素的标题。 |
<figure> |
规定自包含内容,比如图示、图表、照片、代码清单等。 |
<footer> |
定义文档或节的页脚。 |
<header> |
规定文档或节的页眉。 |
<main> |
规定文档的主内容。 |
<mark> |
定义重要的或强调的文本。 |
<nav> |
定义导航链接。 |
<section> |
定义文档中的节。 |
<summary> |
定义 <details> 元素的可见标题。 |
<time> |
定义日期/时间。 |
有了这些语义元素,我们就可以简洁方便的呈现出结构化的内容。既利于用户阅读,也利于我们后期维护。
1,结构
我们在编写一份HTML文档时,它(body标签内)的结构应该大致如下。
2,内容
不同的内容应该使用不同的标签。不能和以前一样,大量使用div和span替代。
比如,文章标题应该是用h1--h6,而不能用<span>或<p>标签,再简单的把文字加粗和放大;表示强调的词语或句子应该使用<em>,而不是用<span>,再对他使用斜体字样式。
关于常用的HTML知识,相对来说比较简单也比较少,对这部分知识,大家可以在W3School上花一个星期左右时间学习和练习。
|