概述
第一章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>
<link 属性=”属性值”/>
<link rel=”stylesheet” type=”text/css” href=”外部地址”>
3、内嵌样式标记<style>
<style 属性=”属性值”> 内容 </style>
<style type=”text/css”> 内容 </style>
1.3 文本控制标记
1 标题和段落标记
1、标题标记 (<h1>、<h2>、<h3>、<h4>、<h5>、<h6>)
<h1 align=”对齐方式”>标题文本</h1>
2、段落文本 (<p>)
<p align=”对齐方式”>段落文本</p>
3、水平线标记 (<hr/>)
<hr 属性=”属性值”/>
4、水平线常用属性
align：对齐方式、size：水平线粗细、color：水平线颜色、width：水平线宽度
5、换行标记 (<br/>)
相当于一个回车
2 文本格式化标记
<strong></strong>、<em></em>、<del><del/>、<ins><ins/>
特殊字符标记： ；（空格符）……
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>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
2、ol元素：有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
更改列表的起始值：<: <ol start=”2” >
反向排序: <ol start=”2” reversed>
3、dl元素：术语或名词的解释
<dl>
<dt>名称1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
……
<dt>名称2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
……
</dl>
2 结构元素
1、header元素：具有引导和导航作用的元素 （该元素通常用来放置整个页面或者页面内的一个内容区块的标题、网站logo、搜索列表等等）
<header>
<h1>页面主题</h1>
……
</header>
2、nav元素：定义导航链接 （用于传统的导航条、侧面栏导航、页面导航<本页面几个主要的组成部分之间进行跳转>、翻页导航）
<nav>
<ul>
<li><a href=”#”>首页</li>
<li><a href=”#”>公司概括</li>
<li><a href=”#”>产品展示</li>
</ul>
3、article元素：文档、页面或者应用程序中与上下文不相关的独立部分 （该元素常被用于定义一篇日志、一条新闻或者用户评论）
通常使用多个section元素划分
<article>
<header><h1>文章标题1</h1></header>
<section>内容1</section>
<section>内容2</section>
<section>内容3</section>
</article>
4、aside元素：定义当前页面或者文章的附属信息部分 (1 被包含在article元素内作为主要内容的附属信息 2 在article外，作为页面或站点全局的附属信息部分，最常见的形式是侧面栏，其中内容可是友情链接、广告单元等 )
<article>
<header><h1>文章标题1</h1></header>
<section><h2>内容1</h2></section>
<section><h2>内容2</h2></section>
<section<h2>>内容3</h2></section>
<aside>其他相关内容</aside>
</article>
<aside>左侧菜单</aside>
5、section元素：网站或者应用程序中页面的内容划分，一个section通常由内容和标题组成 (不是页面容器 没有标题不要使用section元素 一般不使用)
6、 footer元素：定义一个页面或者区域的底部
<article>
文章内容
<footer>
文章分页列表
</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元素：主要功能是在文本中高亮显示某些字符
<mark>高亮部分</mark>
3、cite元素：创建一个引用，用于对文档参考文献的引用说明，倾斜显示。
6 全局属性
1、draggable元素：用来定义元素是否可以拖到(true，false)必需配合JavaScript使用。
2、hidden元素：元素是否被隐藏（true，false）
3、spellcheck元素：主要针对Input元素和textarea文本框使用，对用户输入的文本内容进行拼写和语法检查（true，false）
4、contenteditable属性：规定是否可编辑元素的内容，前提是该元素可以获得鼠标焦点且内容不只是可读（true，false）
最后
以上就是可爱八宝粥为你收集整理的html5基础知识点整理 后续持续更新的全部内容，希望文章能够帮你解决html5基础知识点整理 后续持续更新所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复