15天前端学习-第二天(个人记录)

15天前端学习-第二天(个人记录)

1.文本用的标签
strong,b,em,i都是表示强调的标签,表现为文本加粗,斜体 strong和b相似 em和i相似
区别在与Strong和em具备语义化 b,i不具备语义化 可以用于简化选择器的操作
blockquote:引用大段的段落解释 q:引用小段的短语解释 abbr:缩写或首字母缩略词
address:引用文档地址信息 cite :引用著作的标题
ruby和rt嵌套可以实现文字拼音注解
bdo可以让文字反向排列 反向排列也可以用css实现(可能能用于古诗排列…)

2.iframe感觉比较实用
iframe 页面嵌入窗口 其运用目前还不是很了解,可用于嵌入第三方广告,共享页面.

3.map与area img一起实用能在页面的图片选中热区超链接
map可以用于建立特殊图形的映射
<img src="./…/…" usemap="#star"(与map标签建立联系#后是map的name)>

4.这两感觉不不实用
embed,object用于嵌入多媒体 仅了解一下.

5.audio和video能实现一些有趣的功能(比如页面局部播放一个视频)
audio与video 用于引入音频与视频,属于h5的新功能,默认不显示需要controls属性来显示. loop属性:是否循环播放
autoplay:自动播放
video可以用source标签选择备选的视频 当第一个不兼容时播放第二个 以此类推.
div设置定位和高度,溢出隐藏,嵌入一个video设置min-宽高为100%可以做到显示一半的效果

6.头部的标签,理解不深但对网页的作用很大

7.语义化的标签,div的替代品 英文不好的我感觉不如div好弄
header:页眉 footer:页脚 main:主题 hgroup:标题组合 nav:导航
可读性比较好 页眉,页脚,主题在一个页面中只能出现一次
(article:独立的内容 aside:辅助信息内容)可嵌套在main中
section:区域(与div相似) figure:描述图像或视频 figcaption:描述图像视频标题
datalist:选项列表 可用id属性与input list属性建立联系,在datalist中嵌入option实现输入框记忆功能(静态)
details/summary 搭配嵌套使用 实现点击summary标题展开信息的功能
<progress min="0"max="10"value=“5”(进度条到的位置)>(进度条标签)
<meter… value="20"low=“10” height=“50”>度量条 功能与progress相似,
当value超出或过低时度量条样式会发生改变
time标签定义日期,对页面可能没影响 但代码可读性提高
mark标签给文字标记(功能类似于书上画重点…)

小试一下..
<header>页眉
	<hgroup>
			<h1>主标题
			<h2>副标题
			<nav>导航条</nav>
	</hgroup>
</header>
<main>
	<article>独立内容
	<section>独立内容里划分区域
	.....
	</section>
	</article>
	<aside>辅助内容
	....
	<aside>
</main>

总结:1.文本用的标签可能使用率不高,但容易记住理解.2.iframe页面里嵌入的窗口,能实现页面插入第三方页面的效果…功能.3.map,area让图片能有更灵活的超链接 4.embed,object标签,插入插件如flash,理解不深.5.audio,video能播放音频视频,这两个标签应该能做出更好的页面效果 6.link,meta对页面的作用偏向于隐性,但不可少.7.语义化的标签,懂点英文应该能做出结构更好的页面,但不如div来的简单粗暴…