重新学习了一下HTML和css的相关知识, 感觉还是比较有收获的, 所谓温故而知新, 是否也可作此解, 不瞎扯了, 在这里把一些我觉得比较重要的东西记录一下:
结构化标签 : 规定内容结构,位置以及重要程度.
<h1>...<h6> 六种标题标签, 一般h1只在一个页面内出现一次, 用于概括性的文本和内容;
<p> 分割段落;
<i>,<b> <i>斜体, <b>粗体, 区分不同内容以及文本重要程度, 元素内只能包含文本;
<sup>,<sub> <sup>上标, <sub>下标, 内容格式;
<br />,<hr /> <br />换行, 在一段文字的任意位置换行, <hr />水平分割线, 划分结构;
空白 浏览器把换行符解析为一个空格, 把连续的空格解析为一个空格, 所以当遇到一堆空格与换行符连在一起是, 浏览器只会将他们解析为一个空格, 这叫做白色空间折叠;
语义化标签 : 表示特定语义的标签, 被机器识别, 提高页面可访问性
<strong>, <em> <strong>强调语气, <em>略微强调;
<blackquote>, <q> <blackquote>整段的引用, 段落缩进, 但是不应为了缩进而使用, <q>段落中引用, 加引号, 这两种引用都有cite属性, 表示引用的来源;
<abbr> 缩写, 一般其title属性表示全称;
<cite> 表示引用的来源, 可以表示物品、人名等;
<dfn> 定义名词, 一般格式没有变化;
<address> 地址,联系方式等;
<ins>, <del>, <s> <ins>表示插入内容, 一般加下划线, <del>表示已删除内容, 加中直线, <s>表示与主体无关但仍保留的内容;
盒模型 :
在混杂模式下, 盒子实际宽度=width+margin, padding和border的宽度被计算到width内;
而标准模式下, 实际宽度=width+padding+border+margin; 高度也一样;
表格Table :
常用的标签就是<table>, <tr>, <th>, <td>;
<caption> 给表格定义标题, <thead>, <tbody>, <tfoot>定义表格结构;
td元素的scope属性有两个值, row和col,分别表示该单元格内容为行标题/列标题;
合并单元格用到rowspan,colspan(值>1), 分别表示合并横向/纵向单元格;
可以给第一行tr中的元素(用标签内属性)指定宽度, 和内容对齐方式,之后该元素所在列都会按该方式进行;
对tr应用:hover, 给当前行增加效果;
empty-cells 控制单元格显示或隐藏, show/hide;
border-spacing 控制单元格相互间距, border-collapse 的值为collapse时, 表示单元格紧缩排列, 之间不再有缝隙, border-spacing失效;
列表List:
list-style-type, list-style-image, list-style-position
ul 中 list-style-type有三种: disc(实心圆), circle(空心圆), square(方块);
ol 中 list-style-type 有多种: decimal(1), decimal-leading-zero(01), lower-alpha(a), upper-alpha(A), lower-roman(i), upper-roman(I);
list-style-image 可以使用自定义图像作为项目符号,只可以使用单个图标文件;
list-style-position: 表示文本与项目符号相对位置, inside表示项目符号位于文本中, 该段下一行文本不缩进;outside表示符号位于文本外, 该段下一行缩进;
表单form:
fieldset: 表示一个由表单组件构成的功能区域;
legend: 表单域的一个标题;
select: size属性控制可现实选项数目, multiple属性开启多选功能;
input: type="image", 可以将图像作为表单提交按钮, 通过src属性添加图像;
字体: 字体分为客户端字体font-family, 服务端字体@font-face, 基于服务的服务端字体@font-face, SIFR嵌入flash中的字体, CUFON与sifr类似
meta标签:<meta name="" content="" />, <meta http-equiv="" content="" />
name常见值: description 网页内容描述性文字, keywords 关键词, author作者姓名, robots 定义爬虫行为;
http-equiv: content-type 定义网页文本格式及编码格式, pragma=no-cache 阻止浏览器对页面缓存, expires 指定网页有效期;
flash, 视频, 音频
利用SWF脚本添加flash:
<script type="text/javascript">
swfobject.embedSWF("URL","ID","400","300","8.0.0");
</script>
将指定id元素替换为flash元素;
html5的vedio与audio标签添加视频音频, flash方法作为不支持html5浏览器的替代方法:
1.用js创建video,audio标签,检测浏览器是否支持html5;
2.<video> 属性: preload预加载, src源文件, poster默认图像, controls默认控件, autoplay加载完自动播放, loop循环播放
<source src="file1.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="file2.webm" type='video/webm;codecs="vp8, vorbis"' />
</video>
利用<source>标签添加多个源文件, 兼容各个浏览器所支持的文件类型.
Media Type || Media Query 对不同类型的设备提供相应的支持
media type 用于指定设备类型, 对不同设备应用相应的样式, 属于css2的属性, 默认值为all;
media query 用于对设备的各种参数进行判断, 从而应用合适的样式, 属于css3属性;
想详细了解的可以访问这个链接 media type与media query (来自前端观察);