HTML入门

最新推荐文章于 2024-09-23 18:16:16 发布

tz_1qu212

最新推荐文章于 2024-09-23 18:16:16 发布

阅读量734

点赞数 2

分类专栏： Hybird 文章标签： HTML HTML5

Hybird 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

编辑于2018年1月1日

算是《HTML5从入门到精通》这本书的读书笔记，四百多页就讲了一点东西。

一、HTML基础

文件开始标签<html>、文件头部标签<head>、文件标题标签<title>、文件主体标签<body>。

二、HTML文件基本标记

1、元信息标记<meta>

1.1设置页面关键字<meta name='keyname' content='具体的关键字'>

1.2设置页面描述<meta name='description' content='对页面的描述语言'>

1.3设置编辑工具<meta name='generator' content='编辑软件的名称'>

1.4设定作者信息<meta name='author' content='作者的姓名'>

1.5限制搜索方式<meta name='robots' content='搜索方式'>
content的值:all、index、nofollow、noindex、none

1.6设置网页文字及语言

第一种方法：<meta http-equiv='Content-Type' content='text/html;charset=字符集类型'>

第二中方法：<meta http-equiv='Content-Language' content='语言'>

1.7设置网页的定时跳转<meta http-equiv='refresh' content='跳转时间;url=链接地址'>

1.8设定有效期限<meta http-equiv='expires' content='到期的时间'>

1.9禁止从缓存中调用

1.10删除过期的cookie<meta http-equiv='set-cookie' content='到期的时间'>

1.11强制打开新窗口<meta http-equiv='windows-target' content='_top'>

1.12设置网页的过渡效果<meta http-equiv='过渡事件' content='revealtrans(duration=过渡效果持续时间,transition=过渡方式)'>

进入页面的http-equiv值为page-enter，离开页面的http-equiv值为page-exist。

2、基底网址标记<base><base href='链接地址' target='新窗口打开的方式'>放在头部定义，通常配合<a href='相对地址'>

3、页面主体标记<body>

3.1设置文字颜色<body text='颜色代码'>

3.2背景颜色属性<body bgcolor='颜色代码'>

3.3背景图像属性<body background='images/1.jpg' bgproperties='fixed'>将bgproperties设置为fixed则背景图片会固定在页面上静止不动，可以配合css是图片不重复显示。

3.4设置链接文字的颜色

3.5设置边距<body topmargin='上边距的值' leftmargin='左边距的值'>

4、页面的注释

三、文字标记和属性

1、文字标记

1.1字号从大到小<h1></h1>...<h6></h6>

1.2设置文字格式<font></font>

1.3粗体、斜体、下划线<strong></strong>、<em></em>、<u></u>

1.4上标与下标<sup></sup>、<sub></sub>

1.5删除线<strike></strike>或<s></s>

1.6等宽文字标记<code></code>或<samp></samp>

1.7段落标记<p></p>

1.8取消换行标记<nobr></nobr>

1.9换行标记</br>

1.10保留原始版式标记<pre></pre>

1.11居中对齐标记<center></center>

1.12向右缩进标记<blockquote></blockquote>

1.13水平线标记</hr>

1.14文字标注标记<ruby>被说明的文字<rt>文字的标注</rt></ruby>

1.15声明变量标记<var></var>

1.16忽视HTML标记</plaintext>或</xmp>

2、特殊符号的输入

2.1空格&nbsp

2.2引号&quot

2.3左尖括号&lt

2.4右尖括号&gt

2.5乘号&times

2.6小节符号&sect

2.8已注册符合&reg

2.9商标符合&trade

3、标记属性

3.1文字、水平线对齐方式align

3.2设置文字字体face

3.3设置字号size

3.4设置文字、水平线颜色color

3.5设置水平线的宽度与高度width、height

3.6去掉水平线阴影noshade

四、使用列表

1、无序列表标记ul

无序列表的符号类型属性type：disc实心圆点，circle空心圆点，square实心方块。

2、有序列表标记ol

有序列表的符号类型属性type：1、a、A、i、I；

有序列表的起始数值start

3、菜单列表标记menu

4、目录列表标记dir

5、列表项标记li

6、定义列表标记

五、超链接

1、<a href='链接地址' target='目标窗口的打开方式'>链接元素</a>

target值：_parent、_blank、_self、_top。

2、书签链接

2.1<a name='书签名称'></a>

2.2链接到同一页面的书签<a href='#书签的名称'>内容</a>

2.3链接到不同页面的书签<a href='链接地址#书签的名称'>内容</a>

3、其他链接

