HTML5常用标签

2023-10-03 16:50:04

主题结构

<!DOCTYPE html>      //不属于html标签，为文档声明标签，在第一行，告诉浏览器html版本为html5
<html lang="en">	//开头，语言为英语，"zh-CN"表示中文，但是可以都显示
<head>				//网页头部
    <meta charset="UTF-8">   //表示字符集种类为UTF-8编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>			//网页名
</head>
<body>						//网页内容
    
</body>
</html>

<h1>内容标题，分6个等级，均独占一行</h1>

<p>内容段落，为一整段</p>

<del>删除线</del>

<em>斜体</em>

<b>粗体</b>

<ins>下划线</ins>

<br />换行

<div>无语义，划分区域，独占一整行,表示一个大区域</div>

<span>无语义，划分区域，可一行被多块分占，表示一个小盒子</span>

特殊字符

空格： 

小于号<：<

大于号>：>

图片标签

<img src = "图片路径" alt = "图片显示失败时显示的文字" title = "鼠标放在图片上时显示的文字" width = 500 hight = 500 border = 15/> //border为图片边框宽度

超链接

<a herf = "http://网址" target = "网址打开方式">超链接描述，文本或者图像</a>

//外部链接中herf必须以http://开头

//herf可以为内部链接，即网站内部页面之间的相互跳转，如herf = “内部新页面.html”

//空链接：herf = "#",表示不跳转，跳转的链接页面还未做好

//下载链接：herf = "文件路径"，通常存放一个文件或者压缩包，如.exe和.zip，点击后会开始下载

//网页元素链接：超链接描述可以是一张图片，文本，音频，表格，视频

//锚点链接：点击标签，可以快速定位到页面中某个位置

锚点链接格式为：herf = "#标题名字"，如<a herf = "#two">第二集</a>

目标位置处设置一个id = 标题名字，如<h3 id = "two">第二集</h3>

//target = "_self"表示在当前标签打开网址， target = "_blank"为在新标签页打开网址

表格标签

<table>
    <tr>
        <td></td>
    </tr>
</table>

<tabel></table>定义表格，为最外层

<tr></tr>定义表格中的行，必须嵌套在<table></table>标签中

<td></td>定义表格中的单元格，必须嵌套在<tr></tr>标签中

<th></th>表头单元格，表头单元格中的文字会加粗居中，可代替<td></td>

table中添加表格属性，属性均添加在<table>中，如<table align = center border = 1></table>

align表示表格相对周围元素的对齐方式，有left，center，right

border表示是否有边框，1表示有，默认没有，即为""

cellpadding表示单元格边缘与其内容之间的像素空白值，默认为1

cellspacing表示单元格之间的空白，默认为2

width表示表格宽度

height表示表格高度

表格结构标签

当表格很长时，可以划分表格区域。

<thead></thead>表格头部标签，用来包括表格第一行的

<tbody></tbody>表格主体标签，用来包括表格表头以外部分

合并单元格

将多个单元格合并为一个，分为跨行合并与跨列合并

跨列合并：<td colspan = "合并的单元格数量"></td>，该单元格为合并的最左边那个

跨列合并：<td rowspan = "合并的单元格数量"></td>，该单元格为合并的最上面那个

合并之后的后面的单元格要删除

列表标签

无序列表

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
</ul>

<ul>标签表示无序列表，<li>标签表示列表项。

每个列表项无顺序，并列。<ul>之间只能放置<li>，<li>之间可以嵌套所有元素。

有序列表

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
</Ol>

<ol>标签表签有序列表，<li>标签表示列表项。

每个列表项按照顺序，并列。<ol>之间只能放置<li>，<li>之间可以嵌套所有元素。

自定义列表

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
</dl>

<dl>为定义描述列表标签，<dt>定义专题名字，<dd>定义专题解释或子模块。

<dl>之间只能放置<dt>和<dd>，<dt>和<dd>数量没有限制，通常是一个<dt>对应多个<dd>

<dt>和<dd>之中可以放置任何元素。

表单标签

表单域

<form action = "url地址" method = "提交方式" name = "表单域名称">
	各种表单控件
</form>

表单域是包含表单元素的区域，用<form>标签定义。

action是接收表单数据的服务器url地址

method为表单数据的提交方式，属性有GET（默认）与POST。

采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制

采用post方法提交的数据保密性好，并且无数据量的限制

name为指定表单的名称，区分同一页面的多块区域。

表单控件

<input>标签

<input type = "控件类型" />输入控件标签，根据type属性的不同得到不同的控件效果。

type属性值有：

button : 定义可点击按钮，一般采用Javascript启动脚本
checkbox : 定义复选框，为多选框，多个采用name属性绑定在一起
text : 一个可输入的文本框
passward ：一个供密码输入的文本框
submit : 一个提交按钮，点击就提交表单信息到服务器
reset ：重置按钮，清除表单数据
radio : 单选按钮，用作多个选项选一个，多个radio用name属性自定义名称绑定一起。

其它属性有：

maxlength：设置控件中最多能输入字符的个数
readonly：设置控件为只读模式(不能输入)
disabled：设置控件为未激活(不能输入，显示为灰色)
name：设置控件的名称，自定义
id: 设置控件的唯一标识（如每个人的身份证号），自定义
value：设置控件的默认值
placeholder：设置控件的提示信息(也称为占位符)
checked: 该控件首次被加载时应被选中，主要用于单选按钮和复选框

<label>标签

用作绑定一个表单元素，点击label文本后，能够自动选中绑定的表单元素，增大点击范围，提高体验。

<label for = "绑定元素的id值">文本</label>
<input type = "radio" name = "sex" id = "sex" />

label的for属性应与绑定元素的id属性值相同。

<select>标签

如果有多个选项供用户选择，并想节约页面空间，可采用<select>标签定义下拉列表。

<select>
	<option>选项1</option>
	<option>选项2</option>
	....
</select>

<select>中至少有一个<option>选项。

<option>中属性selected = "selected"时，表示为默认选中项。

<textarea>标签

当输入内容比较多时，采用<textarea>标签定义文本域。

码农公寓