什么是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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""> （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>
作者：饥人谷_师叔
链接：https://www.jianshu.com/p/512cb05b5942
共同学习，写下你的评论
评论加载中...
作者其他优质文章
