20190206H5知识整理

LuLlAbY Issing

于 2019-02-09 17:20:23 发布

阅读量380

点赞数

分类专栏： html&css笔记

本文链接：https://blog.csdn.net/weixin_43907317/article/details/86792614

版权

html&css笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

H5&CSS3 知识整理笔记（二）

基本html结构

基本html结构

编写网页

网页开头编写

略，vscode可以在空白文件中先输入一个！，再按tab键，可以自动生成网页的基本成分

创建页面标题

title元素（有结束标签），必须位于head部分，并将它放置在指定字符编码的meta元素后面：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

在大多数浏览器中，页面标题既显示在标题栏，也显示在标签页上，Chrome只在标签页上显示页面标题。
每个页面的title都是唯一的，页面标题也会被各大搜索引擎采用。
注意！不要与title属性混淆！

分级标题

html提供了六级标题用于创建页面的信息层关系，何用h1~h6元素对各级标题进行标记，h1是最高级别的标题，h2是h1的子标题，以此类推。

页眉

header元素，有结束标签
如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。
一个页面可以有任意数量的header
通常，页眉包括网站标志，主导航和其他全站链接
header很适合对页面深处的一组介绍性或导航性内容进行标记

标机导航

nav元素，有结束标签
定义导航链接部分，nav中的链接可以指向页面中的内容，也可以指向其他页面或资源

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

注意：H5不允许nav嵌套在address元素中

标记页面的主要区域

main元素，有结束标签。
规定文档的主要内容
元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
main元素包围着代表页面主题的内容

文章

article元素，有结束标签
article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可以独立分配或可再用的，就像聚合内容中的各部分。
可以是一篇论坛帖子、报纸文章blabla

区块

section元素，有结束标签
定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

附注栏

aside元素，有结束标签
定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
可用作文章的侧栏

页脚

footer元素，有结束标签
定义文档或节的页脚
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
可以在一个文档中使用多个 footer元素。
foooter元素代表嵌套它的最近的article、aside、blockquote等等元素的页脚，只有当它最近的祖先是body时，它才是整个页面的页脚。

通用容器

div元素，有结束标签
与section不同，div没有任何语义
定义文档中的分区或节（division/section）
以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
其包含的内容从新一行开始，这也是div固有的唯一格式表现

为元素指定类别或ID名称

可以为HTML元素分配唯一的标识符——id，或指定其属于某个（或某几个）类别。
使用JavaScript获取id和class属性，从而对元素添加特定的行为

添加唯一ID

在元素开始标签中输入id=“name”，其中name是唯一标识该标签的名称，可以是任何字符，只要不包含空格，不以数字开头即可。

指定类别

在元素的开始标签中输入class=“name”，其中name是类别的名称，如果指定多个类别，用空格分开即可，如：class=“name1 name2”

为元素添加title属性

注意和区分title元素和title属性！！！
title属性可以达到一种提示标签的效果，可以为任何元素添加title，但最常用的还是链接。当访问者将鼠标指向了添加说明标签的元素时，就会显示title属性 （例如，把鼠标移到左上角的csdn图标上，就会出现一个标签一样的文本框，那就是设置的title属性）
添加title元素：