什么是HTML
超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
1. HTML基础语法
1.1 标记语法
（1）封闭类型标记.也称双标记，必须成对出现
<标记>内容</标记>
（2）非封闭类型的标记,也叫做空标记/单标记
<标记> 或 <标记/>
例如：
<a href=“www.baidu.com” id=“baidu-link”>百度一下</a>
其中：a为标签名，也叫元素；
href，id为属性；
双引号中的值为属性值
元素
指尖括号及尖括号间所包围的内容部分，元素可以包含文本内容和其他元素，也可以是空的
a.包含文本内容：<p>这是一段文本</p>
b.元素嵌套：形成更为复杂的语法
c.空标记<b></b>
属性和值
属性是用来修饰元素的
<标记 属性="值" 属性="值">
ex:<p align="center" id="p1"></p>
【常用的标准属性】
id： 定义元素在页面中的唯一标识
title：鼠标移入到元素上时提示的文本
class：样式相关，定义元素引用的类选择器
style：样式相关，定义元素的行内样式
1.2 文档结构
文档结构首先会有文档说明<!DOCTYPE html>，然后在下面开始HTML页面，如下所示
<!DOCTYPE html> <!--我是定义页面类型及风格的-->
<html lang="en"> <!--HTML页面开始，且语言为英文-->
<head> <!--紧跟在html之后，是html中的首个子元素-->
<meta charset="UTF-8"> <!--定义网页的编码格式为UTF-8-->
<title>Document</title> <!--定义网页标题-->
</head>
<body>
<!--页面主体内容-->
</body>
</html>
2 常用标签及属性
2.1 <a>标签
<a>标签的作用: 就是用于控制页面与页面之间跳转的
<a>标签的格式:
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a>标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转
<a href="http://qq.com" target="_blank">blank QQ</a> <!--在新的标签页（选项卡）中打开腾讯首页-->
<a href="http://qq.com" target="_self">self QQ</a> <!--若指定区域则在当前区域中打开腾讯首页-->
<a href="http://qq.com" target="_parent">parent QQ</a> <!--在父标签区域中打开腾讯首页-->
<a href="http://qq.com" target="_top">top QQ</a> <!--若指定区域则在当前页面中打开腾讯首页-->
上面的_self可看到如下图所示，是在当前指定的iframe区域打开
iframe-3.png
<a>里面的伪协议（假链接）常见有三种：
#javascript- （不要怀疑，我就是空）因为没跳转，只是刷新，也归为假链接
具体示例如下：
<a href="#">点我没用啊</a> <!--点了就自动回到页面顶部:-->
<a href="javascript:">点我没用啊</a> <!--点了没反应，就左下角出个javascript:-->
<a href="javascript: alert(你错了哟);">点我没用啊</a> <!--点了弹出个1的提示-->
<a href="">点我没用啊</a> <!--点了后刷新当前页面-->
其中javascript的这个如下图所示
iframe-4.png
2.2 <form>标签
前言：<a>标签与<form>标签都是跳转页面，但是前者是HTTP GET请求，后者是HTTP POST请求，因为是要POST，所以就要有提交按钮，这里就将 <form>标签与<input>放在一起说明
由<form>定义，将用户输入的数据提交给后台。
【常见属性】
action：提交的服务器地址
method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
name：定义表单名称，JS用到的比较多
id： 独一无二的标识
如：<form action="users" method="get/post"> </form>
<input>元素
【主要属性】
type：根据不同的type属性值可以创建各种类型的输入字段
value：最终提交给服务器的值
name：控件的名称，提供给服务器使用，没有name，控件则无法提交
id：唯一标识，只能在当前页面使用，服务器不能用
disabled：禁用，不能被提交
<input>元素的主要控件
（1）文本框：<input type="text"> <!--明文输入-->
（2）密码框：<input type="password"> <!--暗文输入-->
【专有属性】
maxlength：限制输入的字符数，取值：数字
readonly：设置文本控件只读
（3）单选按钮：<input type="radio"> <!--爱我还是不爱我-->
（4）复选框：<input type="checkbox"> <!--喜欢吃哪些美食-->
【专有属性】
checked，设置默认被选中
（5）提交按钮：<input type="submit">
（6）重置按钮：<input type="reset">
（7）普通按钮：<input type="button"> <!--当有这个定义时，button点了没反应，没有定义的时候，自动升级为submit-->
（8）图片按钮：<input type="image" src="">
（9）隐藏域：<input type="hidden">
（10）文件选择框：<input type="file">
form /input 及button实例
当我们使用form进行提交，比如输入用户名及密码，如下图
input-1.png
前面我们提到button有2个定义，图中的案例有2个，点我/还点我，当点击前者的时候，是默认自动提交，当点击后者的时候是什么反应也没有
form对应的请求就会比a标签多一个数据，就是用户名及密码，如下图
这里需要注意，当使用的是HTTP协议的时候，别的人可以截取到我们的用户名及密码信息，所以要注意在https：//x'x'x里面输入账户及密码是相对安全的
form标签-7.png
input 多选/单选及实例
多选控件checkbox，定义name之后，可以复选
单选空间radio，定义name之后，只能是单选，如果没有定义，就会出现yes和no都可以点，但是点了之后无法取消的bug
喜欢的水果
<input type="checkbox" name="fruit" value="orange">西瓜 <!--checkbox-->
<input type="checkbox" name="fruit" value="banana">香蕉
爱我么
<input type="radio" name="loveme" value="yes">Yes
<input type="radio" name="loveme" value="no">No
相对应的，还有选择分组之类的，这个时候就需要
select
<select name="group" multiple> <!--加multiple是为了可以多选，但是不好看，需要摁住shift才能多选-->
<option value="">-</option> <!--没有值-->
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option> <!--无法被选中-->
<option value="" selected>第四组</option> <!--默认选中-->
</select>
2.3 <textarea>标签
作用: 定义一个多行输入框
格式:
<textarea>
</textarea>
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的
2.4 <table> 标签
由<table>元素定义。
【标签】<table></table>
【属性】
width ：设置表格的宽度
height：设置表格的高度
align：设置表格的对齐方式，取值: left/center/right
border：设置表格边框宽度
cellpadding：内边距（单元格边框与内容之间的距离）
cellspacing：外边距（单元格之间的距离）
bgcolor：设置表格的背景颜色
table中包含的子元素
【标签】<tr></tr> （创建表行）
【属性】
align：该行内容水平对齐方式，取值: left/center/right
valign：该行内容的垂直对齐方式，取值: top/middle/bottom
bgcolor：设置表格的背景颜色
【标签】<td></td> （创建单元格）
【属性】
align：内容水平对齐方式
valign：内容垂直对齐方式
width ：宽度
height ：高度
【标签】<caption></caption> （表格标题）
【标签】<th></th> （列标题）
行标题或列标题，字体有加粗的效果，放在tr中
【标签】<thead></thead> （表头）
【标签】<tbody></tbody> 表主体）
【标签】<tfoot></tfoot> （表尾）
完整的表格代码示例
<caption>标题文本</caption>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
网友评论