跳转至

常用标签 2020年5月23日 9:44

常用标签

一、HTML常用标签

在body内加

1)标题标签 \<h1>-\<h6>

2)段落标签 \<p>\</p>

在body中分段和空格无效,要标签

3)换行标签 \<br/>

单标签,与段落不同

案例:体育新闻

image1

image2

4)文本格式化标签

a)加粗 \<strong>\</strong>

\<strong>\</strong>或者\<b>\</b>

b)倾斜 \<em>\</em>

\<em>\</em>或者\<i>\</i>

c)删除线 \<del>\</del>

\<del>\</del>或者\<s>\</s>

d)下划线 \<ins>

\<ins>\</ins>或者\<u>\</u>

案例

我是加粗标签 我是加粗标签 我是倾斜标签 我是倾斜标签 我是删除线标签 我是~~删除线~~标签 我是下划线标签 我是下划线标签

<body>

我是 <strong>加粗</strong>标签 我是

<b>加粗</b>标签 我是

<em>倾斜</em>标签 我是

<i>倾斜</i>标签 我是

<del>删除线</del>标签 我是

<s>删除线</s>标签 我是

<ins>下划线</ins>标签 我是

<u>下划线</u>标签

</body>

5、\<div>和\<span>标签

二者无语义,都是盒子,用来装内容

\<div>用来布局,一行只能放一个,大盒子,\<span>,一行可以有多个,小盒子

二、图像标签和路径

A、图像标签(文本,像素)

单标签

\<img src=图像URL />

Eg.\<imgsrc="img.jpg"/>

scr是该标签的必须属性,指定图像文件的路径和文件名

图片和网页文件放在一起,同文件夹下

src 图片路径 必须属性
alt 文本 替换文本,当图像不能显示的时候出现
title 文本 提示文本,鼠标放在图像上显示文字
width 像素 设置图像的宽度
height 像素 设置图像高度
border 像素 设置图像的边框粗细

高度和宽度一般只设定一个,另一个按比例自动变

image3

注意

1、标签可以有多个属性,必须写在标签名的后面

2、属性间不分先后顺序, 空格分开

3、格式: key=”value”

B 路径

1、目录文件夹和根目录

目录文件夹:普通文件

根目录:打开的最外面一层

2、相对路径和绝对路径

A.相对路径,图片相对于HTML页面的位置

分类 符号 说明
同一级路径 \<img src=”img.jpg”/>
下一级路径 \ \<img src=”images\img.jpg” />
上一级路径 ..\ \<img src=”..\img.jpg”>
B.绝对路径 直接输入网址或者文件所在具体位置

image4

三、超链接标签(重点)

\<a>\</a>标签

\<a>\</a>标签用于定义超链接,作用是从一个页面到另一个页面

\<a href=”目标” target=”目标窗口的弹出方式”> 文本或图像名字\</a>

==href==必须属性,target打开方式 | target打开窗口方式 | 默认当前打开 | |--------------------|------------------| | target=”_self” | 当前窗口打开页面 | | target=”_blank” | 在新窗口打开 |

A.外部链接

必须以http://开头

B.内部链接

内部链接不用http://, 有名字就可以

这里是同级文件

C.空链接

用#代替

\<a href="#">空链接\</a>

D.下载链接

如果href里地址是一个文件或者压缩包,会下载这个文件

\<a href="img.zip">下载包\</a>

E.网页元素链接

网页中各自元素,都可以添加超链接

\<a href="https://www.baidu.com/">\</a>

F.锚点链接

1.可以快速定位到页面中某个位置

Step1:在链接文本的href属性中,设置属性值为 #名字的形式

\<ahref="#two">第二集\</a>

Step2:找到目标位置标签,里面添加一个id属性=名字

\<h3id="two">第二集介绍\</h3>

2.回到顶部

定义链接\<a href="#top">ToTop\</a>

定义锚点\<a name="top>\</a>

案例:圣诞老人的百度百科