HTML5的基础

HTML5的基础

HTML5的浏览器兼容

支持HTML5的浏览器有

  • Firefox（火狐浏览器）
  • Chrome（谷歌浏览器）
  • Opera
  • Safari
  • 遨游浏览器（Maxthon）
  • IE9及其更高版本

基于IE或Chromium（Chrome的工程版或称实验版）

  • 360浏览器
  • 搜狗浏览器
  • QQ浏览器
  • 猎豹浏览器等

浏览器内核

  • rident （代表产品Internet Explorer）
  • Gecko （代表作品Mozilla FirefoxGecko）
  • Presto （代表作品OperaPresto它也是世界上公认的渲染速度最快的引擎）
  • Webkit （代表作品、Safari、Chrome）
  • Blink （由Google和Opera开发的浏览器排版引擎2013年4月发布）。

BUG、Hack和filter

  • CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
  • CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
  • Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。
  • 使用Hack带来的一些副作用
  • 降低了CSS代码的可读性，增加了代码的负担。

内容类型

HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"
DOCTYPE对象声明

  • 不区分大小写
  • 指定字符集编码
  • < meta charset="UTF-8" >

可省略标记的元素

类型 元素标签
不允许写结束标记的元素 br、col、embed、hr、img、input、link、meta
可以省略结束标记的元素 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素 html、head、body、colgroup、tbody

HTML5新增语义化标签

元素 描述
section 表示页面中的一个内容区块/定义文档中的节(section、区段)
header 表示页面中一个内容区块或整个页面的标题/定义文档的头部区域
footer 表示页面中一个内容区块或整个页面的脚注/定义section或者document的页脚
nav 表示页面中导航链接部分
article 表示一块与上下文无关的独立的内容
aside 在article之外的，与article内容相关的辅助信息
figure 规定独立的流内容-图像-图标-代码-照片
main 表示页面中的主要的内容 (ie不兼容)
figcaption 定义figure元素的标题
summary 包含details元素的标题
dialog 定义对话框 提示框
wbr 规定文本中的何处适合添加换行符
time 定义日期和时间
rt 定义字符的解释和发音
rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
ruby 定义ruby注释
progress 定义任何类型的任务进度
meter 定义量度衡，用于已知最大和最小值的度量
mark 定义带有记号的文本
articele 定义页面独立的内区域
aside 定义页面侧边栏内容 与artcle独立的内容
bdi 设置一段文本，脱离其他父元素的文本方式设置
command -定义命令按钮 单选/复选/按钮
details 用于描述文档或者文档某个部分的细节
canvas 图形的绘制，通过脚本 (通常是JavaScript)来完成
属性open 规定dialog元素是活动的，用户可与值交互 <dialog open>这是打开的对话窗口

兼容低版本浏览器：

<!--[if lt IE9]> 
<script> 
(function() {
		     if (! 
		     /*@cc_on!@*/
		     0) return;
		     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
		     var i= e.length;
		     while (i--){
		         document.createElement(e[i])
		     } 
		})() 
	</script>
<![endif]-->

文档统筹

1、整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可。网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件。
2、根据页面类型分离文件
3、根据功能模块分离文件
4、根据设备类型分离文件// PC ipad phone
5、根据代码规模综合分离文件

超链接优化

1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
许多公司、个人都喜欢酷酷的Flash动画，网站的入口也做成Flash片断，，搜索引擎很难光顾这样的网站。而且个别设计者非常马虎，把网站的入口链接放在了Flash上，有时因为网络繁忙、缺少Flash插件而导致用户根本就看不到网站的内容，
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.

图片优化

图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。

CSS规范

1、命名方法（语义化命名，结构化命名）
ID:结构化 header footer
class: .border0 .red: .font12 .clear

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则

1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6、计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

  • 根元素 HTML
  • float属性不为none left||right
  • position为absolute或fixed
  • display为inline-block, flex,table-cell, table-caption, , inline-flex
  • overflow不为visible; auto hidden scroll----BFC计算模式

元素继承
不可继承的
display、margin、border、padding、background、height、min-height、max- height、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

CSS命名规则

1）建议使用小写字母
2）以英文字母开头，后面可以连接数字、字母、下划线、连字符，建议尽量使用英文字母，适当使用下划线和连接线；
3）词必达意，名称要反映用途和相关信息，同时也要简短。

头部

< head >

包含所有头部标签
在里面可以插入script脚本/css各种meta信息

---可以添加的元素标签为
< title > < style >, < meta >,< link >,< script >,< noscript >和< base >。

< title >

定义不同文档标题

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

< base >

描述了基本的链接地址和链接目标，该标签作为HTML文档中所有的链接标签的默认链接

< link >

定义文档与外部资源之间的关系
通常用于链接到样式表

< style >

定义HTML文档的样式文件引用地址

< meta >

描述了一些基本的元数据

元数据不显示在页面上

但会被浏览器解析

用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据

可以使用于浏览器如何显示内容/重新加载页面，搜索关键词/其他web服务

为搜索引擎定义关键词---keywords

<meta name='keywords' content='HTML,CSS,XMl,XHML,javascript'>

为网页定义描述内容---desciption

<meta name="desciption" content="网页标题">

定义网页作者---author

<meta name="author" content="box">

每隔多少秒刷新网页

<meta name="refresh" content="10">

< #DOCTYPE >

