HTML 总结

htmledit_views">

一、HTML概述

HTML 指的是超文本标记语言

超文本：是指页面内可以包含图片、链接、声音,视频等内容。
标记：标签(通过标记符号来告诉浏览器网页内容该如何显示)

二、HTML的基本语法

1.Head标签

包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>

2.html的基本结构

如图所示：

注：

<html>…</html>标签标记 HTML 文档的开始和结束
<head>…</head> 标签包括标题和其他说明信息
<body>…</body> 标签包含文本、图像和链接

代码示例如下：

html"><!-- 声明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/>
列表
1. 无序列表 <ul><li> </li></ul>
2. 有序列表 <ol><li> </li></ol>
超链接
<a> </a>
图像标签
<img/>

代码示例如下：

html"><!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>

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>

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中使用字符转义。

常见字符转义：

代码示例如下：

html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 在网页中有些符号不能直接显示的,需要通过其他的符号进行代替,这些代替的符号称为转义符-->&lt;b&gt; 标签的功能是加粗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文字<hr/>&reg;&copy;</body>
</html>

五、表格

1.基本结构

2.表格常见属性

width、height、cellspacing、cellpadding、align、valign、cospan、rowspan

3.表格代码示例

html"><!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>

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.表单代码示例

html"><!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>