一,HTML标签的分类
1,单标签和双标签
2,内联标签:span,b,u,i,a,img
块级标签:h1~h6,p,div,hr,ul,ol,li
二,常用标签
1,head内常用标签
标签 | 含义 |
<title></title> | 定义网页标题 |
<style></style> | 定义内部样式表 |
<script></script> | 定义JS代码或引入外部JS文件 |
<link/> | 引入外部样式表文件 |
<meta/> | 定义网页原信息 |
2,<h1>~<h6>:HTML标题
实例
<h1>Hello HTML</h1> <h2>Hello HTML</h2> <h3>Hello HTML</h3>
3,<p>:HTML段落
实例
<p>这是一个段落</p>
4,<a>:HTML链接
实例
<a href="http://www.baidu.com" target="_blank">点击跳转百度首页</a>
注:target:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页(默认)
5,<img>:HTML图像
实例
<img src="test.jpg" alt="加载失败" title="test" width="100" height="100">
注:src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
6,<div>和<span>标签
<div>和<span>标签本身就像白纸一样,并无实际的意义。主要通过CSS样式为其赋予不同的表现。是一个很重要且很常用的标签。而<div>为块级标签,可独占一行,而<span>为内联标签,其长度由内容长度决定。
7,其他常用标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <!--换行--> <br> <!--水平线--><hr>
三,表格
基本结构
<table> <thead> <tr> <th>ID</th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>tong</td> <td>18</td> </tr> <tr> <td>2</td> <td>ni</td> <td>18</td> </tr> </tbody> </table>
常用属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
四,列表
1,无序列表(最为常用)
实例
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
注:type属性
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式
2,有序列表
实例
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
注:type属性
- 1 数字列表,默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
3,标题列表
实例
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
五,form表单
表单中的所有内容必须写在form标签中
表单属性:
- action :规定向何处提交表单的地址(URL)(提交页面)。
- autocomplete:规定浏览器应该自动完成表单(默认:开启)。
- enctype:规定被提交数据的编码(默认:url-encoded)。
- method:规定在提交表单时所用的 HTTP 方法(默认:GET)。
- name:规定识别表单的名称(对于 DOM 使用:document.forms.name)。
- novalidate:规定浏览器不验证表单。
1,input标签
实例
<form> <p>用户名<input type="text"></p> <p>密码<input type="password"></p> </form>
注:type属性
type属性值 | 表现形式 |
text | 单行输入文本 |
password | 密码输入框 |
date | 日期输入框 |
checkbox | 多选框 |
radio | 单选框 |
submit | 提交按钮 |
reset | 重置按钮 |
button | 普通按钮 |
hidden | 隐藏输入框 |
file | 文本选择框 |
注:
- name:表单提交时的“键”,注意和id的区别
- value:表单提交时对应项的值
- type="button", "reset", "submit"时,为按钮上显示的文本年内容
- type="text","password","hidden"时,为输入框的初始值
- type="checkbox", "radio", "file",为输入相关联的值
- checked:radio和checkbox默认被选中的项
- readonly:text和password设置只读
- disabled:所有input均适用
2,select标签(下拉菜单)
实例
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
注:
- multiple:布尔属性,设置后为多选,否则默认单选
- disabled:禁用
- selected:默认选中该项
- value:定义提交时的选项值
3,textarea标签(多行文本)
实例
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
注:
- name:名称
- rows:行数
- cols:列数
- disabled:禁用
4,label标签
实例
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
- for 属性值应当与相关元素的 id 属性值相同。
- label标签不会向用户呈现任何特殊效果,可以没有,但是为了语义化最好加上。