JiuDe

HTML基本结构
1.开始编写网页<!DOCTYPE html> <html> <head> &...
扫描右侧二维码阅读全文
12
2019/07

HTML基本结构

1.开始编写网页

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
</body>
</html>

每个HTML文档都应该包含以上基本成分,这是每个HTML页面的基础。这个结构是非常重要的,在前期我们将编写简单的HTML程序。


2.创建页面标题
<title>……</title>中间是网页标题,显示在浏览器头部的文字描述。title元素只能位于<head>……</head>中,且放在meta元素后面而且每个网页只能包含一个title元素。
title元素在浏览器中的显示:
title标签解读展示图

title元素在搜索引擎中起到的作用:
title元素在搜索引擎中起到的作用展示图

这份HTML就相当于一张白纸,因为body里面没有任何内容,现在我们来给它加点料。


3.创建分级标题
在HTML的boyd部分,输入<hn>,其中的n是1-6的数字,此处数字主要却决于要创建标题的级别。h1是最重要的标题,而h6是最不重要的标题。
在默认情况下(不添加css样式)h1的字号比h2的大,而h2又比h3的大,以此类推。每个标题之间的间隔也是由浏览器默认的css创造的,它们并不认为HTML文档中有空行。
要注意的是在实际使用中不可以把h标签当作控制文字大小的工具,更不能越级使用h标签,只能从h1到h2到h3……
在<hn>……</hn>中输入你要的标题


4.普通页面构成
①带导航的页头
②显示在主体内容区域的文章
③显示次要信息的附注栏以及页脚


5.创建页眉
一个页面可以有任意数量的header元素,它们的含义可以根据其上下文而有所不同。例如,处于页面顶端或接近这个位置的header可能代表整个页面的页眉。通常,页眉报考网站标志、主导航和其他全站链接,甚至搜索框。

<body>
<hrader role="banner">*注释:使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,而banner表示的是这个区域是导航栏*
<nav>*注释:nav元素一般用来做导航栏,链接到本页面的某个位置或者是其他页面*
<ul>*标签定义无序列表*
<li><a href="#">JiuDe NO.1</a></li>
<li><a href="#">JiuDe NO.2</a></li>
<li><a href="#">JiuDe NO.3</a></li>
</ul>
</nav>
</header>
</body>

效果演示:

注意的是,我们在编写时可以多次用到header元素
例如:

<body>
<header role="banner">
 ……[网站标识、导航等]……
</header>
<article>
<header>
这里的header元素是父元素article的而且只有第一个header元素有role="banner"
因为他是页面级页眉
</header>
</article>
</body>

6.标记导航


看完上面的演示代码我相信你也对这个标签有了一定的体会,没错它就相当于一个指向标,可以让页面迅速跳转到你要指向的任何一个ID,也可以指向其他页面或者志愿,或者连这个和兼而有之。无论是那种情况,应该仅对文档中重要的链接群使用nav,一般用作页面的导航栏。


7.标记网页的主要区域
role="main"帮助屏幕阅读设备定位页面的主要区域,如果使用<main role="main"></main>语法时,中间应包换页面所以重要功能。大多数的网页都有一些不同的区块,如页眉、页脚、包含额外信息的附注栏、指向其它网站链接,等等。不过,一个页面中只有一个部分代表其主要内容。可以讲这样的内容包容在main元素中,该元素在一个页面中仅供使用一次。同p、header、article、footer等元素一样,main元素的内容显示在新的一行,除此之外不会影响页面的任何内容。
注意的是,不能将main放置在article、aside、footer、header和nav元素中。


8.创建文章
使用的元素 <article></article>
HTML5 对该元素的定义如下:

article元素表示文档、页面、应用或网站中一个独立的容器,原则上是可独立分配或可再用的,就像聚合內容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具,或者任何其他独立的内容项。

创建文章的步骤
①输入<article>
②输入文章内容。内容可以包含任意数量的的元素。元素类型包括段落、列表、音频、视频、图像、图像等。
③输入</article>
TIP:可以将article嵌套在另外一个article中,只要里面的article与外面的article是整体与部分的关系。


9.定义区块
使用的元素 <section></section>
section元素代表文档或应用的一个一般的区块。在这里,section是具有相似主题的一组内容,通常含有一个标题。
section的例子中包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
注意:不要将section与div混淆,div是没有任何语义的元素,而section标记的是页面中特定区域。


10.指定附注栏
使用元素 <aside></aside>
在页面中,有一些信息与主体内容关联没那么强,但可以独立存在,使用aside的例子还存在包括重要论述、侧栏、指向相关文章的一组链接、广告、nav元素组、相关产品列表,等等。


11.创建页脚
页面级页脚展示

<footer>
<p>
<small>&copy;Copyright ALL About JiuDe</small>
</p>
</footer>

©Copyright ALL About JiuDe

元素页脚展示

<article>
<footer>
<p>
…………
</p>
</footer>
</article>

12.创建通用容器

<div>请自己领悟</div>


13.使用ARIA改善可访问性

今后补充


14.为元素指定类别或ID名称
类别就是class,相当于一个班里面包含多个个体
而ID是独一无二的,在一个页面中ID不能重复


15.为元素添加title属性
title属性就像是为元素添加上标题,话不多说,我们来试试!

<a href="#a" title="a元素的title属性 ">当鼠标指向这里时,会显示a元素的title属性</a>
<img src="https://jiude.life/usr/uploads/2019/07/1051085830.png" title="img元素的title属性 ">
当鼠标指向这里时,会显示a元素的title属性

注意的是在img元素中当同时存在alt属性和title属性时会优先展现title属性内容


16.添加注释

<!--在这里添加你要注释的内容-->

END!


最后修改:2019 年 07 月 13 日 07 : 37 PM
如果觉得我的文章对你有帮助,请给我来杯珍珠奶茶。

发表评论