内容简介：除了src，alt，height,width(宽高可以百分比)还有<map>定义图片映射。包含多个<area>子元素<area> 有几个属性，例如shape指定内部区域是哪种区域，该属性默认值是rect，矩形区域。还有circle和poly代表圆形区域和多边形区域，
img图片/map/area
除了src，alt，height,width(宽高可以百分比)
还有<map>定义图片映射。包含多个<area>子元素
<area> 有几个属性，例如shape指定内部区域是哪种区域，该属性默认值是rect，矩形区域。还有circle和poly代表圆形区域和多边形区域，
coords指定多个坐标值，用于确定区域位置。href指定资源，alt是图片的文本，target，类似超链接a的target用法。
img就不写demo了。直接map，然后定义2个区域，在img上使用usemap，指定上 map的name或者id
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY" width="175" height="311" border="0" usemap="#firstmap"/>
<map name="firstmap" id="firstmap">
<area shape="circle" coords="50,60,70" href="http://www.baidu.com" alt="去百度" />
<area shape="poly" coords="100,20,110,30,120,60,80,45,60,40,150,70,60,200" href="http://www.ayjs.net" alt="去AY" />
</map>
</body>
</html>
如图，单击会导航过去，会显示区域。真的可以做个地图了。好方便，地图区域是个多边形，然后坐标好了，就可以了。
在img上指定ismap, 浏览器会自动传递单击的坐标
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<!--<img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY" width="175" height="311" border="0" usemap="#firstmap"/>-->
<!--<map name="firstmap" id="firstmap">
<area shape="circle" coords="50,60,70" href="http://www.baidu.com" alt="去百度" />
<area shape="poly" coords="100,20,110,30,120,60,80,45,60,40,150,70,60,200" href="http://www.ayjs.net" alt="去AY" />
</map>-->
<a href="http://www.wpfui.com"><img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY" width="175" height="311" border="0" ismap="ismap" /></a>
</body>
</html>
后面140,71自动添加的
table
H5删除了table的align,bgcolor,border等属性，建议所有table的控制放到css里面（以前还有cellpadding，cellspacing，width，height等）
table定义表格，可以有最多1个caption（表格标题），thead表格头，tfoot表格脚，多个tr表格行，多个tbody表格体（给tr分组的）
tr下是td，td可以指定colspan，合并列，rowspan合并行，height单元格高度，width，单元格宽度，可以百分比
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<table style="width:400px" border="1">
<caption>测试标题</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">AB</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">AA</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
thead,tbody,tfoot不怎么常用,tfoot就是最后1行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<table style="width:400px" border="1">
<caption>测试标题</caption>
<thead>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">一共5行，加头6行</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">AB</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">AA</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</body>
</html>
tbody就是行分组
看下colgroup和col元素，统一设置每一列的单元格的属性。不常用。th和td一样的，只不过加了个语义，表示列头，一般默认加粗。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<table style="width:400px" border="1">
<caption>测试标题</caption>
<colgroup style="background-color:red;">
<!--设置第一列宽度60-->
<col style="width:60px" />
<!--设置横跨两列，设置两列宽各位100-->
<col span="2" style="width:100px" />
</colgroup>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">设置了3列</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
<!--<tbody>
<tr>
<td colspan="2">AB</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">AA</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</tbody>-->
</table>
</body>
</html>
iframe增强
移除frameset,frame,noframes这3个
保留iframe元素。类似wpf的frame
属性
src：url的地址，name：iframe的名字。longdesc:指定一个页面URL，该页面包含该iframe的长描述
scrolling:是否显示滚动条。yes显示，no不显示，auto自动
height,width,frameborder,marginheight:设置该iframe的顶部和底部的页边距。marginwidth,设置该iframe的左侧和右侧的页边距（AY觉的这个名字取的不太好）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<iframe src="http://www.baidu.com" width="500" height="300"/>
</body>
</html>
+srcdoc属性
指定一段Html，忽略src属性，IE不支持
<iframe src="http://www.baidu.com" width="500" height="300" srcdoc="<h1>测试好</h1><div>AY刚学</div>"/>
+seamless属性
bool类型，让iframe生成的框架像源文档的一部分，不再显示边框和滚动条。貌似不常用，直接vue，模块化就ok了。
+sandbox属性
给框架中的网页增加一系列限制。
""：限制全部
allow-forms:允许框架内的表单进行提交。（通常配合allow-same-origin一起使用） sandbox="allow-forms allow-same-origin"
allow-same-origin:允许将框架内所加载的网页视为与使用该iframe元素的页面来自相同源（即时这两个网页来自不同的源,也可以被看做相同域名相同端口的）
allow-scripts:允许加载网页执行js脚本
allow-top-navigation:允许将框架内所加载网页中的超链接导航到父级窗口。
不指定，表示不限制所有。指定"",等于
禁用该页面内的插件。禁止表单提交，框架中的超链接只能在本框架中导航。frame的页面来自不同的源。对于不同源的网页（两个页面对应URL的域名不同或端口不同，即认为这两个页面是不同源的）该页面将会被禁止使员工Ajax与服务器交互，禁止加载来自服务器的内容，同时禁止该页面从Cookie或Web storage读取内容。
所有浏览器都支持。
*允许指定多个属性值，使用空格隔开
H5通用属性
保留通用属性：
id类似wpf的name属性
style类似wpf的style
class类似wpf的StaticResource/DynamicResource
dir排列方向：ltl（从左向右）和rtl（从右向左），类似wpf的HorizonAlignment属性
<table border="1">
<tr>
<td style="width:200px;" dir="ltr"><span>我是</span><span>大聪明</span></td>
<td style="width:300px;" dir="rtl"><span>我是</span><span>大聪明</span></td>
</tr>
</table>
title属性，类似wpf的tooltip
lang属性：告诉浏览器和搜索引擎，所使用的语言，zh中文，en英文，fr法语，ja日语等
一般html元素会指定
<html lang="zh">
<div lang="ja">はようございま</div>
accesskey属性：指定激活该元素的快捷键。 类似wpf的ContentPresenter的RecognizesAccessKey 属性
<div>
用户名(U)<input type="text" name="username" accesskey="u" /><br/>
密码(P)<input type="text" name="pass" accesskey="p" /><br />
<a href="http://www.ayjs.net" accesskey="L">AY博客(L)</a>
</div>
按下Alt+对应的字母，就可以激活元素，如果文本框，就是获得焦点，如果超链接，就是等于单击该导航
tabindex类似wpf的tabindex，指定数字1,2,....N用于按Tab键顺序导航的.如果值等于-1，表示不受tab键盘的影响，不会被导航到的。
新增通用属性：
contentEditable="true" 类
如果一个父元素的contentEditable=true，那么子元素也是该值，继承的。把元素变成可编辑状态
下面例子，双击表格，变成可编辑的。
<table ondblclick="this.contentEditable=true">
<tr>
<td style="width:200px;" dir="ltr"><span>我是</span><span>大聪明1</span></td>
<td style="width:300px;" dir="rtl"><span>我是</span><span>大聪明2</span></td>
</tr>
</table>
designMode属性 双击设计时，页面中所有支持contentEditable属性的元素都变成可编辑状态
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body ondblclick="document.designMode='on';">
<div>aaaa</div>
<table style="width:400px;border-collapse:collapse" border="1">
<tr>
<td>列1</td>
<td>列2</td>
</tr>
<tr>
<td>列2_1</td>
<td>列2_2</td>
</tr>
</table>
</body>
</html>
hidden属性
hidden="true" 等同于 css的display:none
等于wpf的Visibilty="Collapsed"
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<div id="self">我是AY</div>
<button onclick="var s = document.getElementById('self'); s.hidden = !s.hidden;">显示/隐藏</button>
</body>
</html>
单击后
spellcheck属性
<input/><textarea/>增加的拼写检查。
<textarea spellcheck rows="3" cols="80" ></textarea>
IE和火狐暂未支持。
contextmenu属性
目前只有火狐支持。
<div contextmenu="mymenu">
<menu type="context" id="mymenu">
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</menu>
</div>
新增结构元素
article和section
article表示文章，内部可以放header表示标题，footer表示脚注，多个section表示段落，多个article表示附属文章
section分块，可以包含section表示子分块。可以h1-h6表示1个标题，也可以放article
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<h1>我是H1</h1>
<article>
<h2> 我是h2</h2>
<p>学习h1和h2</p>
<section>
<h2>第一部分 我是h2</h2>
<article>
<h3>1.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
<article>
<h3>2.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
</section>
<section>
<h2>第二部分 我是h2</h2>
<article>
<h3>2,1.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
<article>
<h3>2.2.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
</section>
</article>
</body>
</html>
就是一块一块，类似div的用法，主要有点语义，让人一看代码就知道是一篇文章结构。如果div做也可以，但是别人不知道是文章，可能看完理解后，哦，这段代码是个文章。
文档结构写好了，后面可以用css梅花。
看下header和footer
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<header>
<a href="#">返回首页</a>
<h1>文章demo如下</h1>
</header>
<h1>我是H1</h1>
<article>
<h2> 我是h2</h2>
<p>学习h1和h2</p>
<section>
<h2>第一部分 我是h2</h2>
<article>
<h3>1.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
<article>
<h3>2.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
</section>
<section>
<h2>第二部分 我是h2</h2>
<article>
<h3>2,1.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
<article>
<h3>2.2.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
</section>
<footer>
我只是一个脚注总结
</footer>
</article>
</body>
</html>
header也可以放在article里面。
看下nav和aside元素
nav用于定义页面上的“导航条”，包括页面上仿的“主导航条”“边栏导航”“页面导航”“底部导航”等
aside定义当前文章附属信息，通常来说，<aside>元素施一公css渲染成侧边栏。放在body则全局，放在内部元素，则父元素添加边栏
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<header>
<a href="#">返回首页</a>
<h1>文章demo如下</h1>
</header>
<h1>我是H1</h1>
<article>
<h2> 我是h2</h2>
<p>学习h1和h2</p>
<section>
<h2>第一部分 我是h2</h2>
<article>
<h3>1.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
<article>
<h3>2.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
</section>
<section>
<h2>第二部分 我是h2</h2>
<article>
<h3>2,1.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
<article>
<h3>2.2.我是h3</h3>
<div>我是h3的div</div>
<p>我是p一个段落</p>
</article>
</section>
<footer>
我只是一个脚注总结
</footer>
<aside style="position:absolute;right:10px;bottom:300px">
<section>
<h4>我是内侧边栏h4</h4>
<div>用户：AY</div>
<div>时间：2019-3-12</div>
<div>性别：公</div>
</section>
</aside>
</article>
<aside style="position:absolute;right:10px;bottom:10px">
<h3>导航</h3>
<nav>
<ul>
<li><a href="#">查看AY信息</a></li>
<li><a href="#">查看AY论坛</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">博客推荐</a></li>
</ul>
</nav>
</aside>
</body>
</html>
看下main元素
一个html文档只应包含一个main元素，用于除导航条，logo，版权信息等之外的主要内容。不应该放在允许重复出现的内容中，如article,section,aside,nav,footer,header等元素内
看下figure和figcaption元素
给显示图片增加语义的。
figure类似div，表示定义一块放图片的区域，figcaption就是区域的标题
<figure>
<figcaption>Ay相册</figcaption>
<img src="http://www.wpfui.com/abl/o_2.jpg" alt="图片1" />
<img src="http://www.wpfui.com/abl/o_3.jpg" alt="图片2" />
<img src="http://www.wpfui.com/abl/o_4.jpg" alt="图片3" />
</figure>
新增语义元素
mark 标注重点内容，类似span的用法，用于全文检索时的高亮的关键字
time表示时间，标注具体时间的，无显示效果，可以指定yyyy-MM-ddTHH:mm的格式，可以日期，可以时间。pubdate属性表示是否为发布时间，告诉搜索引擎，此文档的发布时间。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<time datetime="2019-3-12">2019年3月</time>AY开始学习<mark>HTML5</mark>的东西，不知道是不是有点晚了。<br />
<time datetime="20:20">晚上8点</time>开始看书<br /> <time datetime="06:00">早上6点</time>开始上班
</body>
</html>
details 和 summary
基本上一起使用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<time datetime="2019-3-12" pubdate>2019年3月</time>AY开始学习<mark>HTML5</mark>的东西，不知道是不是有点晚了。<br />
<time datetime="20:20">晚上8点</time>开始看书<br /> <time datetime="06:00">早上6点</time>开始上班
<details>
<summary>学习计划</summary>
先学习H5，然后CSS3，然后ES6，然后vue，然后bootstrap，然后app相关的，然后微信
</details>
</body>
</html>
detail自带折叠效果。
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
ruby,rtc,rb,rt,rp元素
用于东亚文字定义解释
ruby用于为一个或者多个短语定义 ruby 注释。ruby注释的通用形式是在短语后面紧跟一段注释文字，用于说明该短语的发音或其他注释。
rb为ruby的子元素，定义ruby注释所解释的短语。
rt定义ruby注释的说明部分（发音或其他注释），通常是ruby或者rtc的子元素，如果后面紧跟rb,rt,rtc,rp,可以省略结束的rt
rtc：rt的容器
rp：用于为不支持ruby注释提供备用文本。一个广泛的约定是，使用该元素标注ruby注释的文本内容两边的圆括号。对于支持ruby注释的浏览器而言，rp元素不显示。
<ruby>
饕
<rb>餮</rb>
<rp>(</rp>
<rt>tao</rt>
<rt>tie</rt>
<rp>)</rp>
</ruby>
bdi元素
将一段文本从它所在的上下文中隔离出来。在某些情况下，浏览器会自动确定文字的方向。可能打乱布局。
把阿拉伯文的内容加进去
不使用
<ul>
<li>杨洋：20岁</li>
<li>مرحباً ：22岁</li>
</ul>
你代码都写不到前面去。
使用的话
<ul>
<li><bdi>杨洋</bdi>：20岁</li>
<li><bdi>مرحباً </bdi>：22岁</li>
</ul>
wbr元素
wbr是word Break Opportunity用于指定在文本的 某处适合添加换行，如英文单词太长，浏览器错误的换行。你用了wbr是告诉浏览器超出长度了该怎么换行
不添加wbr
<p>wbr告诉浏览器如何换行</p>
我是一个长单词我是一个长单词我是一个长单词我是一个长单词我是一个长instantaneously
添加wbr
<p>wbr告诉浏览器如何换行</p>
我是一个长单词我是一个长单词我是一个长单词我是一个长单词我是一个长instant<wbr>ane<wbr>ously
menu和menuitem元素
定义菜单项
可以为contextmenu提供属性值
参数 type：指定菜单项类型，command普通菜单项，checkbox复选菜单项，radio单选菜单项，command是默认值
label：菜单文本
icon：菜单图标
disabled是否可用
checked是否勾选
radiogroup当type是radio时候，有效，表示一组
default表示菜单是否是默认菜单项
<menu>
<menu label="文件">
<menuitem type="command" onclick="file_new()" label="新建" />
<menuitem type="command" onclick="file_open()" label="打开" />
<menuitem type="command" onclick="file_save()" label="保存" />
</menu>
<menu label="编辑">
<menuitem type="command" onclick="edit_cut()" label="剪切" />
<menuitem type="command" onclick="edit_copy()" label="复制" />
<menuitem type="command" onclick="edit_paste()" label="粘贴" />
</menu>
</menu>
目前火狐支持。
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
至少还要写10篇左右才能讲完。。
推荐您阅读更多有关于“web前端，”的文章
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 【每日笔记】【Go学习笔记】2019-01-04 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-02 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-07 Codis笔记
- vue笔记3，计算笔记
- Mysql Java 驱动代码阅读笔记及 JDBC 规范笔记
- 【每日笔记】【Go学习笔记】2019-01-16 go网络编程
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Head First HTML与CSS（第2版）
Elisabeth Robson、Eric Freeman / 徐阳、丁小峰 / 中国电力出版社 / 2013-9 / 98.00元
是不是已经厌倦了那些深奥的HTML书？你可能在抱怨，只有成为专家之后才能读懂那些书。那么，找一本新修订的《Head First HTML与CSS（第2版）》吧，来真正学习HTML。你可能希望学会HTML和CSS来创建你想要的Web页面，从而能与朋友、家人、粉丝和狂热的顾客更有效地交流。你还希望使用最新的HTML5标准，能够保证随时间维护和扩展你的Web页面，使它们在所有浏览器和移动设备中都能正常工......一起来看看 《Head First HTML与CSS（第2版）》 这本书的介绍吧!
