HTML5学习笔记 —— HTML开发入门

来源：互联网发布：上海网络大学消防专业编辑：程序博客网时间：2024/05/20 02:23

一、前言

从今天起，我将为大家梳理一下HTML、CSS、JavaScript的基础知识。
如果你对Web前端开发并不了解，那么这个系列文章能够让你掌握Web前端开发的基础知识，再结合练习，就可以正式入门Web前端开发啦。
如果你已是一个Web前端开发人员，那么这个系列文章能够成为你工作中的好助手，你能够在文章中查询你要用到的知识点。
同时，该系列文章中引用的文章多来自于HTML5学堂，感谢HTML5学堂老师们在我学习过程中的帮助！
如果你在阅读过程中遇到困难，或我的描述有不详尽和有错误，请指出，万分感谢。

二、网页中常见的图片格式

1．网页中常见的图片格式有哪些？

Jpg, gif, png-8, png-24

http://www.h5course.com/a/2015050298.html

2．这些不同图片格式各自有什么特点

动态支持程度：gif图片质量：png24 > jpg > png-8 > gif透明程度的支持：透明程度Gif 不支持半透明，支持全透明Jpg 不支持半透明，不支持全透明Png-8   不支持半透明，支持全透明Png-24  支持半透明，全透明兼容问题：IE 6、7、8    PNG不兼容

三、代码注释的写法

1．html代码：
2．CSS代码：/* …….. */
3．js代码：
a.单行注释：//
b.多行注释：/* ….. */ 星号对齐；每加一行开头多加一个星号；星号后面加一个空格
/* ….
* …
* …
* … */

四、HTML5介绍

1.什么是HTML5
HTLM5 = HTML（结构） + CSS（样式） + JavaScript（行为）

a.HTML5：结构，内容排版b.CSS：样式，页面布局、美化c.HTML+CSS纯静态开发——搭载基本的页面（有样式）d.JavaScript：行为，网页中的动作，包括自动动作与操作反馈

2.HTML基本代码模板

<!doctype html><html><head></head><body></body></html>

3.HTML标签规则

a.标签通常是成对出现的，一开一关b.<标签名字>    内容区 </标签名字>c.不成对出现的单标签包括：meta（<meta charset="utf-8">）、<link>、<img>、<input>、<br>等等d.使用Tab键进行缩进——缩进原则为：每一个级别在当前状态下缩进一次e.网页文档的读取顺序是由上到下

<!doctype html>：文档声明，声明文档的基本类型。

5.0版本开始，只需此方式简化编写，之前版本需要定义很多内容

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

5.Html标签

包含head标签和body标签

6.Head标签

Head标签中放置的叫做文档信息以及相关文件，其中主要包含“元信息”、标题、CSS、JS的内容或文件等。<head> 标签用于定义文档的头部。  <head> 中的元素可以引用脚本、指示浏览器在关联的样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，包括文档的标题、编码格式等。

7.Body标签

Body标签中放置的是呈现在网页中的内容<body> 元素定义文档的主体。  <body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） 网页需展示的内容需嵌套在<body>标签中。

五、结构/标签 HTML —— head部分

1．head标签的定义

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

2．元信息Meta标签：

用于确定文件的编码格式：<meta charset="utf-8">Meta：元信息——针对信息进行描述的信息Charset：表示字符编码，通常我们使用utf-8的编码类型存储的文件编码格式需要与浏览器编码一致，否则会出现乱码。a.Meta标签：name属性    主要用于描述网页，与content属性相对应使用。主要作用：便于搜索引擎爬虫查找、分类等。b.Meta标签：keywords关键词    <meta name="keywords" content="具体关键词内容">（content值即为网页搜索的关键词，和SEO（搜索引擎优化有关））c.Meta标签：description关键词    <meta name="description" content="具体描述信息">（即网页搜索时，网站名称下面的简介内容）d.Meta标签：author关键词    <meta name="author" content="姓名">e.Meta标签：http-equiv自动跳转    <meta http-equiv="refresh" content="5">（5秒后自动刷新当前网页）    <meta http-equiv="refresh" content="5; url=http://www.baidu.com">（5秒后自动跳转到百度）    http-equiv相当于是http的文件头，用于向浏览器传递一些信息，从而正确的显示网页内容，与content属性对应。    content属性当中主要存储相应参数的值。    最典型的例子：字符编码的位置，自动刷新/跳转f.Meta定义编码格式旧方法    <meta http-equiv="content-Type" content="text/html; charset=utf-8">（早期写法，等价于<meta charset="utf-8">）

3．link标签

标签定义文档与外部资源的关系。标签最常见的用途是链接样式表。<link rel="stylesheet" href="css/index.css">

4．title标签

<title> 元素可定义文档的标题。

5．style标签

