HTML标签学习

最新推荐文章于 2024-02-29 05:30:00 发布

别样的人儿

最新推荐文章于 2024-02-29 05:30:00 发布

阅读量592

点赞数 3

分类专栏：前端 HTML 文章标签： HTML标签学习

本文链接：https://blog.csdn.net/weixin_44222492/article/details/97417563

版权

前端同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

一、基本框架标签

<!DOCTYPE HTML> <!--文档类型说明-->
<html>	html文件开始
<head>	文件头开始
<title></title>
</head>	文件头结束
<body>	文件体开始
</body>	文件体结束
</html>	html文件结束

一般来讲，html的元素有下列三种表示方法：

<元素名>文件或超文本<／元素名>
<元素名　属性名＝“属性值…>文本或超文本<／元素名>
<元素名>

1. 头部标签（放到`<head></head>`中）

在这里插入图片描述

2. 段落标签（均自带上下换行）

(1) 标题：<h1></h1>.......<h6></h6>
标题元素有6种，分别为h1, h2,…h6，用于表示文章中的各种标题。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：

h1 黑体，特大字体，居中，上下各有两行空行。

h2 黑体，大字体，上下各有一到两行空行

h3 黑体(斜体)，大字体，左端微缩进，上下空行

h4 黑体，普通字体，比h3更多缩进，上边一空行

h5 黑体(斜体)，与h4相同缩进，上边一空行

h6 黑体，与正文有相同缩进，上边一空行

注：HTML 对hn的解释为：一律黑体，字体越来越小。
hn可以有对齐属性，align＝#(如<h1 align=”center”/>)，#表示

left 标题居左

center 标题居中

right 标题居右
注：最多可有六级标题，级别越低，字体越大（即h1字体最大）。

(2) 分隔线：<hr>
在HTML页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。

属性：

align：水平对齐方式，默认居中。属性值为left、center、right
width：水平线的长度，可取像素(px) 和百分比(%)
size：水平线的高度
color：颜色

示例——使水平线在页面中间显示，它的宽度为页面的50%

<hr align="center" width="50%"/>

(3) 段落：<p></p>

注：<p></p>也可以有多种属性，比较常用的属性是：aligh＝# #可以是left,center,right,其含义同上文。

(4) 换行：<br/>
(5) 块引用(首行大概空一个Tab)：<blockquote></blockquote>

注：使屏幕显示单独的一块。大多数的浏览器采用缩进编排的方式，使这一块和其他部分的文本区分开来，上下各有一空行。

(6) 英文拆分：<wbr></wbr>（无换行）

注：对某一个英文单词使用此标签，浏览器可有根据需求拆分该英文单词填满整行，达到排版的美化。

3. 字体格式（前四个仅做了解，可用css取代）

文字加粗：<b></b>
斜体：<i></i>
等宽西文字体：<tt></tt>
文字缩小：<small></small>
~~删除文字~~（加删除线）：<del></del>
插入文字（加下划线）：<ins></ins>
加下划线：<u></u>
~~内容不被提倡使用~~（加删除线）：<s></s>
数学^上_下标：上标<sup></sup>，下标<sub></sub>

例如：a^b与a_b

高亮文字（html5）：<mark></mark>

4. 短语格式

(1) 强调（一般为斜体）：<em></em>
(2) 着重（一般为粗体）：<strong></strong>
(3) 定义：<dfn></dfn>
(4) 代码：<code></code>
(5) 例子代码：<samp></samp>
(6) 用户输入：<kbd></kbd>
(7) 变量：<var></var>
(8) 引用：<cite></cite>
(9) 块引用（加双引号）：<q></q>
(10) 缩写：<abbr></abbr>
首字母缩写：<acronym></acronym>

5. 特殊格式

(1) 地址：<address></address>
(2) 居中：<center></center>
(3) 去格式化（原模原样输出）：<pre></pre>
被包围在pre元素中的文本通常会保留空格和换行符

示例一一用pre定义有换行的文本

<body>
	<pre>
		春眠不觉晓，
			处处闻啼鸟。
				夜来风雨声，
					花落知多少。
	</pre>
</body>

(4) 修改文字方向：<bdo></bdo>

<bdo dir=”rtl”></bdo>表示文字从右到左展现

(5) 小于号（<）：</<
(6) 大于号（>）：>/>

>与<的用途：显示网页代码，如显示<p>，可以使用<p>（<p>）实现。

