当前位置：文档之家 › HTML5笔记

HTML5笔记

  • 格式：docx
  • 大小：1.31 MB
  • 文档页数：27

HTML笔记一、HTML常用元素与属性1.HTML保留的常用元素1.1基本元素<!--…-->：HTML注释<html>：HTML5文档根元素<head>：HTML5文档页面头部分，可省略<title>：HTML5文档页面标题<body>：HTML5文档页面主体部分<style>：引入样式定义，参考CSS章节介绍<h1>到<h6>：标题一到标题六<p>：定义段落<br>：换行，该标签可指定id、class、style等核心属性<hr>：定义水平线<div>：定义文档中的节，能包含<p>、<span>等大量内容，所以会被大量使用<span>：与<div>相似，但节不会换行注：<body>、<p>、<hr>、<div>、<span>该标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.2文本格式化元素<b>：粗体文本<i>：斜体文本<em>：强调文本，效果与斜体类似<strong>：粗体文本，与<b>相似<small>：小号字体文本<sup>：上标文本<sub>：下标文本<bdo>：文本显示方向，可指定dir属性，属性值只能是ltr，rtl注：以上标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.3语义相关元素<abbr>：用于表示一个缩写，可指定title属性：表示缩写的全称<address>：用于表示一个地址，以斜体字显示<blockquote>：用于定义一段长的引用文本，浏览器会以缩进的方式显示这段文本，可指定cite属性：指定该引用文本所引用的网址URL<q>：用于定义一段短的引用文本<cite>：用于表示作品的标题，以斜体字显示<code>：表示一段计算机代码<dfn>：用于定义一个专业术语，以斜体字显示<del>：定义文档中被删除文本，以中画线显示文本<ins>：定义文档中插入的文本，以下画线显示文本<pre>：表示该元素所包含的文本已经进行了“预格式化”，也就是所包含的空格、回车和其他格式都会被保留下来，但浏览器会处理大部分HTML元素<samp>：用于定义示范文本内容<kbd>：用于定义键盘文本<var>：用于表示一个变量，以斜体字显示1.4超链接和锚点<a…/>：定义超链接，可指定属性href：超链接所关联的另一资源，target：指定哪个框架来装载这个内容，属性值有_self、_blank、_top、_parent，media：指定目标URL所引用的媒体类型，默认all1.5列表相关元素<ul>：定义无序列表，该元素只能包含<li…/>子元素<ol>：定义有序列表，该元素只能包含<li…/>子元素<li>：定义列表项目，该元素可包含与<div>类似的内容<dl>：用于定义列表，该元素只能包含<dt…/>、<dd…/>子元素<dt>：定义标题列表项<dd>：定义普通列表项，该元素可包含与<div>类似的内容1.6 图像相关元素<img …/>：定义图像，可指定属性src ：图片路径，alt ：指定一段文本作为图片的提示信息，usemap ：让图片使用图片映射，属性值为#mapname<map>：定义图片映射，可包含多个<area …/>，不同区域链接不同URL<area>：定义图片映射内部区域，可指定属性shape ：区域形状，属性值有rect 、circle 、ploy ，coords ：多个坐标确定区域位置，href ：区域所链接资源，target ：指定哪个框架来装载这个内容，media ：指定目标URL 所引用的媒体类型1.7 表格相关元素<table>：定义表格 <caption>：表格标题<tr>：表格行，只包含<td>、<th><td>：单元格，属性colspan ：跨多少列，rowspan ：跨多少行 <th>：表格页眉单元格，与<td>用法一样 <tbody>：表格主体，只包含<tr>元素 <thead>：表格头，与<tbody>相似 <tfoot>：表格脚，与<tbody>相似2. HTML5新增通用属性2.1 contentEditable 属性可把<table>、<div>等元素变成可编辑状态，如果一个HTML 元素的父元素是可编辑的，那么默认也是可编辑的，除非显示指定contentEditable=“false ”2.2 designMode属性当designMode=’on ’时，页面上所有可支持designMode 属性的元素都变成可编辑状态2.3 hidden 属性为所有元素都提供一个hidden 属性，一旦元素的hidden 属性设为true ，则隐藏该元素，且浏览器不保留所占用的空间。