<style> 标签用于为 HTML 文档定义样式信息。<style type="text/css">    h1 {color:red}    p {color:blue}</style>在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

六、结构/标签 HTML —— body部分

1．具体模块开发的流程

a.选择标签的基本标准    1)元素的默认样式    2)元素/标签的样式的控制难易程度（后代选择器）    3)SEO——标签的语义性    4)代码的精简度    5)遇到图，选择背景实现还是img标签，是否需要浮动处理。b.合理选择标签    1)标签语义性——规范    2)怎么少起名字——合理使用后代选择器    3)嵌套层数、代码量、可读性    4)一旦出现图文并茂的模块，通常第一优选dl，但是对于内容比较少，布局比较简单的图文并茂模块，考虑是否能使用更精简的

2．标签的语义性以及基本选用

以下引自百度百科
为了使我们的网站更好的被搜索引擎抓取收录，更自然的获得更高的流量，网站标签的语义化就显得尤为重要。所谓标签语义化，就是指标签的含义。
HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。
我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。
如标题文字应该包含在h1-h6中，大段的文字内容应该由p标签进行分段而不是br标签，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。
为什么要这样做？
一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。
如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。

3．块元素

a.块元素的种类    div h1 h2 h3 [h4]少用 (h5 h6)基本弃用 p dl dt dd ul olb.div    div是主要用于做布局的元素，没有任何的语义性，默认宽度是占满父级整行c.h1~h6    h1~h6表示一级标题~六级标题，当前h4比较少用，h5 h6已经弃用d.p    p表示段落e.dl、dt、dd    dl 自定义列表    dt 自定义列表的标题    dd 自定义列表的内容    <dl>        <dt>自定义列表的标题</dt>        <dd>自定义列表的内容</dd>    </dl>f.ul    ul 无序列表    <ul>        <li>ul下只能直接包含li元素</li>    </ul>g.ol    ol 有序列表    <ol>        <li>ol下只能直接包含li元素</li>    </ol>

4．行元素

a.行元素的种类    span img(单标签元素) a em(自带斜体效果) strong(自带加粗效果) i b var del、ins、before伪元素、after伪元素b.行元素的间隙    行元素之间的换行符（即回车），会在页面中被渲染，体现为行元素之间有一个空隙，空隙的大小各个浏览器不相同。解决方法：    1)为行元素加上浮动属性，如：float: left;    2)利用CSS代码进行兼容处理    父级设置：    .wrap {        /*因行元素之间的换行符（即回车），会在页面中被渲染，体现为行元素之间有一个空隙，空隙的大小各个浏览器不相同。*/        /*因回车会被当做空白字符，所以可以在父级设置font-size: 0;，将字符的大小设置为0，回车即不会被显示*/        font-size: 0;    }    子级设置：    .demo * {        /*因父级设置了font-size: 0;，子级中有文字时，需要单独设置字体大小*/        font-size: 12px;    }c.span    没有语义性，行标签，用于辅助布局d.img    属性：alt；title；src。    注意：        控制宽高；border: 0;或border: none;；（两者均用于取消边框，但后者不会引起页面渲染）        设置float或display block;用于规避img标签下方自带3px的空隙bug；    img中alt与title辨析

http://www.h5course.com/a/20150526184.html

e.a    超链接    注意：移动端需要考虑指触区（用户可点击区域）

<a href="链接地址" title="当前标签中的内容">: 超文本链接<a href="http://www.baidu.com" title="baidu" target="_blank">超链接内容</a><a href="链接的页面" target="_blank">新窗口打开</a> <a href="链接的页面" target="_parent">原窗口打开</a>

    title属性：当鼠标悬停在超链接文字上时，会显示出来的提示性信息，与SEO相关。    target属性：用于定义打开超链接的位置，默认是新当前页面，可以使用_blank，在新的空白页当中打开超链接    href属性：用于书写要跳转的链接地址。特殊写法如下            如果不填写   即为刷新当前页。（扩展知识：锚链接）            不书写href属性值或者#，表示刷新。也可以利用#，实现返回顶部href属性：用于书写要跳转的链接地址，如果不填写            （扩展知识：锚链接）            填写# 实现返回顶部。            填写###   点击后不刷新页面最常用    a标签的样式：        a: link 基本状态        a: visited  访问后的状态        a: hover    鼠标悬停状态        a: active   鼠标按下状态（鼠标点击与释放之间时）        :link :visited :hover :active叫做伪类选择器（注意，不是伪元素！！！）        伪类选择器，优先级0010        书写顺序严格按照:link :visited :hover :active，因为优先级都一样，否则会互相覆盖！f.strong/b、em/i的比较    1)strong em内容类标签，    2)b i 修饰类标签，没有含义，已弃用    3)strong、b表现为加粗显示，em i表现为倾斜样式    4)strong em具有强调语气，strong强调语气更强烈。    5)strong em在搜索引擎优化（SEO）当中比b和i重要的多