<!DOCTYPE html>
声明HMTL5--必须在第一行

中文网页需要使用 声明编码，否则会出现乱码。

智能表单

Type对象 描述
email 限制用户必须输入email类型
url 限制用户必须输入url类型,内容不是URL地址格式的
range 产生一个滑动条表单,具有min属性与max属性，及step属性，可以指定每次拖动的步幅
search 产生一个搜索意义的表单
color 生成一个颜色选择的表单
time 限制用户必须输入时间类型
date 限制用户必须输入日期类型
month 制用户必须输入月类型
week 限制用户必须输入周类型
number 限制用户输入为数字具有min、max、step的属性

新增属性

属性|描述|例子
:--😐:--:
placeholder|文本框处于未输入状态时文本框中显示的输入提示| 无
required|验证输入不能为空| 无
autocomplete|输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能 属性值:no/off| < input type="text" autocomplete="on" list ="greeting">
novalidate|取消验证| 无
Multiple|可以输入一个或多个值，每个值之间用逗号分开 | < input type=“email” multiple/> 还可以应用于file
pattern|验证表单输入的内容、已经自带了简单的数据格式验证功能|数字验证 < input type="number" pattern="[0-9]"></input type="number" pattern="[0-9]"></input type="number" pattern="\d">
Datelist|数据列表| < input type="url" list="url_list" name="link" /> list属性：结合datalist元素使用
output|定义不同类型的输出，如计算结果的输出，或脚本的输出。|如下

注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果，等，这些都不可以实现。

<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">       
   	  0<input id="a" type="range" min="0" max="100">100+ 
	<input id="b" type="text" value="50">
   	 = <output name="x" for="a b"></output>   
</form>

通用正则表达式

  • [abc] a、b 或 c（简单类）
  • [^abc] 任何字符，除了 a、b 或 c（否定）
  • [a-zA-Z] a到 z 或 A 到 Z，两头的字母包括在内（范围）
  • [a-d[m-p]] a到 d 或 m 到 p：[a-dm-p]（并集）
  • [a-z&&[def]] d、e 或 f（交集）
  • [a-z&&[^bc]] a 到 z，除了 b 和 c：[ad-z]（减去）
  • [a-z&&[^m-p]] a 到 z，而非 m 到 p：[a-lq-z]（减去）
  • [0-9]{13,16} - 信用卡
  • ^62[0-5]\d{13,16}$ - 银联卡
  • ^4[0-9]{12}(?:[0-9]{3})?$ - Visa
  • ^5[1-5][0-9]{14}$ - 万事达
  • [1-9][0-9]{4,14} - QQ号码
  • ^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ - 手机号码
  • ^([0-9]){7,18}(x|X)?$ - 身份证
  • [1]\w{5,17}$ 密码-字母开头，长度在6~18之间，只能包含字母、数字和下划线
  • ^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ - 强密码 大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间

HTML5的改进

  • 新元素
  • 新属性
  • 完全支持css3
  • Video和audio
  • 2D/3D制图
  • 本地储存
  • 本地sql数据
  • web应用

HTM5新媒体

type属性值
视频:video/ogg video/mp4 video/webm
音频:audio/ogg audio/mpeg audio/mp3

video
定义视频

<video src="movie.ogg" controls="controls">Video元素</video>

audio
定义音频

<audio src="someaduio.wav">Audio元素</audio>
属性 描述
controls 如果出现该属性，则向用户显示控件，比如播放按钮
autoplay 如果出现该属性，则视频在就绪后马上播放。
loop 重复播放属性。
muted 静音属性
poster 规定视频正在下载时显示的图像，直到用户点击播放按钮。

source标签的介绍如下

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<video controls>
       <source src="../mv/movie.ogg" type="video/ogg">
       <source src="../mv/web.mp4" type="video/mp4">
</video>

HTMl应用

  • 本地数据储存
  • 访问本地文件
  • 本地SQL数据
  • 缓存引用
  • javascipt工作者
  • XHTMLHttpRequest2

HMTL5图形

  • canvas元素
  • 内联SVG
  • 使用 CSS3 2D 转换、CSS3 3D 转换。

语义元素

<articele> --定义页面独立的内区域
<aside> --定义页面侧边栏内容 与artcle独立的内容
<article> --表示一块与上下文无关的独立内容
<bdi> --设置一段文本，脱离其他父元素的文本方式设置
<command> --定义命令按钮 单选/复选/按钮
<details> --用于描述文档或者文档某个部分的细节
<dialog> --定义对话框 提示框
<summary> --包含details元素的标题
<figure> --规定独立的流内容-图像-图标-代码-照片
<figcaption> --定义figure元素的标题
<footer> --定义section或者document的页脚、脚注
<header> --定义文档的头部区域表示页面中一个内容区块或者整个页面的标题
<mark> --定义带有记号的文本
<meter> --定义量度衡，用于已知最大和最小值的度量
<nav> --定义导航链接的部分
<progress> --定义任何类型的任务进度
<ruby> --定义ruby注释
<rp> --在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
<rt> --定义自符的解释和发音
<section> --定义文档中的节(section、区段) 表示页面中的一个内容区块
<time> --定义日期和时间
<wbr> --规定文本中的何处适合添加换行符

  1. a-zA-Z ↩︎

posted @ 2021-01-06 14:02  一念天堂tt  阅读(117)  评论(0)  编辑  收藏  举报