HTML常用标签

什么是HTML

超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

1. HTML基础语法

1.1 标记语法

（1）封闭类型标记.也称双标记，必须成对出现
    <标记>内容
（2）非封闭类型的标记,也叫做空标记/单标记
    <标记> 或 <标记/>
例如：
百度一下
其中：a为标签名，也叫元素；
      href，id为属性；
      双引号中的值为属性值

元素

指尖括号及尖括号间所包围的内容部分，元素可以包含文本内容和其他元素，也可以是空的
a.包含文本内容：

这是一段文本

b.元素嵌套：形成更为复杂的语法
c.空标记

属性和值

属性是用来修饰元素的
<标记属性="值" 属性="值">
ex:

【常用的标准属性】
id：定义元素在页面中的唯一标识
title：鼠标移入到元素上时提示的文本
class：样式相关，定义元素引用的类选择器
style：样式相关，定义元素的行内样式

1.2 文档结构

文档结构首先会有文档说明，然后在下面开始HTML页面，如下所示

  
     
       
      
    Document

2 常用标签及属性

2.1 标签

标签的作用: 就是用于控制页面与页面之间跳转的
标签的格式:

需要展现给用户查看的内容

标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转

blank QQ 
self QQ 
parent QQ 
top QQ

上面的_self可看到如下图所示，是在当前指定的iframe区域打开

iframe-3.png

里面的伪协议（假链接）常见有三种：

#

javascript

（不要怀疑，我就是空）因为没跳转，只是刷新，也归为假链接

具体示例如下：

点我没用啊 
点我没用啊 
点我没用啊 
点我没用啊

其中javascript的这个如下图所示

iframe-4.png

2.2
标签

前言：标签与标签都是跳转页面，但是前者是HTTP GET请求，后者是HTTP POST请求，因为是要POST，所以就要有提交按钮，这里就将标签与放在一起说明
由定义，将用户输入的数据提交给后台。
【常见属性】

action：提交的服务器地址
method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
name：定义表单名称，JS用到的比较多
id： 独一无二的标识
如：

元素

【主要属性】

type：根据不同的type属性值可以创建各种类型的输入字段
value：最终提交给服务器的值
name：控件的名称，提供给服务器使用，没有name，控件则无法提交
id：唯一标识，只能在当前页面使用，服务器不能用
disabled：禁用，不能被提交

元素的主要控件

（1）文本框：  
（2）密码框： 
 【专有属性】
         maxlength：限制输入的字符数，取值：数字
         readonly：设置文本控件只读
（3）单选按钮： 
（4）复选框： 
【专有属性】
         checked，设置默认被选中
（5）提交按钮：
（6）重置按钮：
（7）普通按钮： 
（8）图片按钮： 
（9）隐藏域：
（10）文件选择框：

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

喜欢的水果 
西瓜 
香蕉
爱我么
Yes
No

相对应的，还有选择分组之类的，这个时候就需要select

2.3 `</code>标签</h4> <p>作用: 定义一个多行输入框</p> <p>格式:</p> <pre><code><textarea>`
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的

2.4

 标签由
 
 
元素定义。
 【标签】

 【属性】 
 width ：设置表格的宽度
height：设置表格的高度
align：设置表格的对齐方式，取值: left/center/right
border：设置表格边框宽度
cellpadding：内边距（单元格边框与内容之间的距离）
cellspacing：外边距（单元格之间的距离）
bgcolor：设置表格的背景颜色
 
 table中包含的子元素 
 【标签】 （创建表行）
【属性】
       align：该行内容水平对齐方式，取值: left/center/right
       valign：该行内容的垂直对齐方式，取值: top/middle/bottom
       bgcolor：设置表格的背景颜色

【标签】 （创建单元格）
【属性】
        align：内容水平对齐方式
        valign：内容垂直对齐方式
        width ：宽度
        height ：高度
【标签】 （表格标题）
【标签】 （列标题）
        行标题或列标题，字体有加粗的效果，放在tr中
【标签】 （表头）
【标签】 表主体）
【标签】 （表尾）
 
 完整的表格代码示例 
 标题文本

   
    
      姓名
       性别
    
  
  
    
      张三
      男
    
    
      李四
      女