http://www.h5course.com/a/2015042740.html

g.del、ins    del、ins是行元素，但是有块元素性质，不需要设置display: block;

5．第三类元素

a.第三类元素的种类    br(单标签) li 表格类的元素 以及 部分表单的元素b.li    表示列表项（既不属于块元素，也不属于行元素，是列表项元素，但是能够按照块元素的方式进行显示）c.br    换行标签，有clear属性，在清浮动中应用

6．块元素和行元素的区别

http://www.h5course.com/a/20150502100.html

块属性标签独占一行、支持设置宽高、margin定义四个方向属性值。块转行：display: inline; 可以转换成    行元素、除个别特殊元素外，可包含块状元素和行内元素。行属性标签不独占一行、不支持设置宽高、margin只能定义左右方向属性值。行转块：display: block; 可以转换成块元素、除ins和del外，不能包含块状元素。a.默认状态    块元素默认独占父级一行，行元素默认内容撑开宽高b.能否设置宽高    行元素设置宽高无效c.margin、padding的转换    行元素纵向外边距(margin)设置无效d.如何相互转换：通过使用display: inline和display: block实现块元素和行元素的转换

7．嵌套规则

a.body 可以直接包含块状元素、ins、del、script。不可以直接包含行内元素b.块元素能够包含块元素，但是标题和段落类标签（h1~h6，p dt）除外，块元素能够包含行元素。c.行元素能包含行元素，不能包含块元素（ins 、del 除外）d.ins 和 del（行内元素）可以包含块状元素或者行内元素，其他任何行内元素 都不允许包含块状元素e.p、h1-h6 可以直接包含行内元素和文本信息，但是不允许包含块状元素f.dl 元素只允许包含 dt 和 dd，同时 dt 不能包含块状元素，只允许包含行内元素，对于 dd 可以包含任何元素g.ul和ol下只能直接包含li元素，li下可以包含块元素行元素h.form 元素不能够直接包含 input 元素。原因在于 input 元素属于行内元素， form 元素仅仅能够包含块状元素i.table 元素只能够包含 caption、colgroup、col、thead、tbody、tfoot，不能够直接包含 tr 或者其他任何元素

8．table布局与DIV+CSS布局的区别（比较方向：语义性[搜索引擎方向]；代码量——加载速度——用户体验[用户体验方向]；灵活性、可维护性[开发者方向]）

一.div+css布局的好处：    1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。    2.布局精准，网站版面布局修改简单。    3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。    4.节约站点所占的空间和站点的流量。    5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。二.table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）    1.容易上手。    2.可以形成复杂的变化，简单快速。    3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

9．其他布局方式：960栅格、圣杯、双飞翼、瀑布流（蘑菇街）、WIN8-Grid（网格）、自适应（移动端）、弹性布局、响应式布局（移动端）

七、HTML5移动端新增标签

1.兼容性

移动端大部分浏览器都是webkit内核，兼容IE9+，添加JS DOM后兼容IE8及其以下

2.新增结构标签

a.<header></header>     定义页眉/头部b.<footer></footer>     定义页脚/底部c.<nav></nav>           定义导航d.<article></article>   定义文章e.<aside></aside>       定义文章的侧边栏f.<section></section>   定义文章中的区段g.<hgroup></hgroup>     定义网页标题的组合

3.新增行元素

a.<mark>        呈现突出显示的文字，如搜索结果中高亮度显示关键词；<mark>...</mark>b.<time>        表示日期和时间c.<meter>       表示度量衡，用于已知最大与最小值的度量d.<progress>    表示运行中的金城e.<wbr>         表示软换行

4.新增其他元素

a.<video></video>           定义视频b.<audio></audio>           定义音频c.<details></details>       表示用户要求得到并可以得到的详细信息d.<canvas></canvas>         定义图形，提供画布e.<embed src="" type="">    插入各种多媒体

八、视音频

1．视频格式

a.Theora + Vorbis = Oggb.H.264 + ACC = MPEG4c.Vp8 + Vorbis = Webm

2．支持程度

视频支持程度

3．HTML5视频的使用 —— video标签

