一、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>
