Html常用标签

# head内常见标签

# meta标签

# 介绍

meta用于定义有关网页的元信息，一般定义于文档的头部，不包含任何内容。它有两个属性：http-equiv和name属性。

http-equiv用于向浏览器传回一些有用的信息，以帮助正确的显示网页内容。
name主要用于描述网页，便于搜索引擎机器人对网页进行信息查找和信息分类。
而content则是属性对应的值。

# 常用meta标签

指定文档的编码类型：<meta http-equiv="content-Type" charset="UTF8">

提高网页被搜索引擎查询出来的概率 (SEO查询)：<meta name="keywords" content="关键字1, 关键字2...">

被搜索引擎查询出来后，显示在网页下方的描述性信息：<meta name="description" content="描述信息">

# title标签

<title></title>

用于定义网页标题，浏览器选项栏会显示的标题。

# style标签

<style></style>

用于定义网页css样式。

# script标签

<script></script>

用于书写定义js脚本，也可以引入外部js脚本文件。可以通过本地、网络的方式引入。

# link标签

<link ...>

用于引入外部css样式文件，可以通过本地或网络的方式引入。

# body内常用标签

# 常用块级标签

# div标签

<div></div>

用于对网页的各个部分进行区域(层)划分。

在构造网页时，提前使用div标签占位，以划分布局好页面的各个的区域，方便后面调整样式。

一个大的div内嵌一个个小的div，就像一块大地皮内规划一个个建筑。

# 无序列表标签 (常用)

<ul><li>第1项</li><li>第2项</li>...</ul>

页面布局时，只要是排版一致的数据，基本上都是用的ul标签。

type="" 该属性用于指定列表的项目符号的类型，一般用不到。

disc - 实心圆(默认)。

circle - 空心圆。

square - 实心方块。

none - 无符号。

# 有序列表标签 (了解)

<ol><li>第1项</li><li>第2项</li>... ...</ol>

type="" 该属性用于指定列表的项目符号的类型。

1 - 数字

A - 字母

I - 罗马数字

start="" 该属性用于指定列表的起始序号。

如：2、B、II

# 标题列表标签 (了解)

<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容2</dd>... ...</dl>

# 基本块级标签

# h标签

<h1~6>1~6级标题标签</h1~6>

一共有1~6种标题标签。

<h1> 1级标题标签 </h1>
... ...
<h6> 6级标题标签 </h6>

1
2
3

# p标签

<p>段落标签</p>

每个该标签就是一个段落。

# hr标签

<hr>

每个该标签就是水平分割线。

# 常用行级标签

# span标签

<span></span>

用于将文本独立出来设置单独的样式。

# img标签

<img src="">

图片标签用于在页面中展示图片。

属性

src="image/test.jpg"
图片源，可以是本地路径、也可以是网络url。

也可以是图片的二进制数据。

alt="描述信息"
只在图片加载不出来时，才会展示的描述信息。

title="悬浮信息"
当鼠标悬浮在图片上时，会展示的提示信息。

如果没有配置alt，那么当图片加载不出来时，也会展示该信息，如果配置了alt则alt优先。

width="1920px"
图片宽度，单位一般为px像素 (默认)。

也可以指定%为单位，以浏览器当前页面百分比展示，浏览器缩放图片也会跟着缩放。

height="1080px"
图片高度，单位同图片width一致。

# a标签

<a href="">...</a>

链接标签用于跳转到指定资源或锚点。

链接标签在被点击时，会跳转到指定的页面资源、或者跳转到当前页面的指定标签(锚点)。

属性

href=""
目标页面资源，可以是本地路径的页面、也可以是网络url

目标标签位置 (锚点功能)，可以跳转到当前页面的指定标签(锚点)位置
指定为：#+目标标签的id值，例如：#h01

target=""
指定跳转方式

_self - 在当前页面进行跳转 (默认)

_blank - 新建页面进行跳转

# 基本行级标签

# b标签

<b>加粗</b>

# i标签

<i>斜体</i>

# u标签

<u>下划线</u>

# s标签

<s>删除线</s>

# br标签

<br>

换行标签。

# 表格标签

<table></table> 表示定义一个表格。

