前端（二）html标签(1)

梦见你的名字 · 2024-12-6 02:08:17

html标签(1)

一、注解

<!--
也可以多行
-->

复制代码

二、html文档布局

<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
<html></html>为根标签，所有的网页标签都在<html></html>中。
<head></head>标签用于定义文档的头部，它是所有头部元素的容器。
<body></body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。

复制代码

标签的使用注意事项：

标签不区分巨细写<h1>和<H1>是一样的
标签只是用来做记号而不负责控制样式

三、head中的标签

#指定字符编码类型
<meta charset="gbk">
#Keywords有助于搜索引擎SEC优化，通过content的内容搜索出页面信息
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
#3s自动跳转到百度，如果不写链接则是3s自动刷新
<meta http-equiv="refresh" content="3,http://www.baidu.com">
#标题信息
<title>我是标题</title>
#图标链接
<link rel="icon" href="https://www.baidu.com/favicon.ico">
#css样式
<style></style>
#引入外部css/js文件
<link rel="stylesheet" href="mystyle.css">
<script src="hello.js"></script>

复制代码

四、非语义化的标签

非语义化的标签可以用来修改文本的样式，但是一样平常html中都是使用css来完成样式的修改，因此非语义化的标签并不推荐使用。

#换行
<br>
#分割线
<hr>
#修改文字大小，颜色
<font color="red" size="10px">我是哈哈哈</font>
#字体加粗
<b>111
#下划线
<u>111
#倾斜
<i>111
#加删除线
<s>111

复制代码

别的<div></div>和<span></span>也是没有语义的标签，但是这两种标签却使用的较为广泛。
div用来标志一块内容，没有详细的语义。
span用来标志一行中的一小段内容，也没有详细的语义。
五、字符实体

在html中有些字符是被html保留的，例如大于小于，有些则是有着特殊寄义，另有一些如空格回车tab等会被当作一个空格处置处罚，为了能正常显示这些字符，以此需要使用字符实体。
常用的字符实体如下：

空格： 
>：>
<：<
&：&
¥：¥
版权符号：©
注册符号：®

复制代码

更多字符实体可以参考如下链接：字符实体
六、h系列标签

h系列标签从h1到h6共6个，用来表现差别级别的标题。

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

复制代码

七、p标签

p标签用以标识一个段落，p标签结束后会自动换行。

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
</body>
</html>

复制代码

八、img标签

img标签用以存放图片。

<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容"
width="图片宽(px)" height="图片高(px)"/>

复制代码

img标签注意事项：

src指定的可以是网络地址，也可以是本地地址(绝对/相对路径)
图片的格式为png/jpg/gif
alt加的内容可以支持搜索引擎和盲人读屏软件
不指定图片宽高则按原始宽高显示，只指定宽/高图片会保持原始比例，指定宽和高大概会让图片变形

九、a标签

a标签用来存放超链接的内容。

<a href="跳转到的目标页面地址" target="是否打开新页面跳转"
title="鼠标悬浮显示的内容">点我</a>

复制代码

a标签必须有href属性，href的值必须是http://或https://开头。
a标签中可以使用style=“text_decoration:none"取消文本的下划线。
a标签也可以给图片加上超链接，只需在a标签内嵌套一个img标签即可。
target用来指定跳转的页面是否需要打开新的浏览器页面显示，默以为self否，_blank为是。怎样大量a标签需要该设置，可以在head标签内新增一个base标签进行统一设置<base target=”_blank">。
a标签还可以用来存放假链接，假链接是开辟初期不知道a标签应该跳转到那个页面，临时存放的链接。

#会返回顶部
<a href="#">点我</a>
#不会执行任何操作
<a href="javascript:">点我</a>
#另外如果href为空，则会刷新页面(自动回到顶部)
<a href="">点我</a>

复制代码

a标签还可以用来跳转到页面的指定位置(这个过程是瞬间完成的，没有动画，如果想要动画结果需要注解写js代码)

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<a href="#label1">点我</a>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p id="label1">跳转到这里</p>
</body>
</html>

复制代码

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<a href="#label1">点我</a>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<a href="" name='label1'></a>
<p>跳转到这里</p>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

前端（二）html标签(1)

0 个回复

快速回复

楼主热帖

标签云