一、HTML概述
HTML (Hyper TextMarkupLanguage) 中文译为“超文本标记语言”，主要是通过HTML的预定义标签对网页中的文本，图片，声音等内容进行描述修饰。
HTML之所以称为超文本标记语言，不仅是因为他通过标签描述网页内容，同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。从而构成了丰富多彩的Web页面。
单来说HTML主要是用于制作静态页面的，告诉浏览器文本内容需要以怎么样的样式显示在浏览器页面中，因此HTML文件需要有浏览器进行解析加载。
五大浏览器、四大内核
IE ：trident
火狐：gecko
谷歌：Blink
苹果：Webkit
欧朋：Blink
不同的浏览器，使用的内核可能是不同的，内核对页面标签的渲染是不同的，这就导致了同一个页面在不同的浏览器上边显示的不完全一样。
WEB标准
万维网联盟组织(w3c)：用来制定web标准的机构（组织）
web标准：制作网页要遵循的规范
web标准规范的分类：
- 结构标准: html 制作静态页面，并且HTML文件对大小写不敏感。
- 表现标准: css 美化页面
- 行为标准: JavaScript 动态页面
二、第一个页面
学习任何一门语言，都要首先掌握它的基本格式。下面的HTML文件的基本格式
<!--
1、这是HTML的注释
2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3、HTML不区分大小写，语法松散不严格。
-->
< !DOCTYPE html >
<!--
html文件的根标签
lang="en"：lang表示language, en是english的意思。这个主要是给搜索引擎看的，搜索引擎不会去判断
该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响
-->
<html lang="en">
<!--头部标签，用来定义头部信息,用来封装其他位于文档头部的标记,类似于配置信息 -->
<head>
<!-- 设置HTML文件使用的字符集编码表 -->
<meta charset="UTF-8">
<!-- 网页标题标签 -->
<title>网页的标题</title>
</head>
<!-- html身体标签,需要显示在页面上的内容,都定义在body标签中 -->
<body>
网页的主体内容，欢迎学习HTML！
</body>
</html>
什么是标签
标签在HTML中使用<>表示，是HTML预定义好的元素，主要是作用是用来修饰渲染文本内容，告诉浏览器文本内容应该以怎么样的样式在页面显示。标签又分为双标签和单标签。
双标签的语法格式：<tagName 属性=值, 属性=值...>文本内如</tagName>
单标签的语法格式：<tagName 属性=值, 属性=值... />，只有开始标签，没有结束标签。
标签中可以定义属性，双标签的开始标签和结束标签中间可以定义文本内容，标签属性和文本都属于当前标签的子对象。
另外标签之间也可以相互嵌套，一旦嵌套则存在子父标签的关系。
三、常用标签
注释标签：<!-- 注释内容 -->
标题标签：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
段落标签：<p>段落内容</p>
换行标签：<br/>
水平线标签：<hr/>
span标签：<span>文本</span>，定义行内区域，一般用来充当文本容器控制文本样式。
div标签：<div>文本</div>，定义块级区域，一般用来网页页面的布局。
sup标签：10<sup>2</sup> 102
sub标签：10<sub>m</sub> 10m
字体标签：<font color="red" size="10"></font>字体标签
四、文本格式化标签
文本加粗标签：<b>文本</b> <strong>文本</strong> 文本 文本
文本斜体标签：<i>文本</i> <em>文本</em> 文本 文本
删除线标签：<s>文本</s> <del>文本</del> 文本 文本
下划线标签：<u>文本</u> <ins>文本</ins> 文本 文本
预留格式：</pre>文本</pre> 保留了空格和换行。
五、特殊字符
在HTML页面中有一些特殊的字符，无法直接显示，如：<>尖括号在HTML中表示标签的意思，无法直接显示在页面上，需要通过特殊字符代替。
六、a超链接标签
超链接标签的主要作用是实现页面的跳转。
- 可以跳转到其它的HTML页面，
- 可以跳转到指定的URL网络页面，
- 可以实现本页面指定位置的跳转。语法：
<a href="需要跳转的目标页面或位置">文本描述</a>
href属性：hot references 热引用
title属性：标放到超链接上显示的文字
target属性：
在HTML中target目标的四个参数的用法：
target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同窗口打开。target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。
当网页没有框架时，target=“_self"和target=”_parent"以及target="_top"三种方式的显示方式几乎相同。
锚链接
定义锚点其实就是在页面中创建一个定位点，当我们想要在其他地方跳转到这个定位点时，只需要创建一个定位到这个定位点的锚链接，就可以直接跳转到该定位点，这样就不需要通过鼠标滚动页面来寻找我们需要的信息了。
首先，在 HTML 文档中使用 id 属性定义一个锚点（也就是一个定位点）。
然后，我们在同一个文档中创建指向该锚点链接，也可以在其他页面中创建指向该锚点的链接。最后只需要将 # 符号和锚点的名称添加到 URL 的末尾，就可以链接到这个锚点了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点跳转</title>
</head>
<body>
<a href="#jqjs">剧情简介</a>
<a href="#yzyb">演职员表</a>
<a href="#hjjl">获奖记录</a>
<a href="#zzfx">制作发行</a>
<a href="#yppj">影片评价</a>
<a href="#mhhx">幕后花絮</a>
<h1 id="jqjs">剧情简介</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="yzyb">演职员表</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="hjjl">获奖记录</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="zzfx">制作发行</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="yppj">影片评价</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="mhhx">幕后花絮</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
注意事项
暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href=“#”)，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
七、img图片标签
图片标签的主要作用是将图片显示到页面上，图片的指定是通过路径的方式，语法如下：
<img src="../images/1.png" alt="图片加载失败替代的文字" />
src属性：图片的路径来源
alt属性：图片加载失败时的的替代文字
title属性：鼠标悬停图片时显示的文字
width属性：设置图片的宽度
height属性：设置图片的高度
border属性：设置图片的边框
八、列表标签
列表又分为：有序列表，无序列表和自定义列表，一般对样式设置后用于导航的使用。
有序列表
<!--
有序列表:
<ol type="列表样式属性">
<li>列描述</li>
<li>列描述</li>
<li>列描述</li>
</ol>
-->
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>梨子</li>
</ol>
无序列表
<!--
无序列表:
<ul type="列表样式属性 disc | circle | square">
<li>列描述</li>
<li>列描述</li>
<li>列描述</li>
</ul>
-->
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>梨子</li>
</ul>
自定义列表
<!--
自定义列表:
<dl>
<dt>名词</dt>
<dd>描述</dd>
<dd>描述</dd>
<dt>名词</dt>
<dd>描述</dd>
<dd>描述</dd>
</dl>
-->
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>橘子</dd>
<dd>香蕉</dd>
<dt>动物</dt>
<dd>小狗</dd>
<dd>小猫</dd>
<dd>小鸡</dd>
</dl>
九、table表格
HTML页面中的表格和我们工作中使用的Excel表格基本类似，有行有列。语法：
<!--
表格标签需要通过3个标签来组合实现: <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。
<table></table>：用于定义一个表格。
<tr></tr>：用于定义表格中的一行，表格中可以有多行。
<td></td>：用于定义表格中的单元格，一行中可以有多个单元格。
-->
<table>
<tr>
<td>单元格中的文字</td>
<td>单元格中的文字</td>
</tr>
<tr>
<td>单元格中的文字</td>
<td>单元格中的文字</td>
</tr>
</table>
| 单元格中的文字 | 单元格中的文字 |
| 单元格中的文字 | 单元格中的文字 |
表格属性
普通表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table align="center" border="1px" width="200px" height="100px" cellspacing="0" cellpadding="5px">
<tr align="center">
<td><b>编号</b></td>
<td><b>姓名</b></td>
<td><b>年龄</b></td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
</body>
</html>
| 编号 | 姓名 | 年龄 |
| 1 | 张三 | 18 |
| 2 | 李四 | 19 |
| 3 | 王五 | 20 |
表格的跨行和跨列
跨行属性：<td rowspan="跨行数"></td>
跨列属性：<td colspan="跨列数"></td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table align="center" border="1px" width="200px" height="100px" cellspacing="0" cellpadding="5px">
<tr align="center">
<td><b>编号</b></td>
<td><b>姓名</b></td>
<td><b>年龄</b></td>
</tr>
<tr align="center">
<td rowspan="2">1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr align="center">
<td>李四</td>
<td>19</td>
</tr>
<tr align="center">
<td colspan="3">3</td>
</tr>
</table>
</body>
</html>
| 编号 | 姓名 | 年龄 |
| 1 | 张三 | 18 |
| 李四 | 19 | |
| 3 | ||
十、form表单
form表单一般用于注册页面或者信息的修改页面等场景，通过form标签实现。主要是作用是将用户提供的信息提交到服务器端。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等一般都会包含在一对<form></form>标签中。语法：
<form>
<input type="组件信息">
</form>
hidden控件：隐藏域控件，页面上看不到，但提交表单时会提交数据
readonly：只读，不能修改，提交表单时数据会提交
disabled：只读，不能修改，提交表单时数据不会提交
提示信息
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
<!--
1.Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收 并处理表单数据的服务器程序的url地址。
2.method 用于设置表单数据的提交方式，其取值为get或post。
3.name 用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
-->
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
其它常用标签组件
下拉菜单：使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
文本域：如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
label 标签
label 标签为 input 元素定义标注（标记）。
作用：绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
<!-- for 属性规定 label 与哪个表单元素绑定。 -->
<label for="user">User</label>
<input type="text" id="user">
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
name属性:只有设置了name属性的标签数据才会提交到后台服务器
针对于需要用户录入的信息，提交的就是用户录入的数据。
针对于需要用户选择的信息，提交的则是value属性的值。
checked属性:单选按钮和多选按钮中使用表示被默认选择
selected属性:下拉框中使用表示被默认选择
placeholder属性:输入框中的提示信息
-->
<form action="" method="get">
<table align="center">
<tr>
<td><label for="user">请输入账号</label></td>
<td><input type="text" name="username" id="user"></td>
</tr>
<tr>
<td>请输入密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>请确认密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>请选择性别</td>
<td>
<input type="radio" name="sex" value="man" checked="checked"> 男
<input type="radio" name="sex" value="women"> 女
</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<input type="checkbox" name="aiHao" value="zq"> 足球
<input type="checkbox" name="aiHao" value="lq" checked="checked"> 篮球
<input type="checkbox" name="aiHao" value="ppq"> 乒乓球
<input type="checkbox" name="aiHao" value="ymq" checked="checked"> 羽毛球
<input type="checkbox" name="aiHao" value="wq"> 网球
</td>
</tr>
<tr>
<td>选择区域</td>
<td>
<select>
<option>请选择</option>
<option>北京</option>
<option selected="selected">上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>资料上传</td>
<td><input type="file"></td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="普通按钮">
<input type="reset">
<input type="submit">
<input type="image" src="images/1.jpg" height="80px">
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
