HTML常用标签

来源：互联网发布：淘宝全网举报中心网址编辑：程序博客网时间：2024/05/17 22:06

HTML标签

<html>标记是文档的开始，它告诉浏览器，HTML文档从该处开始。</html>标记是文档的结束。一个文档只能有一对<html></html>标记。

<html>标记分为两部分：<head>和<body>

1.<head>标签

<head>标记是头部信息标记，它定义文档的首部。
<head>标记用来说明文件的相关信息，如：文件的标题、作者、编写时间、搜索引擎可用的关键字等。
<head>标记的内容不在浏览器中显示

1.1 <title>标签

<title>标记位于<head>…</head>中，用以标识文档的标题，及浏览器标题栏的文本。
如果没有定义<title>标记，浏览器会将HTML文档的路径及文件名显示在标题栏中

1.2 <meta>标签
<meta>标记位于<head>…</head>中，用以记录页面内容属性，如字符编码、作者、版权信息或关键字。
也可以用来向服务器提供信息，如页面的失效日期、刷新间隔。

三个属性：

a. name：

作用是在一些搜索引擎中使用meta的name和content属性来索引的页面。name属性的取值有：description（页面的主要内容)、keywords（网页的关键字）、anthor（标注网页的作者）。

提供搜索关键字和内容描述信息，可以方便搜索引擎的搜索

b. http-equiv：

http-equiv属性的取值有：content-type（设定页面所用的字符集)、refresh（让这个网页在指定的时间内跳转到指定网页，如果在时间后面没有指定跳转的网页，则起到让网页自动刷新的作用。）、page-enter/page-exit（设定进入和离开页面时的特殊效果）

c. content：

name和http-equiv属性标明要定义的页面信息类别，而content则说明这些不同类别信息的值

<head><meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />     关键词<meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、 ……" />    简述<meta http-equiv="content-type" content="text/html" charset="utf-8">    页面内容类型和编码格式</head>

2.<body>标签

<body>标记定义了文档的主体，页面的可见部分都要在<body>…</body>中描述

2.1块级元素

显示为块，前后隔一行

2.1.1

标题标签: <hx>…</hx>

h1-h6为标题标签，h1最大，h6最小

水平线标签: <hr />

段落标签：…

换行标签：

引用标签： < blockquote >.. < /blockquote >..

预格式标签：<pre>…</pre>

会保留HTML代码中的回车和空格。常用于保留网页中代码的换行

2.1.2 列表

有序列表：

<ol>

…..

</ol>

无序列表：

<ul>

…..

</ul>

定义列表：

<dl>

</dl>

因dt是块状元素，所以常用于图文混编的布局场合

2.1.3 分区标签div

配合css使用，对网页进行布局

2.2 行级元素

按行逐一显示

2.2.1

下划线：…….

加粗： …….

倾斜：..….

强调(给搜索引擎看)：…… 加粗

…… 倾斜

strong，em，b，i区别
① strong、em表示强调，而b和i单纯表示加粗倾斜；
② strong、em都表示强调，但strong加粗显示，em倾斜显示；且strong的强调程度要高于em

2.2.2 图片标签：

①src表示图片的路径

a.直接引入图片的网络路径

b.相对路径：图片位置相对当前文件的地址

-----图片在当前HTML文件的下一层文件（例如放在img文件夹里的1.jpg文件就要写为<img src=”img/1.jpg”>）

-----图片在当前HTML文件的上一层文件（例如放在HTML文件上一层里的1.jpg文件就要写为<img src=”../1.jpg”>）但是图片不能再项目文件夹之外

-----图片与当前HTML文件在同一层，直接写

②width：图片宽度

③height：图片高度

④title：鼠标指上后显示的文字

⑤alt：图片加载失败显示的文字

2.2.3 超链接标签：

① href表示超链接需要跳转的地址

-----可以写网络链接

-----可以写本地项目里需要跳转的文件地址，相对路径的确定与图片相同

-----发送qq消息，发送邮件等

②target表示新页面打开的地址

---- _self 在当前页面打开（缺省条件下即为_self）

---- _blank 在新的选项卡打开

③title表示鼠标指上后显示的文字

2.2.4 范围标签：

文本等行级内容

包裹单行文字，配合css修改样式

hhhhhh

2.2.5 表格：

eg:两行三列的表格

<table>   <tr>       <td>1--1</td>       <td>1--2</td>       <td>1--3</td>   <tr>   <tr>       <td>2--1</td>       <td>2--2</td>       <td>2--3</td>   <tr><table>

表格的跨行跨列：

写在td标签内：

colspan=”2” 表格跨两列

rowspan=”2” 表格跨两行

2.2.6 表单：

----action表示表单提交的服务器地址

----method表示表单提交的方法

get：

GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连账户密码信息会以key-value形式拼接在URL上展示

post：

Post会将数据放在body里

根据HTTP规定，理论长度是无限的

不会将参数展示在URL上

各类表单元素：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form action="aaaa" method="get"> <table><tr><td>用户名：</td><td><input type="text" name="username"/></td></tr><tr><td>头像：</td><td><input type="file" name="file"/></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="男"/>男</td><td><input type="radio" name="sex" value="女"/>女</td></tr><tr><td>爱好：</td><td><input type="checkbox" name="hobby" value="足球"/>足球</td><td><input type="checkbox" name="hobby" value="篮球"/>篮球</td></tr><tr><td>密码：</td><td><input type="password" name="passworld"/></td></tr><tr><td><input type="submit" value="提交"/></td><td><input type="reset" value="重置"/></td></tr><table><form></body></html>

0 0