空链接<a href='#'></a>

六、使用图像

1、<img src='图像文件地址' width='宽' height='高' border='图像边框的宽度' hspace='水平间距' vspace='垂直间距' align='对齐方式' alt='提示文字的内容' href='链接地址' target='目标窗口的打开方式' usemap='#映射图像名称'/>

2、<map name='映像图像的名称'><area shape='热区形状' coords='热区坐标' href='链接地址' alt='提示文字的内容'/></map>

七、创建表格

1、标记

1.1表格标记table

1.2行标记tr

1.3单元格标记td

1.4表格的标题标记caption

1.5表头标记th或者thead

1.6表主体标记tbody

1.7表尾标记tfoot

2、属性

2.1宽度、高度、对齐方式width、height、align

2.2<table border='边框宽度' bordercolor='边框颜色' cellspacing='内框宽度' cellpadding='文字与边框的距离' bgcolor='表格背景颜色' background='背景图像地址' ></table>

2.3<trbordercolor='行的边框颜色'bgcolor='行的背景颜色'align='水平对齐方式' valign='垂直对齐方式'></tr>

2.4<td colspan='跨的列数' rowspan='单元格跨行数' bordercolorlight='亮边框颜色' bordercolordark='暗边框颜色'bordercolor='单元格的边框颜色'bgcolor='单元格的背景颜色'align='水平对齐方式' valign='垂直对齐方式'></td>

八、层标记

1、id='id' css规则：#id{css样式}

2、class='.class' css规则：.class{css样式}

3、style属性

4、行内标签span

5、浮动帧标签iframe

6、层标签layer和ilayer

九、编辑表单

1、<form name='表单名称' action='表单的处理程序' method='传送方式' enctype='编码方式' target='目标窗口的打开方式'></form>

2、输入类控件

2.1type的值：文字字段text、密码域password、单选按钮radio、复选框checkbox、普通按钮button、提交按钮submit、重置按钮reset、图像域image、隐藏域hidden、文件域file

3、列表/菜单标记

<select name='下拉菜单的名称' multiple='是否可以多选'><option value='选项值' selected='是否选中'>选项显示内容</option></select>

4、文本域标记<textarea></textarea>

十、多媒体页面

1、设置滚动文字<marquee direction='滚动方向' behavior='滚动方式' scrollamount='滚动速度' scrolldelay='滚动延迟时间间隔' loop='循环次数' width='宽' height='高' bgcolor='背景颜色' hspace='水平范围' vspace='垂直范围'></marquee>

滚动方式：scroll循环滚动，slide只滚动一次，alternate来回交替进行滚动。

2、添加背景音乐

3、添加多媒体文件

十一、HTML5的新特性

兼容性、实用性、互通性

十二、HTML5与HTML4的区别

全局属性

1、contentEditable是否可编辑

2、designMode整个页面是否可编辑，该属性只能在JavaScript脚本里编辑修改

3、hidden是否可见

4、spellcheck是否检查拼写与语法

5、tabindex获得焦点的顺序

十三、HTML的结构

1、article一般有标题

2、section一般有标题

3、nav导航栏标记，通常子标记是列表标记

4、aside文章附属标记

5、<time datetime='日期T时间Z'></time>

6、header

7、hgroup分组标记

8、footer

9、address

十四、HTML5中的表单

1、<input type='控件类型' placeholder='提示信息' autocomplete='是否保存输入值' autofocus='是否获得焦点' required='是否必填' pattern='正则法则'></input>

2、<input type='range' min='最小值' max='最大值' value='默认值' step='递增递减的梯度'></input>

3、<input type='控件类型'></input>

控件类型：email、url、date、time、datetime、datetime-local、month、week、number、range、search。

css写法input[type='控件类型']{css样式}

4、<output onforminput='输出值'></output>

5、JavaScript是否可以通过checkValidity方法验证是否符合格式

6、JavaScript中setCustomValidity("错误提示信息")

7、块级图像<figure><img src='图像地址'/></br><figcaption>图像描述</figcaption></figure>

8、可展开、收缩区域<details open='默认是否展开'><summary>点击该元素，整个detail则会展开、收缩</summary><p></p></detail>

9、<mark>高亮显示内容</mark>

10、<progress max='最大值' value='默认值'></progress>

11、<meter></meter>获得标签内的第一个数字

12、cite元素

13、small元素，具体仍需在CSS样式中设置。

十五、HTML5中的文件与拖放

1、<input type='file' accept='image/*'/>

2、使用FileReader接口读取文件

2.1检测浏览器是否支持FileReader接口if(typeofFileReader=='undefined'){}

