HTML5笔记

H5常用标签

【meta标签】
1.charset属性：
设置文档字符及编码格式:写法：
中文编码格式：B-2312:国标码，简体中文；
GBK：扩展的国标编码，简体中文；
UTF-8:万国码 Unicode码，基本兼容各国语言

2.http-equiv属性：
Content-Type HTML4.01之前的文档内容编码声明，必需配合content属性使用，主要声明浏览器如何解释编译文件。
写法：<meta http-equiv=“属性值” content=“属性值详细内容”
常用属性值：refresh ：网页刷新 set-Cookie ：设置浏览器 cookie ：缓存

3.name属性：
必需配合content属性使用，主要用于给搜索引擎提供必要信息。
写法：<meta name=“属性值” content=“属性值详细内容”
重要属性值：

author 作者，声明网站作者，常用公司网址表示

keywords 网站关键字，多个关键字，用英文逗号分隔

【link标签】
常用属性：
rel：用于表明被链接文件与当前文件关系。icon表明被链接图片是当前网
页的icon图标。
type：表明被链接文件是什么类型，可省略。
href：表明链接文件的地址。

【blockquote标签】
表明标签中的文字，为引用的内容，浏览器显示为等宽字体，并缩进。
cite属性，表明引用的来源，一般为引用的网址URL

引用字段

【figure图片组合标签】
-

标签有两个子标签：
一幅图片，src表示图片的路径。

图片的标题浏览器显示为：图片与标题上下排 列，且整体向后缩进一个单位

【img 图片标签】
src属性：表示图片引用路径。
①相对路径：使用相对路径时，图片最外层只能放到网站根目录（图片必须要在项目文件夹中）
②绝对路径：写法file：///E:/aaa.png 但是，严禁使用
③网络连接：直接使用图片的网络地址，但由于图片在别的服务器，不可控，故不建议使用

【table标签】
1.合并边框:border-collapse:collapse;
2.table中可设padding和mrgin值，对table作为一个整体起作用。
3.border-spacing:对table里面的每个元素单独起作用，如果设置了border-collapse则border-spacing不起作用。
4. text-align、vertical-align：对表格内元素都起作用。

【标签的属性】
1.只有设置了border-collapse属性，标签才起作用。
2.如果table本省设置了width和height值，那么通过tr、td只能改变height值，只有table没有设置width和height值，才能通过tr、td设置width和height值。

【表格的跨行与跨列】
1.跨列：colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了。
2.跨行：rowspan，某单元格跨N行，则该单元格下边的N-1个td就不需要了。

【form属性】
action：表单需要提交的服务器地址
method：表单提交数据使用的方法，get/post
name：设置表单名称，以便程序调用
target：设置提交时的目标位置：_blank、_parent、_self、_top
autocomplete：设置浏览器记住用户输入的数据，实现自动完成表单。默认
为on 自动完成，如果不想自动完成则设置off。
enctype：表示浏览器对发送给服务器的数据所采用的编码格式。有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）multipart/form-data（用于上传文件到服务器）
text/plain（未规范的编码，不建议使用，不同浏览器理解不同）

【input的常用属性】
1.type：设置input的输入类型（按钮不具备以下全部属性）
2.name：给input输入框命名。一般情况下，name属性必不可少。因为，传递数据时，使用name=value（内容）的形式传递。
3.value：input输入框的默认值
4.placeholder：输入框的提示内容。当input有默认的value或输入值时，placeholder消失。
5. disabled：禁用input 元素，即禁止用户输入，同时该input不可提交数据，是否有属性值对禁用没有影响，但不可与type=’hidden’一起使用
6. autocomplete：单独设置input 元素的自动完成功能，属性值为on(默认)或off
7.form：让表单外的input元素和指定的表单form挂钩,以致可以一起提交
8. autofocus：让光标聚焦在某个input 元素上，属性值为本身或不设置。
9. readonly：文本框处于只读状态，属性值为本身或不设置。
10. required：表明用户必须输入一个值，否则无法通过输入验证。
11. size：设置文本框宽度，对输入多少字符并没有影响。
12.maxlength 设置文本框最大字符长度，即控制可以输入多少字符。
13.pattern 用于输入验证的正则表达式，属性值为正则表达式。
14. list：指定为文本框提供建议值的datalist 元素， 其值为
datalist 元素的id 值
//设置文本提供的建议值

