html常用标签

最新推荐文章于 2023-03-06 11:34:51 发布

Luuuzi

最新推荐文章于 2023-03-06 11:34:51 发布

阅读量458

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_36366618/article/details/119909657

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

常用标签

常用标签

1、sublime软件的使用

常用快捷键
Ctrl + 滚轮放大缩小文字
Ctrl +shift + d 复制当前行
Ctrl + shift + k 删除当前行
Ctrl + shift + 上箭头上移当前行
Ctrl +shift +下箭头下移当前行
使用sublime输入标签的时候，仅仅需要输入标签的名字，然后按tab就可以自动生成标签对

2、HTML的语法特性

HTML对换行不敏感，对tab不敏感
缩进可以减小文件大小，百度为了追求极致，所以HTML标签都没有换行，都没有缩进，HTML和换不换行无关
空白折叠现象
HTML中所有的文字之间，如果有空格，换行，tab都被折叠为一个空格显示
标签要严格封闭
标签分为容器级和文本级标签
3个自封闭标签，meta,img,input

标签的分类

html将标签分为容器级和文本级标签

容器级标签，里面可以放任何东西，
文本级标签，只能放文字，图片，表单元素

3、常用标签

常用标签有以下几种

<br/>//回车换行：
<hr> //水平线(一整行)：

//字体标签
<font></font>   //可以设置字体的颜色(color)，大小(size 范围：1~7)，类型(type)
<h1></h1>//主标题：h1给文字增加主标题的语义,(h是headline标题的缩写),二级标题<h2></h2>，最小的标题 <h6></h6>
<p> //段落：用于定义段落 eg：<p>This is another paragraph.</p>
<b></b>、<strong></strong> //黑体字 
<i></i> //斜体字 
<s></s> //删除线 
<u></u> //下划线
<em></em>   //加重一个单词（通常是斜体加黑体）
<cite></cite>   //创建一个引用，通常是斜体

转义字符

大于，小于引号等：以&号开头；号结尾

举例

<html>
	<head>
		<title>应用换行标记</title>
	</head>
	<body>
		<b>黄鹤楼送孟浩然之广陵</b><br/>
		<hr>
		故人西辞黄鹤楼，烟花三月下扬州。<br/>
		孤帆远影碧空尽，唯见长江天际流。
		
	</body>
</html>

1、标题标签

标题
h是容器级标签，理论上里面可以放任何标签，只是在语义上不要这么写
h1~h6

2、段落标签

段落，是英语 "paragraph "的缩写。段落标记以< p>标记开头,以< /p>标记结束。段落标记在段前和段后各添加个空行,而定义在段落标记中的内容不受该标记的影响

p标签是一个文本级标签：p里面只能放文字图片和表单元素，其他的一律不能放
Chrome浏览器是世界上HTML5支持最好的浏览器，提供了非常好的开发工具，适合开发人员使用。
Chrome浏览器提供了审查元素功能
chrome原意是 “铬”

3、居中标签

HIML页面中的内容有一定的布局方式,默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示,可以使用HTML中的< center>标记。< center>标记以< center>标记开头以< center>标记结尾。标记中的内容为居中(水平居中)显示。

<html>
	<head>
		<title>应用换行标记</title>
	</head>
	<body>
<!-- 居中标签 -->
		<center>
			<h1>java开发的3个方向</h1>
			<h2>java se</h2>
			<p>主要用于桌面程序开发。它是学习javaEE和javaMe的基础</p>
			<h2>java ee</h2>
			<p>主要用于网页程序的开发。随着互联网技术的发展，越来越多的企业使用	java语音来开发自己的网站，其中不乏世界500强的企业</p>
		</center>
	</body>
</html>

4、img标签

html页面上可以放置图片，图片类型为.jpg(jpeg)、png、gif、bmp. 类型和类型之间有什么区别,不能往网页中插入的图片类型：psd、ai
img是一个文本级标签
HTML页面不是直接插入图片，而是插入图片的引用地址
img标签之间有间隙：vertical-align: top//去掉图片底部3px的间距

语法如下：

<img src="url" width="value" height="value" border="value" alt="提示文字">

使用：

<img src="1.jpg" alt="">
//img是英语image"图片“的缩写
//src属性是英语source ”资源“的缩写，属性值为图片的路径，
//alt 是英语alternate"替代"的缩写 属性表示当图片五无法被显示的时候，出现的替代文字