border="1" 控制表格边框的宽度(px)，默认无边框。

cerllpadding="5" 控制单元格内容和内边框的距离(px)。

cerllspacing="5" 控制内边框和外边框的距离(px)。

<thead></thead> 表示定义表格头。

<tbody></tbody> 表示定义表格体。

<tr></tr> 表示定义表格中的行。

<td></td> 表示正常显示单元格内容。

colspan="2" 水平占位，指定该内容向右占据多少行单元格。

rowspan="2" 垂直占位，指定该内容向下占据多少行单元格。

<th></th> 表示加粗显示单元格内容。

使用例子：

<table>
    <thead>
        <tr>
            <th>username</th>
            <th>password</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>nonom</td>
            <td>123456</td>
        </tr>
        <tr>
            <td>titan</td>
            <td>654321</td>
        </tr>
    </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 表单标签

<form></form> 表示定义一个表单，表单可以获取用户输入的数据，然后提交给后端。

只有含name属性的表单控件标签，其数据才会提交给后端。

属性：

action="" 控制表单数据提交的后端路径，可以是本地路径、也可以是完整url。

本地路径：/root/html/index/

url如：http://127.0.0.1:5000/index/

默认为空，表示朝当前页面的URL提交数据。

method="post" 指定表单数据的提交方式。

get - 以get方式提交数据 (默认)，数据是直接放在url后面，可能会不安全。

post - 以post方式提交数据，提交文件只能使用post方式。

enctype="" 指定数据提交的编码格式。

multipart/urlencoded - 只支持提交文本数据 (默认)

multipart/form-data - 支持提交文本、文件数据，提交文件时需要使用。

<label></label> 用于触发对应id的表单控件。

比如我们点击label的文字，就能选中到对应id的表单控件，如输入框、按键等。

属性：

for="" 填写单击lable会触发的控件的id，必须是其所属的表单下的控件id。

<input></input> 用于添加输入框、选择框、按钮等。

属性：

name="" 用于指定用户在标签上输入的值的名字。

类似于字典的key，对应着用户输入的value

所有获取用户输入的标签，都应该有name属性。

type="" 指定input标签的表单控件功能。

text - 文本框

date - 日期框

password - 密码框

radio - 单选框，一般会有多个选项，所以指定的name需要一致。

checkbox - 多选框，一般会有多个选项，所以指定的name需要一致。

hidden - 隐藏框，不会再网页中显示出来，但实际存在。

file - 选择文件按钮，选择本地文件，可用于提交时上传文件至后端。

注意：form表单提交文件，必须使用post方式提交，且form表单必须指定属性enctype="multipart/form-data"。

submit - 提交表单按钮，会将该form表单的数据提交给后端。

reset - 重置表单按钮。

button - 自定义功能按钮，也会触发form表单的提交功能。

value="" 用于指定按钮功能上展示的文本。

用于指定选择框的所代表的值。

还可用作指定输入框的默认值。

checked 指定选择框默认选中。

同等于：checked="checked"。

当属性值和属性名一样时，可以只简写为属性名。

multiple 用于选择文件时，允许选中多个文件。

disabled 使输入框禁止输入。

readonly 使输入框只能读，也就是只能复制。

<select><option>...</option></select> 用于下拉框，一般会有多个选项，所以option可以有多个。

select标签属性：

name="" 下拉框的名称，提交表单时其对应的值为下拉框选中标签的值。

option标签属性：

value="" 指定选项的所代表的值。

selected 指定下拉框的默认选项，都未指定则默认为第一个选项。

<textarea><textarea> 可用于添加区域文本框。

属性：

name="" 提交表单时文本框内容值的名称。

cols="30" 默认宽度。

rows="10" 默认长度。

disabled 可禁止输入框输入。

<from action="">
    <p><label for="i01">username: <input type="text"></label></p>
    ... ...
</from>

1
2
3
4

# body内特殊字符

 

空格，一个 表示一个空格。

>

同等于>大于号，这是为了防止与标签的>混淆。

<

同等于<小于号，这是为了防止与标签的<混淆。

&

同等于&符号。

¥

同等于￥符号。

#前端 #Html

← Html与标签介绍 CSS基础→