HTML 总结
一、HTML概述
HTML 指的是超文本标记语言
- 超文本：是指页面内可以包含图片、链接、声音,视频等内容。
- 标记：标签(通过标记符号来告诉浏览器网页内容该如何显示)
二、HTML的基本语法
1.Head标签
包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>
2.html的基本结构
如图所示：
注：
- <html>…</html>标签标记 HTML 文档的开始和结束
- <head>…</head> 标签包括标题和其他说明信息
- <body>…</body> 标签包含文本、图像和链接
代码示例如下：
<!--
声明html语言的版本 html5
-->
<!DOCTYPE html>
<!--
html标签是标记语言中根标签
-->
<html>
<!-- head 头 -->
<head>
<meta charset="utf-8" /><!-- 设置解析网页的字符集 -->
<title>百度一下,你就知道</title>
<link href="img/baidu.ico" rel="icon"/>
</head>
<!-- 网页的身体 -->
<body bgcolor="green">
<b>网页的内容都写在body中</b>
<b>网页的内容都写在body中</b>
<!--
标签结构:
<开始标签> 标签体 </结束标签> 闭合标签(封闭的区间) 双标签
<标签名 /> 自闭和 标签,没有修饰的内容,只是完成某个功能 单标签
-->
aaa
<br/>
bbb
<!--
标签的属性: 可以通过改变标签属性,设置标签显示的格式
属性必须写在开始标签中
属性格式 属性名="值"
一个标签中可以写多个属性
-->
<font color="red" size="7">百度</font>
新浪 腾讯
</body>
</html>
3.标签
HTML中的标记指的就是标签。
HTML使用标记标签来描述网页。
结构：
- <标签名>标签内容</标签名> 闭合标签(有标签内容)
- <标签名/> 自闭合标签 (无标签内容)
4.标签属性
标签可以拥有属性，属性进一步说明了该标签的显示或使用特性。
e.g.：<body text=”red”>
注：
- 属性的格式 ：属性名 = “属性值“
- 属性的位置：<标签名 属性名 = “属性值“ > xxx </标签名>
- 添加多个属性：<标签名 属性名 = “属性值“ 属性名 = “属性值“ > xxx </标签名>
三、基本常用标签
- 标题标签
<h1> </h1>…..<h6> </h6> - 段落标签
<p> </p> - 换行标签
<br/> - 列表
- 无序列表 <ul><li> </li></ul>
- 有序列表 <ol><li> </li></ol>
- 超链接
<a> </a> - 图像标签
<img/>
代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
标题标签
<!--
<h1></h1>.... h6 每一个标题标签会独占一行
align="left / center /rigth" 控制标签内容在标签体中水平对齐方式
-->
<h1 align="center">
<font color="red">1级标题</font>
</h1>
<h2 align="right">2级标题</h2>
<h3>3级标题</h3>
<!-- 标尺线-->
<hr/>
段落标签
<!--
p 表示一个段落 段落与段落之间有间隔的
-->
<p align="center">
报道说，根据美国联邦航空局的记录，这是一架波音737-9 MAX飞机，两个月前获得认证并从装配线下线。美国联邦航空局没有立即回应置评
</p>
<p align="right">
波音公司刚刚在X平台上回应，“我们获悉涉及阿拉斯加航空AS1282航班发生的事故。我们正努力收集更多信息并与我们的航空公司客户联系。波音技术团队随时准备支持调查。”
</p>
<p >
波音公司刚刚在X平台上回应，“我们获悉涉及阿拉斯加航空AS1282航班发生的事故。我们正努力收集更多信息并与我们的航空公司客户联系。波音技术团队随时准备支持调查。”
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
列表
无序列表
<ul type="square">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
有序列表
<ol type="1">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
超链接
<!--
href="网页的地址"
target="_blank" 在新窗口打开目标网页
target="_self" 在当前窗口打开一个新网页 默认的
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="index.html" target="_self">index</a>
<hr/>
<img src="img/1.png" width="150" height="100" border="1"/>
<a href="http://www.nike.com">
<img src="img/2.png"/>
</a>
</body>
</html>四、特殊符号转义
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
e.g.：比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html 签 。
为了可以使用这些预留字符，我们必须在html中使用字符转义 。
常见字符转义：
代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
在网页中有些符号不能直接显示的,
需要通过其他的符号进行代替,这些代替的符号称为转义符
-->
<b> 标签的功能是加粗 文字
<hr/>
®
©
</body>
</html>五、表格
1.基本结构
2.表格常见属性
width、height、cellspacing、cellpadding、align、valign、cospan、rowspan
3.表格代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table-- 表格标签
border="1" 边框宽度
width="400" 表格宽度
cellspacing="0" 设置单元格与单元格之间的距离
cellpadding="0" 设置单元格内容到边框的距离
tr -- 表格行
align="left / center / right" 水平位置
valign="top / middle /bottom" 垂直位置
th -- 单元格(表头 居中 加粗)
td -- 普通的单元格
align="center"
valign="middle"
表格中的内容只能放在单元格
-->
<table border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="red">
<th width="150" height="50" >姓名</th>
<th width="100">语文</th>
<th width="100">数学</th>
<th width="100">英语</th>
</tr>
<tr>
<td bgcolor="green" height="50" align="center" valign="middle">张三</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr align="center" valign="bottom" height="50">
<td>王五</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
colspan="4" 跨多列合并 从哪个合并,就在哪个单元格中添加colspan="4",删除多余的单元格
rowspan="2" 跨多行合并 从哪个合并,就在哪个单元格中添加rowspan="4",删除多余的单元格
-->
<table border="1" width="400" height="300">
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>六、表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。
1.表单提交
2.文本
3.密码框
4.单选按钮
5.复选框
注：
- 单选框通过name属性来分组，name相同是一组才可实现单选。
- 单选和复选不能输入内容，所以必须指定value的值。
6.文件选择框
注： accept=“.文件后缀名,.文件后缀名… “ 限制文件类型
7.下拉框
下拉框基本语法：
注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。
8.多行文本域
9.按钮
10.表单代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
用户名<input type="text" />
<br>
密码<input type="password"/>
<br>
性别<input type="radio" name="AA"/>男
<input type="radio" name="AA"/>女
<br>
省份<select>
<option>北京</option>
<option>陕西</option>
<option>河南</option>
</select>
<select>
<option>北京</option>
<option>陕西</option>
<option>河南</option>
</select>
<br>
编程语言 <input type="checkbox" name="BB"/>AA
<input type="checkbox" name="BB"/>BB
<input type="checkbox" name="BB"/>CC
<input type="checkbox" name="BB"/>DD
<br>
上传头像<input type="file" />
<br>
建议<textarea cols="30" rows="5"></textarea>
<br>
<input type="submit" value="登录" />
</form>
</body>
</html>