海淀发布会_h5小游戏源码大全_搜索引擎优化公司排行_自助建站系统开发

html标签(1)

文章目录

html标签(1)
一、注解
二、html文档结构
三、head中的标签
四、非语义化的标签
五、字符实体
六、h系列标签
七、p标签
八、img标签
九、a标签

一、注解

<!--单行注解-->
<!--
也可以多行
-->

二、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等会被当作一个空格处理，为了能正常显示这些字符，以此需要使用字符实体。
常用的字符实体如下：

空格：&nbsp;
>：&gt;
<：&lt;
&：&amp;
¥：&yen;
版权符号：&copy;
注册符号：&reg;

更多字符实体可以参考如下链接：字符实体

六、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><!--指定id跳转--><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><!--指定name跳转--><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>