(7) &（&）：&/&
(8) “”（"）："
(9) 空格（）： /&emsp;
(10) ü/Ü（ü）：ü/Ü
(11) 版权符号（©）：©

注：需要说明的是：

a. 转义序列各字符间不能有空格；
b. 转义序列必须以“；”结束；
c. 单独的&不被认为是转义开始。

块级元素和行内元素

1.块级元素独占一行，行内元素在同一行显示
2.块级元素默认宽度为100%，行内元素由内容撑开
3.块级元素可以设置宽高，行内元素不可以设置宽高
4.块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
5.块级元素默认的display为block，行内元素的display为inline
6.块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本
7.常见的块级元素有h1-h6, p, div等，行内元素有a, em, b, i, u等

6. 属性

（1）title=””（鼠标悬浮出现的提示性文字）

*对于几乎所有的html标签均适用

7.列表

常用的列表有3种格式，即无序列表(unordered List)，有序列表(ordered list)和定义列表(definition list)
(1) 无序列表：

<ul>
<li></li>
<li></li>
</ul>

(2) 有序列表：

<ol>
<li></li>
<li></li>
<ol>

(3) 解释型列表：

<dl>
<dt>词条名</dt>
<dd>词条解释</dd>
</dl>

(4) 改变条目标记
① 改变无序列表条目标记
无序列表输出时，每一条都默认有一个黑色圆点，可以用type属性修改条目的标记。type可以是disc 实心圆点　circle圆圈 square实心方点也可以为none不显示

<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>

输出为：
●ONE
○TWO
■THREE
② 改变有序列表条目标记
有序列表条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为：
<li type=#>
#=A, 大写字母以大写字母A、B、C······进行排列
a, 小写字母以小写字母a、b、c······进行排列
I, 大写罗马数字以小写的罗马数字i、ii、iii、iv······进行排列
i, 小写罗马数字以大写的罗马数字I、II、III、IV······进行排列
1, 缺省,阿拉伯数字系统默认效果，以数字1、2、3······进行排列
③ 改变有序列表的起始数字
有序列表的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。方法为<ol start=#>，#是条目起始号。

<ol start=5>
<li type=A>ONE-ONE</li>
<li>ONE-TWO<li>
<ol start=10>
<li>TWO-ONE</li>
<li type=i>TWO-ONE</li>
</ol>
</ol>

输出为：
E.ONE-ONE
6.ONE-TWO
10.TWO-ONE
xi.TWO-TWO

8. 图片

（1）插入图片：<img src=”图片位置” alt=”图片描述” align="right/left/center" />

注：src中的图片位置可为绝对路径，也可为相对路径，alt中的图片描述是当图片不可显示时出现的提示性文字。

（2）必须属性与常用属性：

必须属性：src存储图像的位置
常用属性：width、height、alt、title、align、border

① title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的。
② alt当图片未能正常显示时，用于给用户的提示信息。
③ width：宽 height：高，单位为像素（px）或百分比（%）
④ align：设定图片位置（center居中/left左对齐/right右对齐）
⑤ border：设定图片外部的边框

（3）图像链接指针：<a href="链接位置"><img src="图片位置"></img></a>
（4）图像地图（image map）
图象链接指针每幅图只能指向一个地点，而图象地图可以把图象分成多个区域，每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。
用户端图象地图的格式为：

<img src="图像位置" usemap="#mymap"/>
<map name="mymap">
<area shape="react/circle/poly" coords="坐标"/>
</map>

注：

src=“url” 指定用作图象地图的图象
usemap属性指明这是客户端图象地图
"#mymap"是图象文件说明部分的标记名，浏览器寻找名字为mymap的<map>元素并从中得到图象地图的分区信息。客户端图象地图的分区信息用<map name=mapname>元素说明，name属性命名<map>元素。
图象地图的各个区域用<area shape="形状" coords="坐标" href="url">说明，形状可以是：rect矩形，用左上角，右下角的坐标表示，各个坐标值之间用逗号分开； poly多边形，用各顶点的坐标值表示；circle圆形，用圆心及半径表示，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。
href=“url”，表示该区域所指向的资源的url，也可以是nohref，表示在该区域鼠标点取无效。客户端图象地图各个区域可以重叠，重叠区以先说明的条目为准。例如：

注：href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

(5) 插入框架：<iframe src=”html文件位置/链接” ></iframe>

9. 超链接

（1）超链接语法<a href=”html文件位置/链接/#id名” target=”_blank” >文本</a>

