十五至二十一
列表的标题:使用常规的标题或段落
列表的标记在默认情况下是位于列表项目之外,定制标记位于列表项里面,可使用list-style-position:inside/outside改变显示方式
有序列表:面包屑导航(通常水平的显示在主要内容区域的上方,指示当前页面在网站导航路径中的位置
<ol reversed/reversed="reversed"(布尔型)>降序排列的有序列表
list-style-type:disc实心圆点 circle square decimal数字 upper-alpha大写ABC lower-alpha upper-roman大写罗马数字 lower-roman
大多数浏览器会让编号右对齐
<ol type="A/a/I/i/1>
为了在不同浏览器显示相同的效果,通常需要同时设置margin-left和padding-left(dir=“ltr”)
列表设置列表项缩进时用padding-left,在这一句之前最好添加margin-left:0
<ol start="2"><li></li><li value="5"></li><li></li><li value="6"></ol>(2,5,6,6)
使用start和type时,请始终使用数字
最好对li应用背景图像,而不是使用list-style-image
list-style可继承
ul{list-style:url()circle outside}
默认情况下,无序列表第一级至n级:disc,circle,square,squanre...
有序列表第一级至n级:I,A,1,a,1,a,1,a...
嵌套列表可以创建下拉式或飞出式导航菜单
.class{left:-999em(隐藏);position:absolute;z-index:1000;}
:hover .class{left:auto}
dl描述列表 dt名 dd值
不应该使用p对dd元素中的单个文本进行标记,除非是用多个段落组成,就应该在dd中使用多个p进行标记
input type:email,search,tel,ur,date,number,range,color,datetime全局日期,datetime-local局部日期,month,time,week
input中的数据列表 :
<input type="text" name="favfruit" list="fruit"/>
<datalist id="fruit"><option></option></datalist>
<output></output>输出
form:
action:访问者提交表单时服务器上对数据进行处理的脚本的url
method:get/post,post用的多
get:提交的表单的数据会显示在地址栏(希望表单提交后从服务器获取信息)
post:更为安全,可以向服务器发送更多的数据(向服务器存入数据)
有的表单元素有内置的验证功能
fieldset元素将相关的元素组合在一起(分组,如单选按钮分组),legend为每个fieldset提供一个标题(如果有的话,必须是第一个元素),默认会添加一个边框
除了单选按钮,其他情况最好用h1~h6代替legend
css对legend的样式修改能力有限,尤其是关于定位
input type=“text”
必须为每个文本框设置name属性,让服务器和js识别输入数据的文本
label中for的值对应关联的元素的id
value=“default”,若用户没有输入数据,则“default”会发送到服务器
placeholder=“hinttext”(hint文本)
required/required="required":有值时才能提交表单
autofocus/autofocus=“autofocus”,第一个拥有此属性的表单会获取焦点,页面加载时最好有一个字段自动获取焦点
size=“n”,定义文本框大小,以字符为单位,默认是20
maxlength=“n”,最大的字符数
若整个表单或在某个input设置autocomplete=“off”,则不会显示提示文本,浏览器也不会保存用户输入的内容
用p或div分割表单元素,比用列表好
可以在label里嵌套input,就不需要使用for和id关联了,但是分开的话更好,因为添加样式方便
label设置vertical-align:top,会让标签和相关的表单字段对齐
命名习惯:
for、id用-分隔单词
name用_
密码框发送到服务器的过程中不会加密
访问者用现代浏览器提交表单时,会自动对email和website url进行验证,只验证格式,不管是否真实存在
pattern:使用正则表达式定制验证规则,比如电话号码格式等
用fieldset嵌套每组单选按钮,用legend进行描述
checkbox:
chencked或checked=“checked”
name="boxse[]",php处理表单时就会自动创建一个包含复选框的数组,名为$_POST['boxset']
textarea:
cols:设置宽度(字符)
rows:设置高度(行)
maxlength没设置时,默认可以输入32700个字符
resize:none,无法通过拖曳文本区域右下角的斜线改变文本区域的大小
没有value
select(选择框/下拉菜单):
默认选择第一条,若设置了size,则没有默认选项,size表示选择框的高度(显示的高度)
option:设置value的值
selected
multiple/multiple="multiple":可以选择一个以上的菜单选项(按住ctrl或command)
分组:optgroup,包住要分组的option,label里指定标题
input type=“file”创建一个文件上传框和一个browse按钮
multiple允许上传多个文件
enctype属性可以确保文件采用正确的格式上传
size:输入路径和文件名的宽度
允许上传的表单,不能用get方法
不要把密码/银行卡号放在隐藏字段中,input type=“hidden”
隐藏字段例子:用户提交数据前想编辑数据,后退即可
文本输入框和文本区域,使用readonlyia/readonly=“readonly”变成只读,可以复制,获取焦点,但不能修改
提交按钮(通常可不写name,除非有多个提交按钮):
input type=“submit/image”
button type="submit",创建结合文本和图像的提交按钮,不设置value时,默认为Submt或Submit Query
有多个提交按钮时不使用button,因为情况不同浏览器行为不完全一致
重置按钮,与提交按钮类似
在input里使用formnovalidate会关闭自动验证功能
disabled/disabled="disabled"禁用
如果很在意媒体文件的保护,暂时不要使用html5原生多媒体(可通过指向原文件的url进行下载)
html5中有3种视频文件格式
.ogg/.ogv
.mp4/.m4v
.webm
至少需要为视频提供两种格式(mp4和webm)才能确保获得所有兼容html5的浏览器的支持
video属性:
width:默认300px
height:默认150px
autoplay
controls播放按钮等控件
muted静音
loop
poster指定视频加载时要显示的图像
preload:none(不加载)/metadata(仅加载元数据,长度尺寸等)/auto(浏览器决定,auto是默认值)
video中,单个视频来源用src,多个用source包住src,浏览器会先检查src,找不到再检查source
audio格式:最好使用mp3和ogg格式
.ogg
.mp3
.wav
.aac
.mp4
.opus
audio属性:
autoplay
controls播放按钮等控件,省略controls音频不可见
muted静音
loop
preload:none(不加载)/metadata(仅加载元数据,长度等)/auto(浏览器决定,auto是默认值)
type:audio/ogg,audio/mp3...
$('video'):jquery里获取video元素
高级多媒体:
canvas
svg
table里用scope=“col”/row设置标题为行标题还是列标题,caption为表格标题,thead表格头部,tbody表格主体,tfoot表格尾部
如果使用了thead和tfoot,则必须同时使用tbody,一个table只能有一个thead和tfoot,但可以有多个tbody
th scope=“rowgroup”为一整列的标题
rowspan,clospan
将js代码放在link css文件之后,尽可能将js代码放在</body>结束标签之前,不要放在head里(会影响页面显示的速率)
可以对js进行压缩,压缩后的文件名为.min.js
通常浏览器加载一个文件比加载两个文件要快
js事件:
onmousemove
onmouseout
onmouseover用鼠标指向元素
onmouseup点击元素后松开
onmousedown按下鼠标
onblur离开先前获得焦点的元素
onchange改变内容/值
onclick
onblclick双击
onfocus选择/点击等
onkeydown按下
onkeypress按下并松开
onkeyup输入后松开一个键
onload
onreset
onselect选择元素中一个或多个元素
onsubmit
html验证器可以对代码和语言规则进行比较,并将发现的不一致的情况显示为错误或警告
"字符引用双引号
在img里直接定义width和height时,不用写px,默认带单位,写的话是错误的
font-style的默认值是normal不是none