HTML介绍及常用标签

1. HTML简介

超文本标记语言

Hyper(超)Text(文本)MarKup(标记)Language(语言)

HTML是一门标记语言，标记语言就是靠标签组成，学习HTML就是学习标签的使用

HTML代码在执行过程中是从上往下执行的

什么是标签

1. 由尖括号包裹单词构成，所以标签不可能以数字开头
2. 不区分大小写，推荐小写
3. 标签可以嵌套，不能交叉嵌套

2. 常用标签

初始标签

1. title:标题标签

2. head:头部标签

3. ​body:主体标签

常见标签

• h1-h6:文章标题
• p:段落标签
• span:用来组合文档中的行内元素
• strong/b:加粗
• i:斜体
• s:删除线

块状标签和内联标签(行内标签)

• 块状：霸道 独占一行，前后自动换

• 行，可以设置宽高

• 内联(行内)：在一行直到满了为止换行

列表

• 有序列表：ol li

• 无序列表：ul li

• 定义列表：dl dt dd

图片

src = 图片

../ 相对路径

直接从电脑的是绝对路径

超链接(a标签)

<a href=" " target=" " title=" " >

• href = 跳转的路径
• target 打开方式，默认 self 在本身打开，blank 在新的空白页面打开
• title 鼠标下方提示文本

特殊标签

• &nbsp 空格
• &lt 小于
• &gt 大于
• &emsp 字符宽

表格(table)

• table:表格标签
• thead:表格头部
• tbody:表格主题
• tfoot:表格脚部
• tr:行
• td:列
• colspan:合并列
• rowspan:合并行

表单(from)

<from action=" " method=" " >

• action:提交到的路径

• method:提交的方式

  ​ 默认值是 get ，会在地址栏显示安全性较差，对于提交的内容有长度限制

  ​ post 不会显示在地址栏相对安全，对于提交的内容没有长度限制

input标签

• 文 本 框:

  <input type="text" value="" maxlength="可输入的最大长度" size="" />

• 提交按钮:

  <input type="submit" value="提交" />

• 普通按钮:

  <input type="button" value="普通按钮" />

• 密 码 框:

  <input type="password" />

• 重置按钮:

  <input type="reset" value="重置" />

• 单选按钮:

  <input type="radio" />name必须设置成一样的,表示是一组单选按钮 checked="checked"默认选中

• 文件上传域:

  <input type="file"/>

• 多选按钮:

  <input type="checkbox" />name可以设置成不一样的,要求设置成一样的

• 下 拉 框:

  <select><option></option></select>

• 多行文本域:

  <textarea  rows="行" cols="列"></textarea>

• 隐 藏 域:

  <input type="hidden" />

• 图片按钮:

  <input type="image" src= "" onmouseover/>

3. 扩展

在输入框中输入要搜索的信息，点击”百度一下“则跳转到百度对应的搜索信息，代码如下：

<form action="https://www.baidu.com/s" method="get">
	百度搜索 <input type="text" placeholder="请输入搜索内容" name='wd'>
	<input tpye='submit' name='百度一下'>
</form>