a.video标签属性    1)src属性 —— 设置视频的链接    2)width属性 —— 设置元素宽，不好维护，推荐使用样式书写    3)height属性 —— 设置元素高，不好维护，推荐使用样式书写b.兼容处理 —— source元素    浏览器对视音频的格式支持程度不同，使用source标签进行处理    source标签被视频标签video和音频标签audio所支持，它可以链接不同的媒体文件，浏览器将使用第一个可识别的格式 c.播放控制 ——     1)controls：控制条    2)autoplay：属性是视频就绪后自动播放自动播放    3)preload：auto值是表示页面加载后载入视频，none值表示禁用    4)loop：实现视频播放结束后进行循环播放    5)poster：将在视频文件开始播放前显示图片    6)load()方法用于在更改来源（视频地址）后对视频/应聘进行加载    7)play()方法播放加载完成的视音频文件    8)pause()方法暂停正在播放的视音频文件    9)volume属性：控制音量，范围[0-1]    10)playbackRate属性：设置视音频当前的播放速度，FF最大值为5，IE最大值为8，Chrome不确定    11)timeupdate事件    12)duration：视频可播放的总时间    13)currentTime：当前播放视频的时间，可以读写操作d.其他属性

其他属性

九、Canvas

1．Canvas是什么？

HTML5新增的一个标签，它的作用是画矢量图和位图

2．Canvas能做什么？

a.能做游戏、能做特别酷炫的效果等等，主要是为画图而生b.注意：Canvas元素本身并没有绘制能力，必须使用JavaScript来完成实际的绘图任务

3．Canvas设置大小

Canvas有默认宽高，如果使用CSS设置Canvas画布的大小，则导致画布按比例缩放到CSS设置的值。所以Canvas画布宽度的设置需要在标签中，使用标签的属性进行设置。

4．Canvas的基本方法

a.什么是路径    1)绘制时产生的线条成为路径。路径由一个或多个直线段或曲线段组成b.开始和闭合路径    1)beginPath()    2)开始和闭合之间进行绘图    3)closePath()c.移动画笔与画线    1)moveTo(x, y)    2)lineTo(x, y)d.文本绘制    1)strokeText(text, x, y); —— 绘制文字轮廓    2)fillText(text, x, y); —— 填充文字

5．Canvas基本属性

a.设置填充与描边的颜色    1)strokeStyle = ‘red’;    2)fillStyle = ‘red’;b.线条样式的设置    1)lineCap设置线条末端线帽的样式（round、square）    2)lineWidth设置线条粗细，不需要写单位，以像素来计算c.文字的设置    1)font跟CSS类似：字体大小、字体    2)textAlign文字水平对齐（start、end、left、right、center）    3)textBaseline文字垂直对齐方式（文字基线是普通的字母基线）

6．Canvas快速绘制

a.矩形路径的绘制    1)rect(x, y, width, height);        参数      描述        x       矩形左上角的 x 坐标。        y       矩形左上角的 y 坐标。        width   矩形的宽度，以像素计。        height  矩形的高度，以像素计。    2)fillRect(x, y, width, height);        fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。        提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。b.圆形路径的绘制    1)arc(x, y, r, sa, ea, true/false)        context.arc(x,y,r,sAngle,eAngle,counterclockwise);        参数                  描述        x                   圆的中心的 x 坐标。        y                   圆的中心的 y 坐标。        r                   圆的半径。        sAngle              起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。        eAngle              结束角，以弧度计。        counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

c.贝赛尔曲线    1)quadraticCurveTo(kx, ky, ex, ey);        二次贝塞尔曲线        ex, ey：终点    2)bezierCurveTo(kx1, ky1, kx2, ky2, ex, ey)        三次贝塞尔曲线

7．Canvas绘制思路

开始绘制——属性设置——路径变化——关闭路径——填充/描边

8．Canvas图形操作

a.缩放    scale(x, y) —— 缩放当前绘图放大与缩小，x为在横坐标轴上的缩放倍数，y为纵坐标轴上的缩放倍数b.旋转    rotate(par) —— 旋转当前绘制的图，par为旋转的量，用弧度制表示c.平移    translate(x, y) —— 为画布水平和垂直的位移9．Canvas动画    a.原理：绘制——清除——绘制——清除……    b.Canvas动画相关命令        1)清除画布            clearRect(x, y, width, height);        2)save与restore            保存与恢复            Canvas绘图上下文（程序之上和之下的意思）属性都是可以保存和回复，也就是说只能保存状态，不能回复所绘制的内容（图像）            save() —— 用于储存状态，如strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur,             shadowColor, font, textAlign, textBaseline.            restore() —— 将储存的状态取出并赋予新建的图形        3)上下文和栈            save()（入栈）            restore()（出栈）

十、硬件调用

1．特殊功能

a.电话、短信、邮箱    1)取消电话号码识别        <meta name="format-detection" content="telephone=no">    2)调用电话        <a href="tel:15880200025" title="">15880200025</a>    3)调用邮箱        <a href="sms: 231019025@qq.com" title="">231019025@qq.com</a>b.手机相册    1)调用相册        <input type="file" accept="image/*" name="" value="" style="background: #faa">    2)调用手机摄像头        <input type="file" accept="image/*" capture="camera" name="" value="" style="background: #aaf">c.PC端调用QQ    http://shang.qq.com/v3/widget.htmld.IP定位

0 0