上书房之HTML解读.docx

上书房之HTML 互联网产品研发前端技术  目录 第一章 html概述 2 1.1 什么是html 2 1.2 HTML架构 2 1.3 Html编辑器 3 第二章 html标签 4 2.1 DOCTYPE文档类型 4 2.2 html注释 4 2.3 title标签 4 2.4 link标签 4 2.5 meta标签 4 2.6 script标签 4 2.7 style标签 5 2.8 h1到h6标签 5 2.9 p标签 5 2.10 br标签 6 2.11 div标签 6 2.12 span标签 7 2.13 label标签 8 2.14 a链接标签 8 2.15 img图片标签 9 2.16 无序列表ul 10 2.17 有序列表ol 10 2.18 table表格 10 2.19 form表单 13 2.20 表单文本框 13 2.21 表单单选框 14 2.22 表单复选框 14 2.23 表单密码框 15 2.24 表单隐藏域 16 2.25 表单多行文本框 16 2.26 表单下拉框 17 2.27 表单提交按钮 17 2.28 表单重置按钮 18 2.29 表单普通按钮 19 2.30 article标签 20 2.31 块及元素与行内元素 21 第三章 Html属性 23 第一章 html概述 1.1 什么是html HTML(Hyper Text Markup Language) 是用来描述网页的一种超文本标记语言（不是编程语言），它由一套标记标签组成，用来描述网页结构和内容。目前使用最多的版本HTML 4.01 和HTML5。 HTML定义了网页的内容。 CSS定义了网页样式（长相）。 JavaScript定义了网页的行为。 1.2 HTML架构 HTML由head和body两部分组成。其中head包含了所有的头部标签元素, 在 head元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。body定义了文档的主题，包含了网页的结构信息和内容信息。 图1-1 html示例 1.3 Html编辑器 推荐使用Notepad++或者HBuilder作为HTML的编辑器。 Notepad++学习时使用，HBuilder在实际项目中使用。 第二章 html标签 2.1 DOCTYPE文档类型 !DOCTYPE声明必须是HTML文档的第一行，位于html标签之前。!DOCTYPE不是 HTML标签，它是指示web浏览器网页使用的是哪个HTML版本进行编写的。目前统一使用html5的定义方法： !DOCTYPE html 2.2 html注释 注释用于定义html文档的说明部分，浏览器不会对其进行解析。html使用!-- --符号对需要说明的部分进行注释。 !--这里是注释内容，浏览器不会对其进行解析-- 2.3 title标签 使用 title元素来定义html文档的标题，必须定义在head里面。 2.4 link标签 使用link元素来定义网页需要加载的样式表文件。，必须定义在head里面。 2.5 meta标签 使用meta元素来描述HTML文档的描述、关键词、作者、字符集等。 2.6 script标签 使用script元素来定义网页需要加载的脚本文件和网页内使用的脚本内容。 2.7 style标签 使用style元素来定义网页需要使用的独立样式（很少使用）。 2.8 h1到h6标签 h1,h2,h3,h4,h5,h6标签用于描述html文档的6个级别的标题。 2.9 p标签 HTML 可以将文档分割为若干段落。段落是通过 p 标签定义的。 2.10 br标签 使用br/ 可在html文档中插入一个简单的换行符。 2.11 div标签 div 是一个块级元素，可定义文档中的分区或节，把文档分割为独立的、不同的部分。主要用于页面布局。 2.12 span标签 span 标签被用来组合文档中的行内元素。 2.13 label标签 label 标签为input元素定义标注（标记）。 2.14 a链接标签 a标签定义超链接，用于从一张页面链接到另一张页面。a元素最重要的属性是href 属性，它指示链接的目标。 2.15 img图片标签 img /标签用于在html文档中嵌入一张图片，src属性用于定义图片的地址（绝对地址及相对地址）。 2.16 无序列表ul ul标签定义无序列表。 2.17 有序列表ol ol标签定义有序列表。 2.18 table表格 表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 一