{"id":28966157,"url":"https://github.com/hblvsjtu/html_study","last_synced_at":"2026-02-07T00:03:26.591Z","repository":{"id":125647377,"uuid":"126800664","full_name":"hblvsjtu/HTML_Study","owner":"hblvsjtu","description":"边学边记录自己的学习心得，希望以后可以互相分享，互相学习^-^","archived":false,"fork":false,"pushed_at":"2018-03-29T09:16:45.000Z","size":3497,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-21T16:58:14.434Z","etag":null,"topics":["html","studying"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hblvsjtu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-03-26T08:53:20.000Z","updated_at":"2018-03-31T07:03:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"a7f1541b-de66-43af-afe0-e6e2ccf4666a","html_url":"https://github.com/hblvsjtu/HTML_Study","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hblvsjtu/HTML_Study","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hblvsjtu%2FHTML_Study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hblvsjtu%2FHTML_Study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hblvsjtu%2FHTML_Study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hblvsjtu%2FHTML_Study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hblvsjtu","download_url":"https://codeload.github.com/hblvsjtu/HTML_Study/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hblvsjtu%2FHTML_Study/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29181265,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T23:15:33.022Z","status":"ssl_error","status_checked_at":"2026-02-06T23:15:09.128Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","studying"],"created_at":"2025-06-24T07:10:59.116Z","updated_at":"2026-02-07T00:03:26.577Z","avatar_url":"https://github.com/hblvsjtu.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML_Study  \n  \n  \n### 作者：冰红茶  \n### 参考书籍：《HTML5权威指南》\n------  \n\n  HTML，Hypertext Makeup Language超文本标记语言。其实当初在学javascript权威指南第二部分的时候，就觉得应该补一下html和css权威指南方面的知识，才能更好地进行第二部分的学习^_ ^\n  \n## 目录\n\n## [一、初探HTML](#1)\n### [1.1 元素](#1.1)\n### [1.2 创建HTML文档](#1.2) \n### [1.3 HTML5元素背景知识](#1.3)\n## [二、构建HTML元素](#2)\n### [2.1 元数据——文档结构元素](#2.1)\n### [2.2 短语元素——标记文字](#2.2) \n### [2.3 流元素——组织内容](#2.3)\n### [2.4 流元素——文档分节](#2.4)\n## [三、表格元素](#3)\n### [3.1 表格元素](#3.1)\n### [3.2 制作不规则表格](#3.2)\n## [四、表单元素](#4)\n### [4.1 表格元素](#4.1)\n### [4.2 配置表单](#4.2)\n### [4.3 input元素和fieldset元素和button元素](#4.3)\n### [4.4 定制input元素](#4.4)\n### [4.5 其他表单元素及输入验证](#4.5)\n## [五、嵌入内容](#5)\n### [5.1 嵌入图像](#5.1)\n### [5.2 嵌入另一张HTML文档](#5.2)\n### [5.3 通过插件嵌入内容](#5.3)\n### [5.4 嵌入数字表现形式](#5.4)\n## [六、理解DOM](#6)\n### [6.1 理解DOM](#6.1)\n------  \n\n    \n\u003ch2 id='1'\u003e 一、初探HTML \u003c/h2\u003e\n\u003ch3 id='1.1'\u003e 1.1元素\u003c/h3\u003e  \n\n#### 1) 元素格式  \n\u003e\u003e 其实HTML其实HTML的职责应该被限定于说明文档内容的结构和含义，而并非内容呈现的形式，内容呈现形式的责任应该由CSS承担。  \n\u003e\u003e\u003e\u003e\u003e\u003e ![图1-1 元素格式](https://github.com/hblvsjtu/HTML_Study/blob/5f7ba08d23b8f4de45599032c5b7445e4de8da87/picture/%E5%9B%BE1-1%20%E5%85%83%E7%B4%A0%E6%A0%BC%E5%BC%8F.png?raw=true)   \n\n#### 2)\t空元素\n\u003e\u003e 空元素的表示内容为空的标签，如`\u003ccode\u003e\u003c/code\u003e`；  \n\u003e\u003e 或者你可以使用自闭合的标签，如`\u003ccode/\u003e`,直接在第一个标签的最后加上“/”；  \n\n#### 3)\t虚元素\n\u003e\u003e 本身规定就不允许带有内容的元素，如`\u003chr\u003e`,是一种段落组织元素，一条长横线，不过更倾向于类似空元素的写法，在末尾加上一个“/”，形如`\u003chr/\u003e`  \n\n\t\t\tI like apples; \u003chr/\u003e I like pears;\n\t\t\t\n#### 4) 元素属性\n- 属性只能用于开始标签或者单个标签；\n- 属性又分为全局属性和局部属性；\n\u003e\u003e\u003e\u003e\u003e\u003e ![图1-2 元素属性](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/%E5%9B%BE1-2%20%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7.png?raw=true) \n- 布尔属性\n\u003e\u003e 其属性值为空字符串==属性名字符串；或者直接赋予“true”或者“false”；\n- 自定义属性\n\u003e\u003e 用户自己定义的，以`data-`打头的,添加这样的前缀是为了避免与未来版本可能增加的属性名称冲突；可以跟CSS和JS结合起来；\n\n#### 5) 元素的分类\n- 父元素\n- 子元素 关系最近的后代元素\n- 后代元素\n- 兄弟元素\n\n#### 6) 元素的类型\n- 元数据类型 构建html文档的基本结构，以及就如何处理文档向浏览器提供信息和指示；\n- 流元素 流元素是短语元素的超集 ？不明所以\n- 短语元素 ？不明所以\n- 其他元素，如`\u003cli\u003e` ？不明所以\n\n\n\u003ch3 id='1.2'\u003e1.2 创建HTML文档\u003c/h3\u003e  \n\n#### 1) 用户代理user agent\n\u003e\u003e 用于处理HTML文档的软件有一个共同的软件——用户代理user agent，浏览器是最流行的用户代理，但不是唯一的一种；\n\n#### 2) 外层结构\n\u003e\u003e 外层结构由两个元素决定: DOCTYPE和html;  \n\n\t\t\t\u003c!DOCTYPE HTML\u003e\n\t\t\t\t\u003chtml\u003e\n\t\t\t\t\t\u003c!-- type your text --\u003e\n\t\t\t\t\u003c/html\u003e\n\n#### 3) 元数据\n\u003e\u003e 放在`\u003chead\u003e内容\u003c/head\u003e`中间的内容；\n\n#### 4) HTML实体\n\u003e\u003e 特殊字符的编码，避免该特殊字符被当作HTML元素处理，而当作普通显示字符处理；\n\u003e\u003e\u003e\u003e\u003e\u003e ![图1-3 常用HTML实体](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/%E5%9B%BE1-2%20%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7.png?raw=true) \n\n#### 5) 全局属性\n- accesskey 快捷键 在Windows系统上是“Alt” + accesskey的值；\n- class 给元素归类用的；\n- contenteditable 赋予用户可修改的文字的权限，它的值是一个布尔值，“true”或者“false”；\n- contextmenu 用来为元素设置快捷菜单，即右键会弹出菜单，然而，暂时还没有支持该特性的浏览器；\n- dir 文字向左靠边还是向右靠边，“ltr” | “rtl”；\n- draggable 表示元素是否可被拖放；\n- dropzone 与draggable搭配使用；\n- hidden 是否隐藏该元素，可以直接使用，后面不加值，或者说他本身就是键值同体；\n- id 元素的唯一标识符，在CSS中是用“#”+id作为分类器。还可以利用id值导肮到文档中的特定位置，如URL=文档名+“#”+id，“#”+id称为URL的片段标识符；\n- lang 语言选项，“en”“fr”“es”;\n- spellcheck 拼写检查，只有在哪些用户可编辑的元素上才有意义，如：`\u003ctextarea\u003e`它的值是一个布尔值，“true”或者“false”。不过有一个问题是，该属性会忽略之前的lang属性，原因是spellcheck属性基于用户操作系统或浏览器的语言设置;\n- style 直接定义CSS样式用的；\n- tabindex 键盘焦点的切换，一般用“tab”键，键值为1的会被首先选中，-1的不会被选中；\n- title 提供元素的额外信息，一般是一些提示，即你用光标移过去之后会出现提示；  \n\n\n\u003ch3 id='1.3'\u003e 1.3 HTML5元素背景知识 \u003c/h3\u003e \n\n#### 1) 语义与呈现分离  \n#### 2) 元素选用原则  \n\u003e\u003e 这里说的很含糊，其实并没有什么具体的可操作选用原则；  \n------  \n\n\u003ch2 id='2'\u003e 二、构建HTML文档 \u003c/h2\u003e  \n\u003ch3 id='2.1'\u003e 2.1 元数据——文档结构元素\u003c/h3\u003e   \n\n\u003e\u003e\u003e\u003e\u003e\u003e ![图2-1 文档和元数据元素](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.1%20%E6%9E%84%E7%AD%91%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84.png?raw=true)  \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e DOCTYPE|无|无|单个开始标签|否\n\u003e\u003e html|无|head元素和body元素|开始标签和结束标签|否\n\u003e\u003e head|无|必须有title元素|开始标签和结束标签|否\n\u003e\u003e body|无|所有流元素和短语元素|开始标签和结束标签|否\n\u003e\u003e title|元数据|普通说明文字|开始标签和结束标签|否\n\u003e\u003e base|元数据|无|虚元素|否\n\u003e\u003e style|无|CSS样式|开始标签和结束标签|否\n\u003e\u003e link|元数据|无|虚元素|否\n\u003e\u003e script|元数据/短语|脚本语言|必须使用开始标签和结束标签|否\n\u003e\u003e noscript|元数据/短语/流|短语元素/流元素|必须使用开始标签和结束标签|否\n\u003e\u003e title|元数据|普通说明文字|开始标签和结束标签|否\n\u003e\u003e title|元数据|普通说明文字|开始标签和结束标签|否\n\n#### 1) DOCTYPE元素  \n\u003e\u003e 他告诉浏览器两件事：它处理的是HTML文档；用来标记文档内容HTML所属的版本；  \n#### 2) html元素 开始标签和结束标签    \n\u003e\u003e 有一个更加恰当的名字*根元素*；  \n#### 3) head元素 开始标签和结束标签    \n\u003e\u003e 包含着文档的元数据和文档信息，元数据向浏览器提供有关文档内容和标记的信息，还包括CSS和JS的文档的引用；\n- title 标签页名字\n- base 虚元素的形式，有两个属性\n\u003e - href 基准地址，如  \t\n\u003e - target 告诉浏览器如何打开URL\n- meta 虚元素的形式  \n\u003e - name 使用“name”和“content”作为键值对；  \n\u003e - content；  \n\u003e - charset 声明字符编码\n\u003e - http-equiv 模拟HTTP标头字段，字段值由content表示  \n\n\u003e\u003e\u003e\u003e\u003e\u003e ![2.2 meta元素http-equiv属性](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.2%20meta%E5%85%83%E7%B4%A0http-equiv%E5%B1%9E%E6%80%A7.png?raw=true)  \n\n- style 开始标签和结束标签  \n\u003e - text 定义CSS样式\n\u003e - scoped html5新增的，可以设置属性scoped已规定作用域，如果不设置的话就作用于整个文档\n\u003e - media 规定设备值,可以  采用“AND”“NOT”和表示“OR”的逗号表示  \n\u003e\u003e\u003e\u003e\u003e\u003e ![2.3 style元素media属性](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.3%20style%E5%85%83%E7%B4%A0media%E5%B1%9E%E6%80%A7.png?raw=true)  \n\n\u003e\u003e\u003e\u003e\u003e\u003e ![2.4 style元素media属性规定的设备值](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.4%20style%E5%85%83%E7%B4%A0media%E5%B1%9E%E6%80%A7%E8%A7%84%E5%AE%9A%E7%9A%84%E8%AE%BE%E5%A4%87%E5%80%BC.png?raw=true)  \n\n- link 开始标签和结束标签   \n\u003e - 虚元素的形式，指定外部资源，在HTML5中新增“size”的属性，去掉“charset”“rev”“target”的属性；\n\u003e - rel的值除了我们常见的“stylesheet”载入CSS文档，还有“icon”，表示为网站载入图标,还有预获取功能“prefetch”； \n\u003e - type的值可以是“text/css”，还可以是“image/x-icon”\n\u003e - 预获取功能“prefetch”,在用户点击某链接进入某个页面的前就已经进行预先加载。  \n\u003e\u003e\u003e\u003e\u003e\u003e ![2.5 link元素属性](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.5%20link%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7.png?raw=true)  \n\n\t\t\u003c!DOCTYPE html\u003e\n\t\t\u003chtml\u003e\n\t\t\t\u003chead\u003e\n\t\t\t\t\u003ctitle\u003e欢迎页面\u003c/title\u003e\n\t\t\t\t\u003cbase href=\"http://\"/\u003e\n\t\t\t\t\u003cmeta name=\"author\" content=\"LvHongbin\"/\u003e\n\t\t\t\t\u003cmeta name=\"description\" content=\"A simple example\"/\u003e\n\t\t\t\t\u003cmeta charset=\"utf-8\"/\u003e\n\t\t\t\t\u003cmeta http-equiv=\"refresh\" content=\"5\"/\u003e\n\t\t\t\t\u003cstyle type=\"text/css\" scoped=\"\"\u003e\u003e\n\t\t\t\t\ta{\n\t\t\t\t\t\tbackground-color: grey;\n\t\t\t\t\t\tcolor: white;\n\t\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t\t}\n\t\t\t\t\u003c/style\u003e\n\t\t\t\u003c/head\u003e\n\t\t\t\u003cbody\u003e\n\t\t\t\t\u003ca href=\"www.baidu.com\"\u003e登陆页面\u003c/a\u003e \n\t\t\t\u003c/body\u003e\n\t\t\u003c/html\u003e  \n\n- script  开始标签和结束标签，用于定义脚本并控制其执行方式，具有的属性包括；\n\u003e - type 不使用该属性的时候，默认是js类型\n\u003e - src 载入外部文件，设置了该属性的script元素只能是空白元素，不能既有src属性，又有内嵌内容。*另外，如果是引用外部的文件，则必须使用结束标签，不能采用自闭合标签，否则浏览器会忽略该外部文件的加载*；\n\u003e - defer 一般来讲，浏览器是按顺序解析html文本和JS文档，但是有时候需要将JS文档放在最后执行，此时除了将该JS脚本放在html文档的末尾之外，还有一种方法，就是使用defer，该属性没有值，直接放进去就可以了。需要注意的是，该属性只能用于外部JS文档的引用，如果使用内嵌式的JS脚本则不起作用；\n\u003e - async 异步执行脚本，该属性没有值，直接放进去就可以了\n\u003e - charset \n- noscript \n\u003e\u003e 假如用户的浏览器不支持JS或者用户选择禁用JS的功能是，使用noscript给用户显示一些简短信息；  \n\n\n\u003ch3 id='2.2'\u003e 2.2 短语元素——标记文字\u003c/h3\u003e  \n\n\u003e\u003e \u003e\u003e 一个主要特点是元素内容是短语元素，组织形式是行内；\n\u003e\u003e\u003e\u003e\u003e\u003e ![2.6 文本元素1](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.6%20%E6%96%87%E6%9C%AC%E5%85%83%E7%B4%A01.png?raw=true)  \n\u003e\u003e\u003e\u003e\u003e\u003e ![2.6 文本元素2](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.6%20%E6%96%87%E6%9C%AC%E5%85%83%E7%B4%A02.png?raw=true)  \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e a|短语/流|短语内容/流内容|开始标签和结束标签|否\n\u003e\u003e b|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e em|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e i|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e s|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e strong|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e small|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e sup|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e sub|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e br|短语|无|虚元素|否\n\u003e\u003e wbr|短语|无|虚元素|是\n\u003e\u003e code|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e var|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e samp|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e kbd|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e abbr|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e dfn|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e q|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e ruby|短语|短语内容/rt/rp|开始标签和结束标签|是\n\u003e\u003e bdo|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e bdi|短语|短语内容|开始标签和结束标签|是\n\u003e\u003e span|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e mark|短语|短语内容|开始标签和结束标签|是\n\u003e\u003e ins|短语/流|短语内容/流内容|开始标签和结束标签|否\n\u003e\u003e del|短语/流|短语内容/流内容|开始标签和结束标签|否\n\u003e\u003e time|短语|短语内容|开始标签和结束标签|是\n\n#### 1) 超链接a 开始标签和结束标签    \n\u003e\u003e href 指向外部的超链接；  \n\u003e\u003e href 指向内部的超链接，herf=\"# + id名称\"，如果找不到这样的id，那么浏览器会尝试寻找name值等于该id值的元素；  \n\u003e\u003e target 设定浏览环境，其实就是决定新窗口在哪里打开的问题  \n\u003e\u003e\u003e\u003e\u003e\u003e ![2.7 a元素的target属性](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.7%20a%E5%85%83%E7%B4%A0%E7%9A%84target%E5%B1%9E%E6%80%A7.png?raw=true)  \n\n#### 2) 用于设置文字格式的元素\n\u003e - b元素 开始标签和结束标签，用于内容加粗；    \n\u003e - em元素 开始标签和结束标签，用于内容强调，感觉就是做一个斜体；    \n\u003e - i元素 开始标签和结束标签，用于外文词语或者科技术语；  \n\u003e - s元素 开始标签和结束标签，用于不正确或者纠正，其实就是加一个删除线；  \n\u003e - strong元素 开始标签和结束标签，用于一段重要的文字，其实就是把字体放大一号；  \n\u003e - u元素 开始标签和结束标签，用于加下划线；  \n\u003e - small元素 开始标签和结束标签，用于小一号字；  \n\u003e - sup元素和sub 开始标签和结束标签，用于上标和下标；\n#### 3) 换行\n\u003e - br元素 虚元素，用于强制换行；  \n\u003e - wbr元素 虚元素，当一行装不下那么多的文字的时候自动换行；  \n#### 4) 输入和输出\n\u003e\u003e 包括code,car,samp,kbd，不过基本上用不到；  \n#### 5) 标题引用，引文，定义和缩写\n\u003e\u003e 基本上用不到； \n#### 6) 使用语言元素\n\u003e - ruby,rt和rp，HTML5新增的，开始标签和结束标签，这个还有些用，主要用来注音的，即在文字的上方加拼音；\n\u003e - bdo 开始标签和结束标签，文字阅读的方向，跟dir属性一起使用；  \n\u003e - bdi HTML5新增的，开始标签和结束标签，保证文字方向\n#### 7) 其他文本元素\n\u003e - span元素 开始标签和结束标签，内容是短语元素，本身并没有什么特别的含义，它可以把一些全局属性用到一段内容上；\n\u003e - mark元素 HTML5新增的，开始标签和结束标签，把文字变成黄底黑字；\n\u003e - del/ins元素 开始标签和结束标签，删除或者添加；\n\u003e - time元素 HTML5新增的，开始标签和结束标签，其实并不是很懂这个元素的用法；  \n\n\n\u003ch3 id='2.3'\u003e 2.3 流元素——组织内容\u003c/h3\u003e\n\n\u003e\u003e 一个主要特点是内容元素是流，组织形式是块；\n\u003e\u003e\u003e\u003e\u003e\u003e ![2.8 内容分组元素](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.8%20%E5%86%85%E5%AE%B9%E5%88%86%E7%BB%84%E5%85%83%E7%B4%A0.png?raw=true)  \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e p|流|短语内容|开始标签和结束标签|否\n\u003e\u003e div|流|流内容|开始标签和结束标签|否\n\u003e\u003e pre|流|短语内容|开始标签和结束标签|否\n\u003e\u003e blockquote|流|流内容|开始标签和结束标签|否\n\u003e\u003e hr|流|无|虚元素|否\n\u003e\u003e ol|流|li元素|开始标签和结束标签|否\n\u003e\u003e ul|流|li元素|开始标签和结束标签|否\n\u003e\u003e li|无|流内容|开始标签和结束标签|否\n\u003e\u003e dl dt dd|||开始标签和结束标签|否\n\u003e\u003e figure|流|流内容,figcaption元素|开始标签和结束标签|是\n\u003e\u003e figcaption|无|流内容|开始标签和结束标签|是\n\n#### 1) 建立段落p\n\u003e - p元素 开始标签和结束标签\n#### 2) 万能div\n\u003e - div元素 开始标签和结束标签，相当于文本元素的span元素，知识div元素应用于块形式；\n\u003e - 万不得已的时候不要使用div元素，因为它是万金油，如果有其他更加具体的元素应首先使用他们，这也会是选用元素的原则；\n#### 3) 预先编排好的pre\n\u003e - pre元素 开始标签和结束标签，阻止浏览器合并连续空格，保留文本的源格式；\n\u003e - 尤其是与code元素搭配起来使用时特别有用；\n#### 4) figure和figcaption\n\u003e - HTML5是这样定义figure：一个独立的内容单元，可带标题。通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的意思；\n\u003e - figcaption定义插图figure的标题；  \n\n\n\u003ch3 id='2.4'\u003e 2.4 流元素——文档分节\u003c/h3\u003e\n\n\u003e\u003e 主要用于为不同的主题分节，是html5的一大特色\n\u003e\u003e\u003e\u003e\u003e\u003e ![2.8 文档分节元素](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/2.9%20%E6%96%87%E6%A1%A3%E5%88%86%E8%8A%82%E5%85%83%E7%B4%A0.png?raw=true)  \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e h1~h6|流|流内容|开始标签和结束标签|否\n\u003e\u003e hgroup|流|h1~h6|开始标签和结束标签|是\n\u003e\u003e section|流|style元素/流内容|开始标签和结束标签|是\n\u003e\u003e header|流|流内容|开始标签和结束标签|是\n\u003e\u003e footer|流|流内容|开始标签和结束标签|是\n\u003e\u003e nav|流|流内容|开始标签和结束标签|是\n\u003e\u003e article|流|流内容|开始标签和结束标签|是\n\u003e\u003e aside|流|流内容|开始标签和结束标签|是\n\u003e\u003e address|流|流内容|开始标签和结束标签|是\n\u003e\u003e header|流|流内容|开始标签和结束标签|是\n\u003e\u003e details|流|流内容/可有可无的summary元素|开始标签和结束标签|是\n\u003e\u003e summary|无|短语内容|开始标签和结束标签|是\n\n\n#### 1) 隐藏子标题 hgroup\n\u003e - hgroup元素 开始标签和结束标签，子元素只有h1~h6，用于把不同的标题组成一个整体，以免影响html文档的大纲；\n#### 2) 生成节 section\n\u003e - section元素 开始标签和结束标签，不能是address元素的后代元素；\n\u003e - 通常包含多个段落和一个标题，但是标题并不是必需的；\n\u003e - 包括Chrome和Firefox在内的一些浏览器对于section，article，aside和nav元素中的h1应用的样式有所不同；\n\u003e - 作为对比，Opera和Safari对于内嵌在section中的同种标题元素应用相同的样式；\n#### 3) 提供联系信息 address\n\u003e - address元素 开始标签和结束标签，如果作为article的后代元素，则视为为article提供联系信息；\n\u003e - 如果是作为body元素的后代，则视为为整个文档提供联系信息；\n\u003e - 只能作为body元素或者article元素的后代；  \n  \n------   \n  \n    \n\u003ch2 id='3'\u003e 三、 表格元素\u003c/h2\u003e\n\u003ch3 id='3.1'\u003e 3.1 表格元素\u003c/h3\u003e  \n\n\u003e\u003e 在HTML早期的版本中，用表格控制页面内容布局的现象很常见，但HTML5不再允许这样做，取而代之的是CSS的新特性；\n\u003e\u003e\u003e\u003e\u003e\u003e ![3.1 表格元素](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/3.1%20%E8%A1%A8%E6%A0%BC%E5%85%83%E7%B4%A0.png?raw=true)  \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e table|流|caption colgroup thead tbody tfoot tr th td|开始标签和结束标签|否\n\u003e\u003e tr|无|td th|开始标签和结束标签|否\n\u003e\u003e td|无|流内容|开始标签和结束标签|否\n\u003e\u003e thead|无|tr|开始标签和结束标签|否\n\u003e\u003e tfoot|无|tr|开始标签和结束标签|否\n\u003e\u003e tbody|无|tr|开始标签和结束标签|否\n\u003e\u003e caption|无|流内容|开始标签和结束标签|否\n\u003e\u003e colgroup|无|col *只有没有设定span属性的时候才能使用*|开始标签和结束标签|否\n\u003e\u003e col|无|流内容|虚元素|否\n\n#### 1) th元素 \n\u003e - th元素 其父元素为tr，用于表示第一行的内容（表头）；\n#### 2) 表格的格式化\n\u003e - 那问题来了，为什么需要表格格式化？我们知道，一般来讲第一行的单元格全都是表头th，下面的每一行的第一个单元格为th，那么使用CSS的时候要区分第一行中的全th和其余行的一个th比较麻烦，而且有时候其余行不仅只有一个th，这时候每次都需要更改CSS就比较麻烦。这时候表格的结构化应运而生；\n\u003e - thead元素，其父元素是table元素，子元素是tr元素，表示表格的第一行；\n\u003e - tfoot元素，其父元素是table元素，子元素是tr元素，表示表格的最后一行；\n\u003e - tbody元素，其父元素是table元素，子元素是tr元素，表示表格除了第一行和最后一行的其余行；  \n\n\u003ch3 id='3.2'\u003e 3.2 制作不规则的表格\u003c/h3\u003e   \n\n#### 1) 制作不规则的表格\n\u003e - colspan属性 合并多列，合并后的那些单元格被删除，只剩第一个；\n\u003e - rowspan属性 合并多行，合并后的那些单元格被删除，只剩第一个；\n#### 2) colgroup元素\n\u003e - 主要用来方便对列进行分组处理；\n\u003e - 属性span表示要处理那几列，比如span=\"2\"，表示处理前面两列，如果再来一个colgroup元素，它的属性是span=\"3\"，则表示处理第3~5列；\n\u003e - 可以用col元素的span属性让一个col元素代表几列，不用span属性的col属性只代表一列；\n#### 3) 设置表格边框\n\u003e - border属性，大多数浏览器止呕见到border属性之后才会在表格和每个单元格周围绘出边框；\n\u003e - border属性的值必须设置为1或者空字符串；  \n\n------   \n  \n    \n\u003ch2 id='4'\u003e 四、 表单元素\u003c/h2\u003e\n\u003ch3 id='4.1'\u003e 4.1 表单元素\u003c/h3\u003e  \n\n\u003e\u003e 在HTML早期的版本中，用表格控制页面内容布局的现象很常见，但HTML5不再允许这样做，取而代之的是CSS的新特性；\n\u003e\u003e\u003e\u003e\u003e\u003e ![4.1 表单元素a](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.1%20%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0a.png?raw=true)  \n\u003e\u003e\u003e\u003e\u003e\u003e ![4.1 表单元素b](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.1%20%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0b.png?raw=true)\n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e form|流|主要是label元素和input元素|开始标签和结束标签|否\n\u003e\u003e input|短语|无|虚元素|否\n\u003e\u003e button|无|流内容|开始标签和结束标签|否\n\u003e\u003e label|短语|短语内容|开始标签和结束标签|否\n\u003e\u003e fieldset|流|流内容|开始标签和结束标签|否\n  \n  \n\u003ch3 id='4.2'\u003e 4.2 配置表单\u003c/h3\u003e  \n\n#### 1) 配置表单\n\u003e - action属性 把用户的数据发送到什么地方，一般是一个网页地址；\n\u003e - method属性 允许的值只有get和post两个。get：用于安全交互safe interaction，同一个请求发起任意多次不会产生额外作用，一般用于请求只读信息，而post请求则用于不安全的请求，提交数据的行为会导致一些状态的改变，对于Web应用程序多半采用这种方式。\n\u003e - enctype属性 指定了浏览器对发送给服务器的数据采用的编码方式，第一种方式是默认的，其中的特殊字符已经替换成相应的HTML实体，数据项的名称和值以等号分开，各组数据间以符号\u0026分开；第三种方式每家浏览器都有自己的处理方案，结果难以预料，所以最好不要采用。\n\u003e\u003e\u003e\u003e\u003e\u003e ![4.2 配置数据编码](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.2%20%E9%85%8D%E7%BD%AE%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81.png?raw=true)  \n\n\u003e - autocomplete属性，帮助用户记住输入表单的数据，并在再次遇到类似的表单的时候可以自动填写，它有两个值，on和off；\n\u003e - target属性\n\u003e - name属性，form的name属性只用于DOM中，并不会发送给服务器，而input的name属性如果不设置的话，数据在提交表单的时候不会被发送给服务器，所以input元素的name属性和id属性最好是同一个值。\n\u003e - 以前的HTML4中input和button元素必须放在form元素里面，但是在HTML5中input和button元素可以放在外面，使用form属性将与特定的表单关联在一起。\n\n#### 2) 在表单中添加说明标签\n\u003e - for属性，将for属性的值跟其后input的id值相等，这样可以帮助把该标签跟input元素关联起来，有利于屏幕阅读器和其他残障辅助技术对表单的处理。这里有两种方式，可以如  独立分开，也可以把input元素写在label元素里面  \n\n\t\u003clabel for=\"input1\"\u003einput1\u003c/label\u003e\u003cinput id=\"input1\" name=\"input1\" type=\"text\"/\u003e  \n\t或者   \n\t\u003clabel for=\"input1\"\u003einput1 \u003cinput id=\"input1\"  name=\"input1\" type=\"text\"/\u003e\u003c/label\u003e  \n    \n\u003ch3 id='4.3'\u003e 4.3 input元素和fieldset元素和button元素\u003c/h3\u003e  \n\n#### 1) input元素\n\u003e - autofocus属性，鼠标光标的聚焦，只有键没有值，一旦出现说明已经开启该功能；\n\u003e - disable属性，禁用，只有键没有值，一旦出现说明已经开启该功能；\n#### 2) fieldset元素\n\u003e - 其实就是给表单分组；\n\u003e - 他也有对应的标签————legend元素；\n\u003e\u003e\u003e\u003e\u003e\u003e ![4.2 配置数据编码](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.3%20fieldset%E5%92%8Clegend%E5%85%83%E7%B4%A0.png?raw=true)    \n\n#### 3) button元素\n\u003e - type属性，有三个值：submit，reset（将所有的input元素重置）和button（把button当一般元素使用，按下它不会做任何事情，但可以执行JS脚本）；\n\u003e - 如果type属性为submit，那么该按钮会多出几个值，该值其实就是将原先属性form的属性搬到button来，不过他们都是在HTML5中新增的属性；\n\u003e\u003e\u003e\u003e\u003e\u003e ![4.3 button元素新增的属性](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.4%20button%E5%85%83%E7%B4%A0%E7%9A%84%E5%B1%9E%E6%80%A7.png?raw=true)  \n\n\u003ch3 id='4.4'\u003e 4.4 定制input元素\u003c/h3\u003e  \n\n\u003e\u003e\u003e\u003e\u003e\u003e ![4.5 input元素的类型](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.5%20input%E5%85%83%E7%B4%A0%E7%9A%84%E7%B1%BB%E5%9E%8B.png?raw=true)  \n\n#### 1) 属性\n\u003e - size,设定元素可显示的最小值字符数；\n\u003e - maxlength,设定元素可输入的最大字符数；\n\u003e - value,设定元素的初始值，也即默认值；\n\u003e - placeholder，设置一段提示文字，告诉用户应该输入什么类型的数据，其实是类似水印一般的文字；\n\u003e - readonly，只读；\n\u003e - disable，禁用；\n\u003e - checked，选中；\n\u003e - required，必选项；\n#### 2) 类型\n\u003e - submit\n\u003e - reset\n\u003e - button\n\u003e - number step,max,min,作为number类型的附加属性\n\u003e - checkbox，\n\u003e - radio input的name相同为一组，可以加上checked属性表示初始选中；\n\u003e - 时间类型，如datetime,date,month,time,week\n\u003e - search\n\u003e - hidden\n\u003e - image 图像按钮，属性src可以用来添加图像URL，也可以通过设置height和width改变其尺寸\n\u003e - file 需要在form的属性那里enctype设置编码类型为\"multipart/form-data\"\n\n\t\u003c!DOCTYPE html\u003e\n\t\t\u003chtml\u003e\n\t\t\t\u003chead\u003e\n\t\t\t\t\u003ctitle\u003eform表单\u003c/title\u003e\n\t\t\t\u003c/head\u003e\n\t\t\t\u003cbody\u003e\n\t\t\t\t\u003cform\u003e\n\t\t\t\t\t\u003cp\u003e\n\t\t\t\t\t\t\u003clabel for=\"input1\"\u003e选择\u003cinput name=\"input1\" id=\"input1\" list=\"list1\"/\u003e\u003clabel\u003e\n\t\t\t\t\t\t\u003cbutton type=\"submit\"\u003e提交\u003c/button\u003e\n\t\t\t\t\t\u003c/p\u003e\n\t\t\t\t\t\u003cp\u003e\n\t\t\t\t\t\t\u003cfieldset\u003e\n\t\t\t\t\t\t\t\u003clegend\u003eradio:Select your favorite fruit\u003c/legend\u003e\n\t\t\t\t\t\t\t\u003clabel for=\"Select1\"\u003e\n\t\t\t\t\t\t\t\t\u003cinput name=\"fruit\" id=\"Select1\" type=\"radio\" checked value=\"Apples\"/\u003e\n\t\t\t\t\t\t\t\tApples\n\t\t\t\t\t\t\t\u003c/label\u003e\n\t\t\t\t\t\t\t\u003clabel for=\"Select2\"\u003e\n\t\t\t\t\t\t\t\t\u003cinput name=\"fruit\" id=\"Select2\" type=\"radio\"  value=\"Oranges\"/\u003e\n\t\t\t\t\t\t\t\tOranges\n\t\t\t\t\t\t\t\u003c/label\u003e\n\t\t\t\t\t\t\t\u003clabel for=\"Select3\"\u003e\n\t\t\t\t\t\t\t\t\u003cinput name=\"fruit\" id=\"Select3\" type=\"radio\"  value=\"Cherries\"/\u003e\n\t\t\t\t\t\t\t\tCherries\n\t\t\t\t\t\t\t\u003c/label\u003e\n\t\t\t\t\t\t\u003c/fieldset\u003e\n\t\t\t\t\t\u003c/p\u003e\n\t\t\t\t\u003c/form\u003e\n\t\t\t\t\u003cdatalist id=\"list1\"\u003e\n\t\t\t\t\t\u003coption value=\"Apples\" label=\"Apples\"/\u003e\n\t\t\t\t\t\u003coption value=\"Oranges\"\u003eLovely Oranges\u003c/option\u003e\n\t\t\t\t\t\u003coption value=\"Cherries\"/\u003e\n\t\t\t\t\u003c/datalist\u003e\n\t\t\t\u003c/body\u003e\n\t\t\u003c/html\u003e \n\n\n\u003ch3 id='4.5'\u003e 4.5 其他表单元素及输入验证\u003c/h3\u003e  \n\n\u003e\u003e\u003e\u003e\u003e\u003e ![4.6 其他表单元素及输入验证](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/4.6%20%E5%85%B6%E4%BB%96%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E5%8F%8A%E8%BE%93%E5%85%A5%E9%AA%8C%E8%AF%81.png?raw=true)   \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e datalist|短语|option和短语内容|开始标签和结束标签|是  \n\u003e\u003e select|短语|option和optgroup|开始标签和结束标签|否\n\u003e\u003e optgroup|无|option|开始标签和结束标签|否\n\u003e\u003e option|无|字符数据|虚元素/开始标签和结束标签|否\n\u003e\u003e textarea|短语|字符数据|开始标签和结束标签|否\n\u003e\u003e output|短语|短语内容|开始标签和结束标签|是\t\t\n\u003e\u003e keygen|短语|无|虚元素|否  \n\n\n#### 1) datalist元素\n#### 2) textarea元素\n\u003e - rows属性\n\u003e - cols属性\n\u003e - wrap属性，有hard和soft两个值，当设置为hard时，将会插入换行符，苏提交的文字中每一行的字符数都不会超过cols属性的规定\n\u003e - rows属性\n\u003e - rows属性\n\n\t\u003c!DOCTYPE html\u003e\n\t\t\u003chtml\u003e\n\t\t\t\u003chead\u003e\n\t\t\t\t\u003ctitle\u003eform表单\u003c/title\u003e\n\t\t\t\u003c/head\u003e\n\t\t\t\u003cbody\u003e\n\t\t\t\t\u003cform\u003e\n\t\t\t\t\t\u003clabel for=\"input1\"\u003e\n\t\t\t\t\t\t选择:\n\t\t\t\t\t\t\u003cselect id=\"list1\"\u003e\n\t\t\t\t\t\t\t\u003coptgroup label=\"fruit\"\u003e\n\t\t\t\t\t\t\t\t\u003coption value=\"Apples\" label=\"Apples\"/\u003e\n\t\t\t\t\t\t\t\t\u003coption value=\"Oranges\"\u003eLovely Oranges\u003c/option\u003e\n\t\t\t\t\t\t\t\u003c/optgroup\u003e\n\t\t\t\t\t\t\t\u003coptgroup label=\"others\"\u003e\n\t\t\t\t\t\t\t\t\u003coption value=\"Cherries\" label=\"Cherries\"/\u003e\n\t\t\t\t\t\t\t\u003c/optgroup\u003e\n\t\t\t\t\t\t\u003c/select\u003e\n\t\t\t\t\t\u003clabel\u003e\n\t\t\t\t\t\u003cbutton type=\"submit\"\u003e提交\u003c/button\u003e\n\t\t\t\t\u003c/form\u003e\n\t\t\t\t\n\t\t\t\u003c/body\u003e\n\t\t\u003c/html\u003e\n\t\t\n#### 3)keygen元素\n\u003e - 用于生成公开/私有密钥对，提交表单的时候，该元素会生成一对新的密钥，公钥被发给服务器，私钥则由浏览器保留并存入用户的密钥仓库。看来要补充一下密码学的知识了。\n#### 4)输入验证\n\u003e - 从HTML5引入，可以作为后台验证的补充，但是不能完全替代后者；\n\u003e - required属性\n\u003e - min/max属性\n\u003e - pattern属性 正则表达式匹配  \n\n------   \n  \n    \n\u003ch2 id='5'\u003e 五、 嵌入内容\u003c/h2\u003e  \n\n\u003e\u003e\u003e\u003e\u003e\u003e ![5.1 嵌入内容元素](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.1%20%E5%B5%8C%E5%85%A5%E5%86%85%E5%AE%B9%E5%85%83%E7%B4%A0.png?raw=true)  \n\n\u003e\u003e 元素|元素类型|内容|元素结束方式|是否HTML5新增\n\u003e\u003e -|-|-|-|-\n\u003e\u003e img|短语|无|虚元素|否  \n\u003e\u003e map|短语/流|area元素|开始标签和结束标签|否\n\u003e\u003e area|短语|无|虚元素|否\n\u003e\u003e iframe|短语|字符数据|开始标签和结束标签|否\n\u003e\u003e embed|短语|无|虚元素|是\n\u003e\u003e object|短语/流|短语/流/param|开始标签和结束标签|否\t\t\n\u003e\u003e param|无|无|虚元素|否\n\u003e\u003e progress|短语|短语内容|开始标签和结束标签|是\n\u003e\u003e meter|短语|短语内容|开始标签和结束标签|是  \n\n\n\u003ch3 id='5.1'\u003e 5.1 嵌入图像\u003c/h3\u003e  \n\n#### 1)img元素——服务器端的分区响应图\n\u003e - ismap属性，把img元素嵌入到a元素当中，然后设置ismap属性，其实这个属性没有值，出现即代表打开这个功能然后他会在a元素的链接中添加点击的坐标，单位是像素\n\u003e\u003e\u003e\u003e\u003e\u003e ![5.2 服务器端的分区响应图](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.2%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E5%88%86%E5%8C%BA%E5%93%8D%E5%BA%94%E5%9B%BE.png?raw=true)  \n\u003e\u003e\u003e\u003e\u003e\u003e ![5.3 服务器端的分区响应图处理](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.3%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E5%88%86%E5%8C%BA%E5%93%8D%E5%BA%94%E5%9B%BE%E5%A4%84%E7%90%86.png?raw=true)  \n\n#### 2)map元素——客户端的分区响应图\n\u003e - 根据用户在图上点击的不同分区，导航到不同的URL\n\u003e - 不过需要注意的是，需要在map元素中添加“usemap”属性，其值为“#”+map元素的name值，这种方法叫做*井号串名称引用*\n\u003e - shape 形状，如rect，circle，poly，default\n\u003e - coords 坐标，一般是rect的坐标有四个，以图像的左边缘和上边缘为参考，rect的左上右下分别离参考的举例；circle就是圆心坐标和半径，poly就是至少包含6个用逗号分隔的整数，每一对数字各代表多边形的一个顶点；default，默认区域，就是整块图片区域，这个属性不需要提供coords值；  \n\u003e\u003e\u003e\u003e\u003e\u003e ![5.4 客户端的分区响应图](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.4%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E5%88%86%E5%8C%BA%E5%93%8D%E5%BA%94%E5%9B%BE.png?raw=true)   \n\n\u003ch3 id='5.2'\u003e 5.2 嵌入另一张HTML文档\u003c/h3\u003e  \n\n#### 1)iframe元素\n\u003e - 在target属性的值置为iframe属性的名称，便可引用，具有target属性的元素都可以，比如a元素，form元素，button元素，input元素；\n\u003e - 这种引用属于外部引用；\n\u003e - 称这种外部被引用的元素为*浏览上下文*；\n\u003e - 可以设置width属性和height属性；\n\u003e - 利用src属性可以设置默认URL地址；\n\u003e - sandbox沙盒，无值属性或者有值属性都可以，当出现的是无值属性的时候，利用它可以对HTML文档进行限制，比如禁止使用脚本，表单，插件和只想其他浏览上下文的链接；如果出现的是有值属性时，便可以单独开启某些功能，而其余功能则禁用，如“allow-forms” “allow-scripts” “allow-top-navigation” “allow-same-origin”  \n\n\u003ch3 id='5.3'\u003e 5.3 通过插件嵌入内容\u003c/h3\u003e  \n\n#### 1)embed元素\n\u003e - object元素和embed以前是用来作为添加插件使用，后来object元素在HTML4中被引入，而embed则在HTML5中被引入;\n\u003e\u003e\u003e\u003e\u003e\u003e ![5.5 embed元素的使用](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.5%20embed%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%BF%E7%94%A8.png?raw=true)  \n\n#### 2)object元素\n\u003e - 可以用来嵌入图片或者视频，但是嵌入图片已经有img元素了，建议使用img元素；\n\u003e - 子元素param用来定义将要传递给插件的参数，每个需要定义的参数各自使用一个param元素；\n\u003e - 奇怪的是object元素不使用src属性，取而代之的是data属性\n\u003e - 如果是利用object元素嵌入图片的话，需要利用data属性存放URL，然后type的值为“image/png”，如果需要做一个客户端的分区响应图的话，需要添加usemap属和*井号串名称引用*\n\u003e - 也可以作为浏览上下文环境，像iframe一样，不过text的值要改为“text/html”\n\u003e\u003e\u003e\u003e\u003e\u003e ![5.6 object元素的使用](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.6%20object%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%BF%E7%94%A8.png?raw=true)   \n\n\n\u003ch3 id='5.4'\u003e 5.4 嵌入数字表现形式\u003c/h3\u003e  \n\n#### 1)progress——显示进度\n\u003e - 范围0~1，用浮点数表示进度\n\u003e - max属性，value属性和form属性；\n\u003e\u003e\u003e\u003e\u003e\u003e ![5.7 progress元素的使用](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.7%20progress%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%BF%E7%94%A8.png?raw=true)   \n\n#### 2)meter——显示范围里面的值\n\u003e - 范围0~1，用浮点数表示进度\n\u003e - 属性包括min,max,low（过低）,high（过高）和optimum（最佳）\n\u003e\u003e\u003e\u003e\u003e\u003e ![5.8 meter元素的使用](https://github.com/hblvsjtu/HTML_Study/blob/master/picture/5.8%20meter%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%BF%E7%94%A8.png?raw=true)  \n\n------   \n  \n    \n\u003ch2 id='6'\u003e 六、 理解DOM\u003c/h2\u003e  \n\n\u003ch3 id='6.1'\u003e 6.1 理解DOM\u003c/h3\u003e  \n\n#### 1)什么是DOM\n\u003e - Document Object Model，文档对象模型，一组元素（对象）的集合;\n\u003e - DOM是HTML文档的结构和内容与JS之间的桥梁；\n\u003e - 每个HTML文档对象对应着一个JS对象\n#### 2)兼容性的问题\n\u003e - DOM规范和HTML规范是分别开发的，存在碎片化的问题；\n\u003e - 不同的浏览器标准不一样，可能需要到浏览器的稳定版出来后才能测试才能稳定下来  \n\n------  \n\n由于CSS和JS自成一体，所以我打算后面去分别学《CSS权威指南》和《JS权威指南》\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhblvsjtu%2Fhtml_study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhblvsjtu%2Fhtml_study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhblvsjtu%2Fhtml_study/lists"}