html5基础知识点整理后续持续更新

来源：互联网发布：linux后台运行命令编辑：程序博客网时间：2024/05/18 00:51

第一章HTML5

1.2 HTML5基础

1 HTML5文档基本格式

1、<!doctype>标记 2、<html>标记 3、<head>标记 4、<body>标记

2 HTML5语法

1、标签不区分大小 2、允许属性值不使用引号 3、允许部分属性值的属性省略

3 HTML标记

1、单标记和双标记

a、双标记

<标记名> 内容 </标记名>

b、单标记

<标记名/>

2、注释标记

4 标记的属性

<标记名属性1=”属性值1” 属性2=”属性值2”> 内容 </标记名>

5 HTML5文本头部标记

1、设置页面头部标记<title>

2、定义页面元信息标记<meta/>

a、<meta name=”名称” content=”值”/>

b、<meta http-equiv=”名称” content=”值”/>

3、引用外部文件标记<link>

3、内嵌样式标记<style>

1.3 文本控制标记

1 标题和段落标记

1、标题标记 (<h1>、<h2>、<h3>、<h4>、<h5>、<h6>)

2、段落文本 (<p>)

3、水平线标记 (<hr/>)

4、水平线常用属性

align：对齐方式、size：水平线粗细、color：水平线颜色、width：水平线宽度

5、换行标记 (<br/>)

相当于一个回车

2 文本格式化标记

特殊字符标记：&nbsp；（空格符）……

1.4 图片标记

1 常用的图片格式

GIF格式（动态无损图像格式）、PNG格式（半透明格式）、JPG格式（有损压缩图片）

2 图片标记<img/>

1、<img src=”图片路径URL”>

2、alt：图片替换文本属性

3、title：设置提示文字

4、width、height：设置图片的宽高属性

5、border：图片的边框属性

6、vspace、hspace：图片的垂直边距和水平边距

7、align：图片的对齐属性

3 绝对路径与相对路径

1.5 超链接标记

1 创建超链接

<a href=”跳转目标” target=”目标窗口的弹出方式”> 文本或图片 </a>

1) href：用于指链接目标的url地址，当<a>标记应用href属性时，它就具有了超链接的功能。

2) target：_self为默认值，意为在原有窗口打开；_blank为在新窗口打开。

2 锚点链接

首先使用“<a href=”#id名”>链接文本</a>”创建链接文本，其中href=”#id名”用于指定链接目标的id名称然后，使用相应的id名称标注跳转目标的位置。

1) 使用“<a href=”#id名”>链接文本</a>”创建链接文本

2) 使用相应的id名称标注跳转目标的位置

第二章 HTML5页面元素及属性

1 列表元素

1、ul元素：无序列表

<ul>

</ul>

2、ol元素：有序列表

<ol>

</ol>

更改列表的起始值：<: <ol start=”2” >

反向排序: <ol start=”2” reversed>

3、dl元素：术语或名词的解释

<dl>

……

……

</dl>

2 结构元素

1、header元素：具有引导和导航作用的元素（该元素通常用来放置整个页面或者页面内的一个内容区块的标题、网站logo、搜索列表等等）

……

</header>

2、nav元素：定义导航链接（用于传统的导航条、侧面栏导航、页面导航<本页面几个主要的组成部分之间进行跳转>、翻页导航）

<nav>

<ul>

</ul>

3、article元素：文档、页面或者应用程序中与上下文不相关的独立部分（该元素常被用于定义一篇日志、一条新闻或者用户评论）

通常使用多个section元素划分

</article>

4、aside元素：定义当前页面或者文章的附属信息部分 (1 被包含在article元素内作为主要内容的附属信息 2 在article外，作为页面或站点全局的附属信息部分，最常见的形式是侧面栏，其中内容可是友情链接、广告单元等 )

<section<h2>>内容3</h2></section>

<aside>其他相关内容</aside>

</article>

5、section元素：网站或者应用程序中页面的内容划分，一个section通常由内容和标题组成 (不是页面容器没有标题不要使用section元素一般不使用)

6、 footer元素：定义一个页面或者区域的底部

文章内容

文章分页列表

</footer>

页面底部

</footer>

</article>

3 分组元素

1、figure元素和figcaption元素 (figure元素应该与主内容有关，但如果被删除，野不会对文档产生影响 figcaption元素用于为figure元素添加标题，一个figure元素最多有一个figcaption元素放在figure元素的第一个或者最后一个子元素)

2、hgroup元素：用于将多个标题组成一个标题组，通常与h1~h6元素组合使用。

4 页面交互元素

1、details元素和summary元素： details元素用于描述文档或文档某个的细节。summary元素作为details元素的第一个子元素，用于为details定义标题。

2、progress元素：用于表示一个任务的完成进度

（values：已经完成的工作量 max：总共有多少工作量）

3、meter元素：表示指定范围内的数值

属性

说明

high

度量的值位于哪个点被界定为高的值

low

度量的值位于哪个点被界定为低的值

max

定义最大值，默认1

min

定义最小值，默认0

optimum

定义什么样的度量值是最佳值。高high越高越好，低于low越低越好。

value

定义度量的值

5 文本层次语义元素

1、time元素：定义时间或者日期，可以代表24小时中的某一时间

（属性: datetime：定义相应的时间或者日期。取具体时间或者具体日期 pubdate：用于定义time元素中的日期/时间是文档的发布日期，一般去”pubdate”）

2、mark元素：主要功能是在文本中高亮显示某些字符

3、cite元素：创建一个引用，用于对文档参考文献的引用说明，倾斜显示。

6 全局属性

1、draggable元素：用来定义元素是否可以拖到(true，false)必需配合JavaScript使用。

2、hidden元素：元素是否被隐藏（true，false）

3、spellcheck元素：主要针对Input元素和textarea文本框使用，对用户输入的文本内容进行拼写和语法检查（true，false）

4、contenteditable属性：规定是否可编辑元素的内容，前提是该元素可以获得鼠标焦点且内容不只是可读（true，false）

阅读全文

0 0

html5基础知识点整理 后续持续更新

第一章HTML5

1.2 HTML5基础

1.3 文本控制标记

1.4 图片标记

1.5 超链接标记

第二章 HTML5页面元素及属性

html5基础知识点整理后续持续更新