3.HTML5新增常用元素3.1 文档结构元素<article>：用于代表页面上独立、完整的文章，可以是帖子、blog 、短文等 <header>：定义<article>标题部分<hgroup>：组织多个<h1>~<h6>的标题 <footer>：定义<article>脚注部分 <section>：对页面内容进行分块 <nav>：定义页面导航条 <aside>：定义当前页面或文章的附属信息，推荐用CSS <figure …/>：表示一独立图片区域 <figcaption>：放在<figure …/>内，定义图片区域标题3.2相关语义元素<mark>：标注需要重点关注的内容，黄色显示<details>：显示某个主题的细节，常与<summary>结合使用3.3两个特殊功能元素<meter>：表示一格已知最值的计数仪表<progress>：表示一个进度条4.HTML头部与元信息<head>元素定义HTML文档头，可包含以下子元素：<script>：用于包含JavaScript脚本<style>：用于定义内部CSS样式<link>：用于链接外部CSS样式等资源<title>：定义文档标题<base>：用于指定该页面下所有链接的基准链接<meta>：用于定义HTML页面的元数据，属性包含http-equiv、name、content，用法如下：<meta name=”author” content=”hjy”><meta name=”website” content=”https://”><meta name=”copyright” content=”2001-2008 ”><meta name=”Keywords” content=”Java论坛，Java技术论坛”>http-equiv的属性值有Expires、Pragma、Refresh、Set-Cookie、content-Type5.HTML5新增的拖放API元素<img…/>、<a…/>默认是可以拖动的，对普通元素来说，把属性draggable 设为true，就可以拖动只有这个，拖动跳转加上，拖动后没效果加上，随拖动移动拖放事件有一个dataTransfer属性二、HTML5表单相关元素与属性1.HTML原有的表单及表单控件1.1表单元素<form…/>：用于生成输入表单，表单控件如单行文本框、单选按钮等都必须放在<form…/>内。

可指定以下属性：●action：单击表单内的“确认”按钮，该表单被提交到指定地址●method：提交表单时发送何种类型的请求，属性值可为get和post●enctype：指定表单数据的编码方式，属性值有application/x-www-form-urlencoded：默认编码方式，窗体数据被编码为名称/值对，当action为get时候，浏览器把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。

multipart/form-data：会以二进制流的方式处理表单数据，如果type=file的话，就要用到。

text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

●name：表单唯一名称，建议与id属性值保持一致●target：属性值_blank、_parent、_self、_top1.2使用input元素<input…/>元素是表单控件中最丰富的1.3使用label定义标签<label…/>：用于在表单元素中定义标签，for属性可以指定该标签与哪个表单控件关联。

关联两种方式：●for属性：指定<label…/>元素的for属性为关联控件id属性值●显示关联：将关联控件放在<label…/>内即可1.4使用button定义按钮<button…/>：定义一个按钮，与<input type=”button”/>相比更强大1.5列表框与下拉菜单与文本域<select…/><option><optgroup><textarea>2.HTML5新增的属性与元素2.1HTML5为表单控件新增的属性●form属性：定义表单控件所属的表单●formaction属性：可动态地让表单提交到不同的URL●autofocus属性：打开页面后，设置该属性的表单控件就会自动获取焦点，整个页面只能有一个控件设置●placeholder属性：在未输入前，显示输入提示信息list属性：既允许用户输入，也允许用户通过下拉菜单选择，必须与<datalist…/>结合使用2.2功能丰富的input元素HTML5为<input…/>元素的type属性新增如下几种类型。

合集下载

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。

canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。

浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。

⼆、基本⽅法绘图环境： 语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。

当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。