注：<a href=””></a>超链接可以跳转到本地的html页面，此时href中的内容为文件位置；可以跳转到网站，此时href中的内容为网站链接（一定要以http/https开头）；还可以跳转到本页面中含id的标签位置，此时href中的内容为#id名。另：如果要跳转到某个网页的某个位置可以用<a href=”文件名#id名”></a>。

（2）超链接属性：

href属性：链接URL
① 绝对路径：分为互联网绝对路径与本地绝对路径
互联网绝对路径：格式：http://域名
本地绝对路径：格式：file:///盘符/目录
② 相对路径：（相对于自己当前位置）
./代表当前目录
../代表上一级目录
target属性：代表新窗口位置，可取值_blank，__self等
属性值：_blank代表新窗口打开
_self代表本窗口打开（默认值）
name属性：锚点名称
title属性：定义了鼠标经过时的提示文字
（3）锚点定位：

<!--
锚点
	<a href="#锚点名"></a>
	1. id="锚点名"（这个id可以放到任何标签里面，点击链接就会定位到该标签）
	2. <a name="锚点名"></a>（把这个<a>标签放到需要定位到的位置）
-->

10.表格

（1）表格结构

表格总框架：<table></table>
外观：
表格表头（页眉）单元格：<th></th>
表格行：<tr></tr>
表格列：<td></td>
结构：
表格名：<caption></caption>
表头：<thread></thread>
表格内容（主体）：<tbody></tbody>
表尾：<tfoot></tfoot>

注：表头和表尾永远都会出现在界面上。

（2）表格属性

属性	描述	说明
width	表格的宽度
height	表格的高度
align	表格在页面的水平摆放位置
background	表格的背景图片
bgcolor	表格的背景颜色
border	表格边框的宽度(以像素为单位)	表格默认没有边框
bordercolor	表格边框颜色	当border> = 1时起作用
cellspacing	单元格之间的间距	cellspacing=0取消单元格间距
Cellpadding	单元格内容与单元格边界之间的空白距离大小

1）通栏

横向通栏：colspan="#"

横向通栏的表用<td colspan=#>属性说明：colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。
跨多列的表元：<td colspan=#>

纵向通栏：rowspan="#"

有纵向通栏的表用rowspan=#属性说明：rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用</tr>明确给出一横向栏目结束,这是和表的基本形式不同的。
跨多行的表元：<td rowspan=#>

2）表格大小
表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以象素为单位的整数。
<table border width=# height=#>
3）边框宽度
边框宽度由border=#说明，#为宽度值，单位是象素。
<table border=#>
4）表格间距
表格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是象素，下面的例子将表格间距定义为10个象素，它看起来象用很粗的线划分的表格。
<table border cellspacing=#>
5）文本与表框的距离
文本与表框的距离用cellpadding=#说明。下面的例子使表的内容与表框离开10个象素。
<table border cellpadding=#>
4）表格中文本的位置
表格的宽度大于其中的文本宽度时，文本在其中的输出位置用align=#说明。#是 left，center和right三者之一，分别表示左对齐，居中和右对齐，align属性可修饰<tr>,<th>和<td>标注。
<tr align=#>
5）浮动表格
　　所谓浮动表格是指表与文件中重中内容对齐时，若在现在位置上不能满足其对齐方式，表格含上下移动，即“挤开”一些内容，直到满足其对齐要求。
　　浮动属性一般由align=left或right指定。
　　下面的例子也可以看出，cllign=left时把字符串“挤到”了表的右边。当右边空间不够时，该字符串会显示在表的下在边，看起来象是表“浮”到了字符串上。
<table align=left>
6）表格颜色
表格的颜色用bgcolor=#指定。
#是16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量。或者是16种已定义好的颜色名称。

（3）表格行常用属性

属性	描述
height	行高
align	行内容的水平对齐，可取值left , center , right
valign	行内容的垂直对齐，可取值top , middle , bottom
bgcolor	行的背景颜色

（4）表格列常用属性

属性	描述
width/height	单元格的宽和高
align	设置水平对齐方式，可取值left , center , right
valign	设置垂直对齐方式，可取值top , middle , bottom
bgcolor	单元格的背景颜色
colspan	设置单元格跨列
rowspan	设置单元格跨行

别样的人儿

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML标签学习

一、基本框架标签<!DOCTYPE HTML><html><head><title></title></head><body></body></html>1. 头部标签（放到<head></head>中）2. 段落标签（均自带上下换行）(1)...
复制链接

扫一扫