自封闭标签

标签<>，称为自封闭标签，也叫单标签。
原因：如果像其他标签一样，里面就要放东西，表示给这个内容增加语义。
img是自封闭标签
3个自封闭标签，meta,img,input

图片路径问题

当图片的路径在HTML文件的上一层时,用两点加斜杠表示(…/表示上一层)，或者直接用绝对路径

<img src="../1.jpg" alt="图片错误">
//上一级
<img src="../../1.jpg" alt="图片错误">
//上2级
<img src="../../img/1.jpg" alt="图片错误">
//上2级的img文件夹下的1.jpg文件

错误写法

<img src="aa/../1.jpg" alt="图片错误">
//../要不就不写，不然就写在最前面

相对路径使用的前提，网页文件和图片，必须在同一个服务器商
绝对路径，以http://开头的路径
问题：网页文件在c盘，图片文件在d盘，可不可以插入
答：可以通过file：//+路径插入，但是没有任何意义

5、a标签(超链接)

a标签是实现HTML网页之间可以互相跳转的链接。
a标签是一个文本级的标签，p标签可以包裹文本，所以p标签可以包裹a标签。a的语义要小于p，所以是p标签包裹a标签

<a href="05_图片.html">跳转图片</a>
//a 是英语"anchor" 锚的意思，就好像这个页面往另一个页面扔出了一个锚 
//href是英语"hypertext reference"超文本地址的缩写，读作"喝瑞夫".

a标签的属性

属性名	属性值和说明
href	超文本地址的缩写，填文本
title	鼠标悬停文本
target	是否在新窗口打开属性值：_blank,blank就是空白的意思，表示新建一个空白窗口，默认在当前窗口打开

举例

<!DOCTYPE html>
<html>
	<head>
		<title>图片和超链接标记</title>
	</head>
	<body>
		<table width="409" height="523" border="1" align="center">
			<tr>
				<td width="199" height="208">
					<img src="images/cjl.jpg" width="199" height="208">
				</td>
				<td width="199" height="208">
					<img src="images/dx.jpg" width="199" height="208">
				</td>
			</tr>
			<tr>
				<td height="30"> <a href="04.表单.html">查看详情</a></td>
				<td height="30"> <a href="03.表格标签.html">查看详情</a></td>
			</tr>
			<tr>
				<td width="199" height="208">
					<img src="images/lh.jpg" width="199" height="208">
				</td>
				<td width="199" height="208">
					<img src="images/sl.jpg" width="199" height="208">
				</td>
			</tr>
			<tr>
				<td height="30"> <a href="01.html">查看详情</a></td>
				<td height="30"> <a href="02.html">查看详情</a></td>
			</tr>
		</table>
	</body>
</html>

效果图
点击查看详情会跳转至对应的网页

页面内的跳转(锚点)

页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有这个标记
锚点用name属性(或者id属性)来设置，一个a标签如果有name属性(或者id属性)，那个就是这个页面的锚点。

<h2 ><a name="grgx"></a>个人贡献</h2>
//或者
<h2> <a id="grgx"></a>个人贡献</h2>

那么网址就变成

07.锚点.html#grgx

grgx就是添加锚点的name属性
使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>个人介绍</h1>
	<a href="#grgx">点击查看个人贡献</a>
	<!--点击后就会跳到个人贡献那里去-->
	<h2>个人简介</h2>
	<p>
	.
	.
	.
	.
	</p>
	<h2>个人作品</h2>
	<p>
	.
	.
	.
	</p>
	<h2 ><a name="grgx"></a>个人贡献</h2>
	//添加a标签，并设置name属性
	<p>
	.
	.
	.
	</p>
</body>
</html>

跨页面的锚点
在跳转链接的后面加上#name(加上锚点名)

Luuuzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html常用标签

文章目录常用标签1、sublime软件的使用2、HTML的语法特性标签的分类3、常用标签转义字符1、标题标签2、段落标签3、居中标签4、img标签自封闭标签图片路径问题5、a标签(超链接)页面内的跳转(锚点)常用标签1、sublime软件的使用常用快捷键Ctrl + 滚轮放大缩小文字Ctrl +shift + d 复制当前行Ctrl + shift + k 删除当前行Ctrl + shift + 上箭头上移当前行Ctrl +shift +下箭头下移当前行使用sublime输入标签
复制链接

扫一扫