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>