苹果 桔子

【input-type属性的常用属性值】
1.text：文本输入框
2.password：密码输入框，输入内容默认显示小黑点
3.search：搜索框
4. number：或range:数值输入框
生成一个数值范围文本框，只是样式是拖动式，额外提供以下属性。
min 设置可接受的最小值
max 设定可接受的最大值
step 指定上下调节值的步长
//范围和步长

5. submit、reset 和button：按钮框
submit 生成一个提交按钮；reset 生成一个重置按钮；button 生成一个普通按钮
如果是submit 时，还提供了和元素一样的额外属性：
formaction、formenctype、formmethod、formtarget 和formnovalidate。
6.radio：单选框 checkbox：复选框

使用radio/checkbox时，value属性必填。提交时，提交的为value中的默认值；
radio/checkbox凭借name属性，确定是否属于同一组，name相同为同组，只能选一个
使用checked="checked"属性，设置默认选中项
7.file：文件上传

使用accept=“类型”，设置只能上传的文件类型，如 accept=image/* 表示任意格式图片
8.image：图片按钮
生成一个图片按钮，点击图片就实现提交功能；图片按钮也提供了一些额外属性。
src 指定要显示图像的URL；
alt 提供图片的文字说明；
width 图像的长度；
height 图像的高度；
提供额外属性：
formaction、formenctype、formmethod、formtarget和formnovalidate。

9. hidden：隐藏控件
   生成一个隐藏控件，一般用于表单提交时关联主键ID 提交，而这个数据作为隐
   藏存在。

【属性名=属性值的情况】
1.checked=“checked” 设置radio
2.multiple=“multiple” 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
3.selected=“selected” 设置select控件，默认选中的option选项
4.readonly=“readonly”
5.disabled=“disabled”
当input被disabled时，该input的name和value数据将无法向后台传送
6.hidden=“hidden” 隐藏控件。等效于
7.nowrap=nowrap

【下拉选择控件 select】
1.写法：

option可以有N多个 2. name属性，应该写在上，所有选项只有一个name 3.multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选，即option选项排成行。 4. :用于将option标签进行分组，label属性表示分组名。

5.option常用属性：
value="":当option没有value属性时，往后台传递的是标签中的文字；当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected=“selected”:默认选中。

【文本域 textarea】
1.写法：
2.设置行数cols=""；设置列数rows=""
3.disabled=“disabled” 设置为只读模式，不允许编辑。
4.style=“resize: none;” 设置为宽高不允许修改。
5.maxlength: 设置最大可输入的字符长度
6.style=“overflow: ;” 设置当文字超出区域时，如何处理。

也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）

【表格和表单的边框与标题】

//表格 或 表单的边框 边框标题 表格 或 若干个表单元素

【HTML5智能表单】
1.H5新增input的form属性，用于指定特定form表单的id，实现input无需放在form标签之中，即可通过表单提交。

...

2.新增input的属性：
autocomplete：自动完成功能

记忆之前输入过的内容，在下次输入时，根据以前的内容提示，自动完成。
绝大部分浏览器自动开启
有两个属性值：on/off
可以在标签上设置autocomplete，控制整个表单的自动完成开关， 但可在个别input上单独设置，覆盖form的整体设置
autofocus： 自动获得焦点（一般非搜索引擎不设置）
form：所属表单，通过form表单的id，实现inpu（form=id）归属特定表单。

通用描述：

：块级通用容器； ：短语内容无语义容器； < title>：简短、描述性、唯一（提升搜索引擎排名）, 索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。 ：h1~h6分级标题，实际作用就是加粗并改变字体大小，用于各种标题文档。

：这里部分一般是页面头部，包括：LOGO、标题、导航等内容

：标记导航，元素实际作用是给文档页面添加一个导航。

：里是页面的尾部，一般包括：版权声明、友情链接等内容。 ：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

：元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内 容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文， 都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户 的评论、新闻等。

：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻 条目、联系信息等条块。如果只是为了添加样式，请用div！

：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。如果放在main内，应该与所在内容密切相关。 ：元素实际作用是将文本放小一号。从语义上来看，用于免责声明和 澄清声明。 ：表示内容重要性；元素实际作用和一样，就是加粗。 ：元素的作用和一样，就是倾斜；从语义上看，表示对一段文本的强调 ：实际作用是加上一个黄色的背景，黑色的字；从语义上来看，与上下 文相关而突出的文本，用于记号。 ：出于实用目的提醒读者的一块文字，不传达任何额外的重要性。
：强制换行，在任意文本位置键入
都会被换行 ：安全换行，在英文单词过长时使用会根据浏览器的宽度适当的裁切换行。 ：元素实际作用就是倾斜。从语义上看，表示区分周围内容，并不是特别强

：创建图（默认有40px左右margin）。

：figure的标题，必须是figure内嵌的第一个或者最后一个元素。 ：用于可以关联input，点击label，绑定的input即可获得光标 ：用于将一些表单元素组织在一起，形成特定分组。 ：用于给fieldset元素的分组加上一个标题。

：如果是在元素下时，表示整个文档的联系信息。如果是在

元素下时，表示其下的联系信息。 ：元素没有实际作用；从语义上来看，表示日期和时间。 ：元素实际作用就是删除线；从语义上来看，表示不准确的删除。 ：元素实际作用就是数学的上标和下标。语义也是如此。 ：元素实际作用和一样，是删除线；从语义上来看，表示删除相关文字 ：表示给文字加上下划线 ：元素作用和一样，加一条下划线；从语义上来看，是添加一段文字 ：表示计算机代码片段;包含示例代码或者文件名 （< < > >） :表示编程语言中的变量； ：表示程序或计算机的输出 ：表示用户的输入。由于这属于英文范畴的，必须将lang="en"英语才能 体现效果。

：预格式化文本。保留文本固有的换行和空格。
：表示分数的值或者已知范围的测量结果。如投票结果。
：完成进度。可通过js动态更新value。
：元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题

                      
                      

                       
                       ：表示引自他出的大段内容，默认新的一行显示。

                       
                       ：元素是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本。
：表示缩写，元素没有实际作用；从语义上看，是一段文本的缩写。
：元素的作用是加一对双引号。语义上来看，表示引用来自其他地方的内容。
：元素实际作用就是限制和规范了表格的表头部分。尤其是以后动态
生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。
：添加表脚，实际作用为表格生成表脚，限制在表格的底部。
：添加表格标题元素实际是给表格添加一个标题。

                       
                       
                        
                        ：元素的实际作用就是当多个标题出现，干扰到一对或多个本身需要
整合的标题，这是使用此元素包含群组。

                       
                       
                      
                      

元素通用属性：
id 属性：

段落

解释：id 属性给元素分配一个唯一标识符。这种标识符通常用来给CSS
和JavaScript调用选择元素。一个页面只能出现一次同一个id 名称。
class 属性：

段落

解释：class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置
CSS 样式。
accesskey 属性：
解释：快捷键操作，windows 下alt+指定键，前提是浏览器alt 并不冲突。
contenteditable 属性：

我可以修改吗

解释：让文本处于可编辑状态，设置true 则可以编辑，false 则不可编辑。或
者直接设置属性。
dir 属性：

文字到右边了

解释：让文本从左到右（ltr），还是从右到左（rtl）。
hidden 属性：

文字到右边了

解释：隐藏元素。
.lang 属性：

HTML5

解释：可以局部设置语言。
title 属性：

HTML5

解释：对元素的内容进行额外的提示
tabindex 属性：
解释：表单中按下tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。
style 属性：

CSS 样式

解释：设置元素行内CSS 样式。

锚点设置
过属性id 或name 实现锚点定位：
第一章 第二章 第三章
//锚点

一、主体结构
二、HTML 5元素标记
根元素：html(lang=”zh-cn”)
META元素：head、 title、base、link、meta、style
部件元素：body、section、nav、article、aside、h1~h6、hgroup、header、footer、address
分组内容元素：p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、
figcaption、div
文本层次语义元素：a、em、strong、small、cite、q、dfn、abbr、time、code、
var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、
bdo、span
编辑元素：ins、del
嵌入内容元素：img、iframe、embed、object、param、video、audio、source、
canvas、map、area
表格元素：table、caption、colgroup、col、tbody、thead、tfoot、tr、td、th
表单元素：form、fieldset、legend、label、button、select、datalist、optgroup、
option、textarea、keygen、output、progress、meter
互动元素：details、summary、command、menu
脚本元素：script、noscript

三、HTML 5元素通用属性和事件句柄
H5元素通用属性：accesskey、class、contenteditable、contextmenu、dir、title
draggable、hidden、id、lang、spellcheck、style、tabindex
H5元素事件句柄属性：onabort、onblur*、oncanplay、oncanplaythrough、
onchange、 onclick、 oncontextmenu、ondblclick、ondrag、ondragend、
ondragenter、ondragleave、 ondragover、ondragstart、ondrop、ondurationchange、onemptied、onended、 onerror*、onfocus*、onformchange、onforminput、oninput、oninvalid、onkeydown、 onkeypress、onkeyup、onload*、onloadeddata、onloadedmetadata、onloadstart、 onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、 onpause、onplay、onplaying、onprogress、onratechange、onreadystatechange、 onscroll、onseeked、onseeking、onselect、onshow、onstalled、onsubmit、 onsuspend、ontimeupdate、onvolumechange、onwaiting。

四、HTML5元素标记释义
标记 类型（●双标签 o单标签） 意义 介绍
文件标记

● 根文件标记让浏览器知道这是HTML文件

META标记

● 开头 提供文件整体信息

部件标记

● 文档主体开始文档内容容器

● 代表通用文档或应用部件

● 导航链接外部链接或文档内部链接

● 页面模块 类似文章、摘要或留言POST等形式的记录

● 孤立模块一般作为边栏广告、说明、引用、导航等，aside 元素堵部分一般与正文耦合较小

● 标题标记 ● 群组标题用在一组h1-h6这样的元素集合时使用，用来区 分主副标题？？

● 组说明或组导航也可叫页头标题

● 页脚标题作用范围跟最近部件元素有关

● 地址或联系信息

分组内容标记

● 段落标记

---

o 水平分割线
o 换行

	●	预格式化分本块

 
 

  
  	●	块引用

  
  

   
   	●	编号列表

   
   

    
    	●	项目列表

    
    
	●	列表项

     
     

      
      	●	定义列表

      
      
        ● 定义名称 
      
      
      

        ● 定义说明 
       

         ● 流内容区块说明多结合figcaption使用 
        

          ● figure内容属性 
         

           ● 定位标记无实际意义 
         
 
        
 
       
 
      
     
     
  
  
 
 

文本层次语义标记
● 链接标记
● 强调标记
● 加重标记
● 字体缩小
● 斜体标记
● 引用标记内容原文是phrasing content，暂不清楚如何翻译
● 术语定义
● 缩略语
● 日期时间
● 程序代码
● 变量
● 范例
● 键盘字
● 上标字/下标字
● 斜体标记
● 粗体标记
● 标记或高亮
● 注解标记
● ruby子元素结合ruby使用，比如:天Tian
缘Yuan
● ruby子元素一般做rt元素注释使用
●
● 自定义标记

编辑标记
●
●

嵌入内容标记
● 图片标记

● 框架标记 ● 嵌入标记 ● 对象标记 ● 参数标记 ● 视频标记 ● 音频标记 ● 来源标记 ● 制图标记

表格标记

● 表格标记设定该表格的各项参数 ● ● ● ● ● ● 表格列设定该表格的列

● 表格标题做成一打通列以填入表格标题

● 表格栏设定该表格的栏	● 表格标头相等于	，但其内文字字体会变粗

表单标记

● 表单标记决定该表单的运作模式 ● ● ● 输入标记 ● ● 按钮 ● 选择标记 ● ● ● 选项 ● ● ● ● ●

互动元素

● ● ● ●

其他标记