HTML常用标签

最新推荐文章于 2024-01-25 22:53:26 发布

原创最新推荐文章于 2024-01-25 22:53:26 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML 专栏收录该内容

2 篇文章

订阅专栏

HTML(HyperText Markup Language)创建网页的标准标记语言

<h1>-<h6> 标题。字体大小由小到大
<p> 段落
<a> 链接。如：<a href="xxx">这是一个链接</a>
<img> 图像。名称和尺寸是以属性的形式提供的
<div> 表示一个容器
<span> 功能和div类似，但区别在于在一行内显示
<hr> 表示一条水平分割线
<ul> <li> 表示无序列表
<i>/<em> 表示斜体
<b>/<strong> 表示加粗
<b>与<i>定义粗体或斜体文本，<strong>与<em>意味着呈现的文本是重要的，所以要突出显示
<br> 换行
<img> src属性:展示图片，alt属性:无法显示时用来提示用户的文字，title属性:当鼠标移动到图片的时候，用来提示用户的文字
<a> 超链接。href属性:超链接地址，target属性:_blank表示新建一个浏览器标签页而非覆盖模式
<a id="tips">有用部分</a>:在HTML文档中插入ID
<a href="#tips">访问有用部分</a>:在HTML文档中创建一个链接到有用部分(id为tips的部分)
<a href="xxx">访问有用部分</a>: 从另一个页面创建一个链接到有用部分，会跳转。
始终将正斜杠添加到子文件夹，否则会向服务器产生两次HTTP请求
<a href="mailto¹:zhangrr601² @163.com³?⁴subject=邮件主题&⁵body=邮件内容" rel="nofollow"> 发送邮件 </a>：多个邮件地址用;隔开，空格用%20代替

<base> 基本的链接地址/目标，为HTML文档中默认链接
<link> 通常用链接到css，定义了文档与外部资源之间的关系
- 链接到外部样式：<link rel="stylesheet" type="text/css" href="style.css">
- 在标题左侧显示logo：<link rel="shrotcut icon" href="x">
<meta> 一些基本的元数据，不显示在页面，会被浏览器解析。
每30秒刷新页面:<meta http-equiv="refresh" content="30">
<table>表格
tr行（浏览器会自动加上tbody标签，将所有的tr包围）
td列
<th>通常作为标题，字体加粗，字体居中
去掉单元格之间的间隔：cellspacing:0
水平合并单元格：colspan='d'（d为合并个数，在想合并标签后加）
垂直合并单元格：rowspan='d'（d为合并个数，在想合并标签后加）
合并会挤出去被合并单元格的内容，需手动将其删掉
<form> 表单

属性 $\Longrightarrow$ action:表单提交的地址
method:表单发送数据的方式：

1.get:默认，把数据放在浏览器地址栏发送给后台，可见

2.post:数据库修改用post，查询用get，隐式提交，不可见

name:通用属性，标签的名字
<input> 输入框

属性 $\Longrightarrow$ type：类型
1. text $\Longrightarrow$ 文本输入框
2. submit $\Longrightarrow$ 提交按钮，value为值
3. checkbox $\Longrightarrow$ 复选框
4. radio $\Longrightarrow$ 单选按钮，要加上同一个name属性才能实现几个之间的单选
5. file $\Longrightarrow$ 文件上传控件
6. hidden $\Longrightarrow$ 隐藏域，数据不想被用户看见时使用
7. button $\Longrightarrow$ 普通按钮，不会触发提交行为，留给js来控制
其他属性 $\Longrightarrow$ value：表单项的值
readonly：只读，内容不能修改
disabled：表示控制无效，不能用。数据不能发送出去
checked：表示选中状态。<input type="checkbox" checked>
<textarea> 多行输入框
row,cols设置行列，一定要加name属性，不然不会发送数据
<button> 语义化标签，内部可以放图片
<select> 下拉框，与<option>连用
name放在select上，value加在option上。加value发送的是value，不加value发送的是option内部内容

属性 $\Longrightarrow$ size:表示可见选项的条数
multiple:表示可以按住shift多选
<label> 扩大选区，加上for显示绑定，不加for隐式绑定
<meta name="viewport" content="width=device-width,initial-scake=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui" 为HTML5的内容

viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。width和height指令分别指定视区的逻辑宽度和高度。他们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中的device-width表示视区宽度应为设备的屏幕宽度。
user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes允许缩放，值为no则不允许
initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
maximum-scale/minimum-scale用于设置用户对于Web页面缩放比例的限制，值范围为0.25-10.0之间
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。