2.2fileReader.readAsDataURL(file)将文件以Data URL形式读入页面

2.3fileReader.readAsText(file)将文件以文本形式读入页面

2.4FileReader接口中的事件onabort、onerror、onload、onloadend、onloadstart、onprogress。

3、拖放API：dragstart、drag、dragenter、dragover、dragleave、drop、dragend。

4、dataTransfer对象API：dropEffect、effectAllowed、types、clearData、setData、getData、setDragImage。

十六、多媒体播放

1、audio和video元素

2、<video src='文件地址' autoplay='是否自动播放' perload='是否预加载none|metadata|auto' controls='controls'/>

controls控制条属性

3、多媒体元素常用方法

video.play()、video.pause()、video.load()

4、多媒体元素事件处理

video.addEventListener(type,listener,useCapture);type事件名，listener函数名,useCapture为true则在Capture阶段处理事件，false则在Bubble阶段处理事件

	Capture阶段：DOCUMENT -> BODY -> 目标
	Target阶段：目标
	Bubble阶段：目标 -> BODY -> DOCUMENT

十七、绘制图形

1、<canvas style='border:1px solid;' width='宽' height='高'/>

2、绘制方法：

2.1var context=canvas.getContext('2d');

2.2context.fillStyle='green';

context.strokeStyle='red';

context.lineWidth='1';

context.fillRect(x,y,width,height);

context.strokeRect(x,y,width,height);

3、圆弧的绘制

context.beginPath();开始路径的创建

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

4、moveTo(x,y)不绘制，移动到目标坐标

lineTo(x,y)移动到目标坐标，并绘制一条直线

5、贝塞尔三次曲线bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

贝塞尔二次曲线quadraticCurveTo(cp1x,cp1y,x,y)

6、运用样式

6.1颜色：context.fillStyle='颜色'

6.2context.globalAlpha = 透明度；

6.3context.lineWidth=线宽;

context.lineCap=butt|round|square线段端点样式;

context.lineJoin=round|bevel|miter两线段连接处样式;

7、绘制渐变图形

7.1绘制线性渐变

context.createLinearGradient(xStart,yStart,xEnd,yEnd)

context.addColorStop(offset,color)

7.2绘制径向渐变

context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

8、坐标的变换

8.1平移context.translate(x,y)

8.2缩放context.scale(x,y)

8.3旋转context.rotate(angle)

8.4矩阵变换context.transform(m11,m12,m21,m22,dx,dy)

9、组合多个图形

context.globalCompositeOperation=type

type值：source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy

10、给图形绘制阴影shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor

11、绘制图像

drawImage(image,x,y)

drawImage(image,x,y,width,height)

drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)

12、图像的局部放大drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)

13、图像平铺context.createPattern(image,type);type值no-repeat、repeat-x、repeat-y、repeat。

14、图像剪裁context.clip();

15、像素的处理

获取像素context.getImage(sx,sy,sw,sh)

设置像素context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]);

16、绘制文字fillText(text,x,y[,maxWidth]);strokeText(text,x,y[,maxWidth]);

17、保存与恢复状态sava和restore

18、文件的保存canvas.toDataURL('保存地址');

19、设置动画的间隔时间setInterval(动画函数,动画间隔时间);

十八、数据存储

1、Web Storage

1.1形式sessionStorage、localStorage。

1.2数据的存储与获取setItem('key',key),getItem('key')

1.3数据的删除与清空removeItem(key),clear()

2、JSON的使用

2.1var str=JSON.stringify(data);

localStorage.setItem(key值,str);

2.2var data=JSON.parse(str);

3、本地数据库SQLite

十九、离线应用程序

1、manifest(缓存清单)

CACHE MANIFEST
version 201801012200
CACHE:
other.html
mr.js
images/mrphoto.jpg
NETWORK:
http://192.168.x.x:x/mr
mr.php
*
FALLBACK:
online.js locale.js
CACHE:
newmr.html
newmr.js

需要在Web应用程序页面上的html标签的manifest属性中指定manifest文件的URL地址：

2、applicationCache对象

2.1swapCache()手工进行本地缓存的更新

2.2事件监听applicationCache.addEventListener('事件名',回调函数)

二十、使用Web Worker处理线程

1、步骤

1.1var worker=new Worker('worker.js');

1.2worker.postMessage(message);发送消息

1.3worker.onmessage=function(event){//处理接受的消息};

2、导入多个JavaScript文件，importScripts('js文件','js文件');

二十一、通信API

otherWindow.postMessage(message,targetOrigin);