HTML基础知识
HTML基础知识
HTML的概述及开发环境
1.1.1 HTML的概述
HTML是超文本标记语言，英语名称为HyperText Markup Language，它是一种用于创建网页的标准标记语言。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
1.1.2 HTML的历史版本
- HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
- HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
- HTML 3.2：1997年1月14日，W3C推荐标准。
- HTML 4.0：1997年12月18日，W3C推荐标准。
- HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
- HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
1.1.3 网页组成
网页主要由文字、图像和超链接等元素构成。除了以上元素，网页中还可以包含音频、视频以及flash等。
除了首页之外，一个网站通常还包含多个子网页。网页与网页之间通过超链接互相访问。
网站由网页构成，网页有静态和动态之分
静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。
动态网页显示的内容则会随着用户操作和时间的不同而变化。
1.1.4 开发环境
-
高效的网页编辑器——VS code
Microsoft在2015年4月30日Build开发者大会上正式发布VS code项目：一个运用于Mac OS X、windows和Linux之上的，针对编写现代web和云应用的跨平台源代码编辑器。VS code集成了一款现代编辑器所应该具备的特性，包括语法高亮，可制定的热键绑定，括号匹配以及代码片段收集。
-
流行的网页设计器——HBuilder
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。
-
网页文档快速修改工具EditPlus和NotePad
DW CS6非常适合初学者，但它启动速度较慢是网站开发人员所难以容忍的。网站开发人员经常使用EditPlus、NotePad和Sublime Text进行快速修改，因为它们比DW CS6有更快的启动速度，也都有高亮着色功能。
HTML标签组织页面内容
2.1.1 HTML标签名称与属性
基础标签html、head和body
<html>标签是位于<! doctype>标签之后的，也被称为根标签，用来告诉浏览器这是一个HTML文档，<html>标签标志着HTML文档的开始，</html>则是标志着HTML文档的结束，在他们之间则是文档的头部和主体内容。
<head>标签用于定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签，比如<title>、<mate>、<link>和<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
<body>标签用于定义HTML文档所要显示的内容。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内，<body>标签中的信息才是最终显示给用户看的。
一个HTML文档只能含有一对<body>标签，且<body>标签必须在<html>标签内，位于<head>头部标签之后，与<head>标签是并列关系。
让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置，其语法格式为<标签名 属性 1=“属性值 1 属性 2=“属性值 2”>网页元素</标签名>
整个HTML页面的代码结构如下：
控制标签
HTML提供了<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>是6个等级的标题标签，用法格式如下：
<hn align="对齐方式">标题内容</hn>
align属性设置对齐方式，其取值如下：
- left：设置标题文字左对齐（默认值）；
- center：设置标题文字居中；
- right：设置标题文字右对齐。
<p>是HTML文档中最常见的标签，也称为段落标签
<p align="对齐方式">段落内容</p>
<hr/>称为水平线，使段落与段落之间隔开，使文档结构清晰。
<br/>称为换行标签，将段落强制性换行。
2.1.2 实体标签元素分类
块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始(和结束)。
块级元素
①总是在新行上开始;
②高度，行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
内联元素
①和其他元素都在一行上;
②高，行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
常见的块元素
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ ol - 排序表单
◎ p - 段落
◎ div - 常用块级容器
常见的内联元素
◎ br - 换行
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
2.1.3 特殊字符与色彩
特殊字符表
十二进制颜色表
HTML度量单位
在HTML文档里，字体除了有颜色特性，还有大小特性。表格和图像等页面元素，也需要有度量大小的单位。HTML中，度量的主要单位如下：
- px：像素单位（计算机屏幕上的一个点），是绝对单位；
- %：百分比（相对当前屏幕尺寸的百分比），能适应屏幕大小；
- em：相对于当前字体尺寸的倍数，能方便地实现首先缩进2个汉字。
简单的HTML标签
3.1.1 实体标签元素分类
文档结构元素
段落标签<p>用于对网页内容提供块级格式。当浏览器解析<p>标签时，在新的段落之前插入一个空白行。
<br>标签，文本内容强行换行。
<hr>标签可以在页面中产生一条水平线，将文本区域内容分开。
标题标签与文本修饰标签
<hn>标签（1≤n ≤ 6）称为标题标签。其中，<h4> 元素的内容与默认文本的大小基本相同， <h1>、<h2>和<h3>元素内容大于文本在网页中的默认尺寸，<h5>和<h6>元素的内容较小一些。
文本修饰标签用于对文本样式进行设置。标签<font>可设置字体、字号和颜色；标签<strong>用于文本加粗；标签<sup>用于以上标的形式显示文本；标签<sub>用于以下标的形式显示文本；标签<i>用于实现斜体；标签<u>用于实现下划线。
超链接和target属性
超链接
- 当浏览者点击链接时，可以直接转向对应的网页、图片、文件或邮箱等资源。当链接的文件类型为压缩文件时，出现文件下载。
- 格式：
< a href=" " target=" ">链接内容</ a> - target用于指定链接页面的打开方式，取值如下多种：
1、_self为默认值，表示当前窗口打开
2、_blank表示新窗口打开 - 常见的超链接有以下几种类型：
文本链接、锚点链接、图像链接、图像热区链接、空链接和JavaScript链接。 - 通过创建锚点链接，用户能够快速定位到目标内容。先使用
<a name="锚点名">创建锚点，然后使用< a href="#锚点名">链接至锚点。 - 图片热区链接是指在同一个图片中不同的部分链接到不同的目标位置，比一般的图片链接更加灵活，在DW中易于设计和实现。
- 空链接是尚未指派的链接：
< a href="#" >链接内容</ a>
JS链接指的是：< a href="#" onclick="JS脚本或方法">链接内容</ a>
target属性
属性target有多种取值：
- _blank（在新窗口中打开被链接文档）
- _self（默认值，在相同的框架中打开被链接文档）
- _parent（在父框架集中打开被链接文档）
- _top（在整个窗口中打开被链接文档）
- frameName（在指定的框架中打开被链接文档）
列表标签
无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。语法格式如下：
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
有序列表
有序列表即有排列顺序的列表，其各个列表项按照一定的顺序排列定义。有序列表的语法格式如下：
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
图像标签
- 在页面中，使用< img />标签向HTML文档中添加一幅图像。
- 格式：
< img src="url" width=" " height=" " alt=" " title=" " /> - 必填属性src，其值为图像文件路径。
- 任选属性with和height，指定文件的宽度和高度。否则，按照图像的实际宽度和高度显示。
- 任选属性title，其值是鼠标位于图像上时的提示文本。
- 任选属性alt用于浏览器无法显示图像时，该属性值作为图像的替代文本，以便搜索引擎对页面进行索引。
3.1.2 表格及表单
表格定义
创建表格的基本语法：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table>用于定义一个表格，主要属性如下：
| 属性名 | 含义 |
|---|---|
| border | 表示表格外边框的宽度 |
| height | 表示表格的高度 |
| align | 表示表格的显示位置：left居左显示；center居中显示；right居右显示 |
| cellspacing | 单元格之间的间距 |
| cellpadding | 单元格内容与边框的显示距离 |
| width | 表示表格的宽度 |
<caption>主要属性如下：
| 属性名 | 含义 |
|---|---|
| top | 表示标题放在表格的上部 |
| bottom | 表示标题放在表格的下部 |
| left | 表示标题放在表格的左部 |
| right | 表示标题放在表格的右部 |
<tr>主要属性如下： |
|
| 属性名 | 含义 |
| – | – |
| bgcolor | 属性用来设置背景颜色 |
| align | 属性用来设置垂直方向对齐方式 |
| valign | 属性用来设置水平方向对齐方式 |
<td>和<th>都是单元格的标记，其必须嵌套在<tr>标记中，成对出现。<th>是表头标记，<th>中的文字会被默认加粗，而<td>不会，<td>是数据标记，表示该单元格的具体数据。两者的标记属性是一样的：
| 属性名 | 含义 |
|---|---|
| bgcolor | 属性用来设置背景颜色 |
| align | 属性用来设置垂直方向对齐方式 |
| valign | 属性用来设置水平方向对齐方式 |
| rowspan | 设置单元格所占行数 |
| colspan | 设置单元格所占列数 |
表单
- Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息。
- 表单主要分为表单标签和表单控件。其中，表单控件又可细分为文本域和按钮控件。
- 常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等。
- 在表单域录入数据后，可通过表单的特殊控件来处理。submit提交按钮将数据传递给服务器端程序处理；button命令按钮将数据交给JS程序处理；reset按钮用于清空文本域数据。
表单标签
- 表单属性action用于指定表单处理程序。处理程序使用某种服务端脚本语言编写，如php、C#或Java等。不指定时，默认由当前页面处理。
- 表单属性method用于指定表单提交方式，取值post或get。get提交方式将数据作为URL的一部分发送给服务器，URL由地址部分和数据部分构成，两种之间用问号“？”隔开，数据以“名称=值”的方式成对出现，且数据与数据之间通过“&”符号进行分割；post提交方式将数据隐藏在HTTP的数据流中进行传输；请求数据不会出现在地址栏中，安全性比get方式要高，并且对数据长度没有限制。
- 表单属性onsubmit用于向服务器提交数据之前，执行其指定的JavaScript脚本程序，用以实现客户端数据的有效性验证。
- 表单属性enctype用于指定表单数据类型。当表单包含文件域时，需要指定为multipart/form-data。否则，使用默认值
表单域
- 表单域多用于收集网站访问者的信息，它们位于与标签之间。
- 表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素。
- 表单域需要使用属性name （当元素不唯一时使用）或id（当元素唯一时使用），以便表单处理程序按名获取元素值。
- 除多行文本框和列表选择框外，大部分表单域使用标签来创建，类型由type属性值决定。
- 对于文本框等表单域，属性value用于设定默认值。
- 当表单域个数较多时，可使用标签进行分组（内嵌标签呈现组标题）
表单域代码
文本框：<input type="text" id="un"…/>
密码框： <input type= "password" id="pwd"…/>
隐藏域： <input type= "hidden" id="hzd"…/>
多行文本框：<textarea id="textarea" rows="3" cols="25"></textarea>
文件选择框：<input type="file" id="filezd"…>
单选按钮：<input type="radio" name="ah" value="01"> 优秀
<input type="radio" name="ah" value="02"> 良好
……
复选框： <input type="checkbox" name="ah" value="ah01"> 唱歌
<input type="checkbox" name="ah" value="ah02"> 打球
……
列表选择框：<select id="city">
<option value="se1">北京</option>
<option value="se2">上海</option>
……
</select>
注意:
(1)为了保证一组单选按钮选择时互斥，必须指定相同的name属性值。
(2)单选按钮提交的值是value属性值。
(3）隐藏域实现数据的隐式提交
(4）文件选择框实现了文件的浏览选择方式。
(5)复选框并不要求name属性值相同，这不同于单选按钮。通常设置一组复选框具有相同的name值，只是为了方便形成数组来处理。
(6)复选和列表选择提交的值也是value属性值。
(7)对于单选和复选，使用属性checked=“checked” 用于指定该项默认被选中，也可以简写成checked；而列表选择的默认选中使用属性selected。
按钮控件
表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，还用于触发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮。
提交按钮 <input type="submit" value="提交" />
重置按钮 <input type="reset" value="重置" />
图像按钮<input type="image" src="图片文件名"/>
普通按钮 <input type="button" value="提交" onclick="JS方法"/>
下期预告：CSS样式基础知识，感谢你的观看