【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。

绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤： 通过id来捕获canvas元素 创建 context 对象 指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。

《html5从入门到精通》读书笔记（三）

《html5从入门到精通》读书笔记（三）

《html5从⼊门到精通》读书笔记（三）标签　描述45 <form>定义表单。

4　5 <h1> to <h6>定义标题1到标题6。

45 <head>定义关于⽂档的信息，45 <header>定义section或page的页眉。

5 <hgroup>定义有关⽂档中的section的信息。

5 <hr>定义⽔平线。

45 <html>定义html⽂档。

45 <i>定义斜体⽂本。

45 <iframe>定义⾏内的⼦窗⼝（框架）。

45 <img>定义图像、45 <input>定义输⼊域。

45 <ins>定义插⼊⽂本。

45 <keygen>定义⽣成密钥。

5 <kbd>定义键盘⽂本。

45 <label>定义表单空间的标注。

45 <legend>定义fieldset中的标题。

45 <li>定义列表的项⽬。

45 <link>定义资源引⽤。

45 <map>定义图像映射。

45 <mark>定义有记号的⽂本。

5 <menu>定义菜单列表。

45 <meta>定义元信息。

45 <meter>定义预定义范围内的度量。

5 <nav>定义导航链接。

5 <object>定义嵌⼊对象。

45 <ol>定义有序列表。

45 <optgroup>定义选项组。

45 <option>定义下拉列表中的选项。

45 <output>定义输出的⼀些类型。

5 <p>定义段落。

45 <param>定义对象参数，应⽤在<object>⾥⾯、45 <pre>定义预格式化⽂本。

html5学习笔记

html5学习笔记

一html5简介1.html的组合HTML5 ~=HTML+CSS+JS APIsHtml5的发展其实是html，css，jsapi的发展HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出，再于2007 HTML 5的标准草案目前已进入W3C制定标准5大程序的第1步。

2.Html 标签Video，AudioVideo:ogg,mp4,webm audio:ogg,mp3,wavdemo<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>属性autoplay，controls，loop，preload，src实例1 视图标签：<!DOCTYPE HTML><html><body><video width="320" height="240" controls="controls"><source src="/i/movie.ogg" type="video/ogg"><source src="/i/movie.mp4" type="video/mp4">Your browser does not support the video tag.</video></body></html>视图标签案例链接：/tiy/t.asp?f=html5_video_all实例2音频：<!DOCTYPE HTML><html><body><audio controls="controls"><source src="/i/song.ogg" type="audio/ogg"><source src="/i/song.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio></body></html>例子链接：/tiy/t.asp?f=html5_audio_all语义标签增强的表单控件参见ppthtml5教程3.Canvas元素网页上绘制图像绘图绘画过程具体例子看：/html5/html_5_canvas.asp /html5/32168.html4.Input标签HTML5 拥有多个新的表单输入类型。

Html5学习笔记

Html5学习笔记

Html5学习笔记(1)语义化标记<header>,<footer>,<nav>,<article>,<section>,<aside>,<hgroup>,<time >,<mark>,<figure>,<figcaption>(2)表单增强①新的INPUT类型: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, url②新属性: required, autofocus, parttern, list, autocomplete, placeholder③新元素:<keygen>, <datalist>, <output>, <meter>, <progress>(3)不需要插件的视频video和音频audioaudio: ogg(ogg,oga), mp3, wav, AACvideo: ogg(ogv), H.264(mp4)(4)基于javascript 的2D 绘图 <canvas>每个canvas 对象，有对应的rendercontext， path；(5)让内容可编辑父容器把contenteditable = true，可进行编辑，删除，插入等操作。

(6)拖放HTML5 对应的拖放事件：dragstart,drag,dragenter,dragover,dragleave,drop,dragend(7)Web Application Storage (Web 应用本地存储)两种存储方式：① sessionSto rage 会话关闭时无效；② localStorage 存储在本地，即使机器重启还有效。