01. HTML基本标签

最新推荐文章于 2022-07-18 12:25:34 发布
最新推荐文章于 2022-07-18 12:25:34 发布
阅读量247 收藏
点赞数
分类专栏： html+css笔记 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46055080/article/details/104190156
版权

01 HTML基本标签

（1）基本标签（骨架）
标签详解
<!DOCTYPE html>文档类型定义。<!DOCTYPE> 标签位于文档的最前面。此标签不属于 网页的内容，它是一条指令。<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
1. html:声明该文档是html5版本的类型（注意：一些老网站用的可能还是老版本的文档类型，比如xhtml等，但html5兼容性很好（向下兼容的原则））
2. html4.0.1版本的文档类型：!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br/>3. xhtml版本的文档类型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<html lang="en">lang=“en”:该文档的根元素
1. lang是language的缩写，意思是语言， “en”代表英文，“zh-CN”代表中文；"en-SG"中文（简体，新加坡）
2.其实不写lang属性，整个html文档的显示是没有任何问题的；
3.如果你在中国，本地浏览器默认语言是中文，当我们打开一个外国网站时，浏览器会提示：“是否翻译成中文”
4.搜索引擎自己无法判断自己抓取的页面中的内容是什么语言，因为他看来都是二进制文件，那么这时我们需要告诉他这是什么
<head>头部标签
< meta charset="UTF-8">meta：标记一些头部信息，描述该文档的作者，项目说明，关键词等一些元信息
1. charset=“UTF-8”： 声明该文档的字符编码集是UTF- 8，如果不写，会导致中文乱码（用webstorm打开）
2. utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gdk和gb2312
3. gb2312（简体中文）：包括6763个汉字
4. BIG5 （繁体中文）：港澳台等用
5. GBK（全部中文字符）：是GB2312的扩展，加入对繁体字的支持，兼容GB2312和BIG5
6. utf-8 则包含全世界所有国家需要用到的字符，所以以后统统用UTF-8 避免出现乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">1.content属性值：
width：可视区域的宽度，值可为数字或关键词device-width
height：可视区域的高度，值可为数字或关键词device-height
width=device-width 会导致iPhone5添加到主屏后以webApp全屏模式打开页面时黑边
2.initial-scale：页面首次被显示是可视区域的缩放级别， 取值1.0则按实际尺寸显示，并无缩放
maximum-scale=1.0，minimum-scale=1.0；可视区域的缩放级别
maximum-scale用户可将页面放大的程度，1.0将禁止用户放大到实际尺寸以上
user-scale：是否可对页面进行缩放，no是禁止缩放
<meta http-equiv="X-UA-Compatible" content="ie=edge">X-UA-Compatible时针对IE8新加的一个设置，对IE8版本之外的浏览器是不识别的，用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题，在网页中，其指定的模式的优先权高于服务器中（通过HTTP Header）所指定的模式这段代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE，即edge来渲染页面。
<meta name="keywords" content="关键字信息">Keywords：为搜索引擎提供参考，网页内容所包含的核心搜索关键词。
网页的关键字信息作用是：作为网页名字的补充，描述网站主要从事的业务领域，方便用户可以在搜索引擎搜索更多的词语情况下，扩大用户找到我们网站的可能性。
<meta name="description" content="网页描述信息">Description：为搜索引擎提供参考，网页的描述信息被搜索引擎采纳后，作为搜索结果中的页面摘要显示。
<title>该文档的标题标签
<body>文档的主体标签，html中的所有内容都要写在里面
<!-- -->注释标签，快捷键：ctrl+/ |
（2）标签分类
1.双标签:

<标签名>内容</标签名> 开始标签和结束成双成对出现 例如:p

2.单标签：

<标签名> 只有开始标签 例如：br>

（3）标签关系
1.嵌套关系（父子关系）

如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。

2.并列关系

如果是并列关系，最好上下对齐。

（4）常用标签
1.标题标签h系列标签重要度按以下顺序：h1>h2>h3>h4>h5>h6
2.段落标签<p >p标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域
3.水平线<hr>换行标签<br/>水平线hr>与换行标签br/>
4.<div>标签div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容
5.<span>标签span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线，颜色
6.引用标签blockquote标签的作用就是：在网页内容中间划分展示大段引用自古典，古籍或是名人名言的区域。长引用blockquote;短引用q cite=“来源地址”
7.文本格式化标签<！文本格式化标签：都可以同行显示 -->
加粗 -->strong , b
斜体–>em ,i
删除线–>del ,s
下划线–>ins , u
8.图片展示标签<img>src=“图片地址”:src是sourse的缩写，表示我们需要显示的图片文件所在的位置
alt=“图片名称”：每个图片都是为了展示某些内容，alt里面的文字则是为了描述图片内容的
width=“图片文件的实际宽度”：用以标注图文文件的实际高度，此处高度数据不可修改，不可因为布局需要改成其他非实际尺寸
9.路径src: 路径写法,不能出现中文。
相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件
./ (当前目录)
…/(上级目录)
…/…/(上上级目录)类推
绝对路径: 从本地: D:/project/demo/pic.jpg 从网络: :https://www.baidu.com/img/blabla.jpg
10.视频展示标签video标签的作用就是在网页上展示一个视频文件，这个标签也是HTML5时代的一个代表性存在
src=“视频地址”:src是sourse的缩写，表示我们需要显示的视频文件所在的位置
controls=“controls”：这是视频文件的控制按钮区域
11.音频展示标签audio标签的作用就是在网页上展示一个音频文件，这个标签也是HTML5时代的一个代表性存在
src=“视频地址”:src是sourse的缩写，表示我们需要显示的视频文件所在的位置.controls=“controls”：这是音频文件的控制按钮区域
12.链接标签ahref=“网页地址”: href是Hypertext Reference的缩写，意思是超文本引用，作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去.
target=“页面打开方式”： blank：在新窗口中打开被链接文档。
_self：默认，在相同的框架中打开被链接文档。
_parent：在父框架集中打开被链接文档。
_top：在整个窗口中打开被链接文档。
framename：在指定的框架中打开被链接文档。
13.无序列表ul li
14.有序列表ol li
15.自定义列表dl dt dd
16.预定义标签<pre>
空格符：&nbsp;
小于号：&lt;
大于号：&gt;
和号：&amp;
人民币：&yen;
版权：&copy;
&reg注册商标：&reg;
摄氏度：&deg;
正负号：&plusmn;
乘号：&times;
除号：&divide;
平方：&sup2;
立方：&sup3;
宠儿呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
01 HTML基本标签.ppt
07-23
Html的基础标签学习之后会使用HTML的基本结构创建网页，会使用文本相关标签，实现文字修饰和布局，会使用图像相关标签实现图文并茂的页面，会使用超链接相关标签实现页面间的跳转。
01-HTML基本标签.md
02-05
html基本标签，什么是标签，标签的分类，标签的作用，常用标签，单双标签，标签属性，src路径... 有痕
关于\u003c转换成正常html符号的事
热门推荐
landu7的博客
05-24 3万+
这两天，在用php写一个爬虫。 对方的代码都在JS中，表现形式为ASCII编码。如下图示： "\u003cdiv class=\"grid-container footer-container\"\u003e\n \u003cdiv class=\"grid footer\"\u003e\n \u003cdiv class=\"grid__item md--one-quarter\...
当我们输入一条SQL查询语句时，发生了什么？
cpongo55
11-23 2521
\u003cp\u003e我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，对于 MySQL 的学习也是这样。平时我们使用数据库，看到的通常都是一个整体。比如，你有个最简单的表，表里只有一个 ID 字段，在执行下面这个查询语句时：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003emysql\u0026...
初次实现Python爬虫与遇到的问题
Mr_Joer的博客
07-18 957
},"keywords""王濛","searchItem"{"timeOrder"true,"adv"false,"title"false,"fuzzyMatch"false},"page"{"totalCount"349,"numPerPage"10,"pageNumShown"10,"currentPage"1,"pageCount"0},"dateType""default"})注获取的响应res后，res.status_code可以查询请求状态码（200,404等）...
资深专家都知道的Docker常用命令
cpongo55
01-06 358
\u003cp\u003e开发人员一直在努力提高Docker的使用率和性能，命令也在不停变化。Docker命令经常被弃用，或被替换为更新且更有效的命令，本文总结了近年来资深专家最常用的命令列表并给出部分使用方法。\u003c/p\u003e\n\u003cp\u003e目前，Docker共有13个管理命令和41个通用命令，以下是常用Docker命令列表：\u003c/p\u003e\n\u003c...
html-基本标签 ※.md
最新发布
01-18
html——基本标签 ※
HTML标签汇总模板.doc
11-23
在 HTML 中，各种标签（Tag）是构成网页的基本结构单元。下面是常用的 HTML 标签汇总模板。 1. 主体标签 <body> 标签是 HTML 文档的主体部分，用于定义网页的主体内容。在 <body> 标签中，可以添加各种属性来控制...
js中文乱码
qq_43121524的博客
03-07 204
今天在学习js的外链式的时候，用src属性引入外部的js文件的时候，js的中文编码总是乱码，在配置工具里面设置了UTF-8，也显示的编码错误。 解决方法：在script里面加入编码charset=“GB2312” 例： ...
HTTP协议：看个新闻原来这么麻烦
cpongo55
03-22 2156
\u003cp\u003eHTTP协议，几乎是每个人上网用的第一个协议，同时也是很容易被人忽略的协议。\u003c/p\u003e\n\u003cp\u003e既然说看新闻，咱们就\u003cstrong\u003e先登录http://www.163.com\u003c/strong\u003e。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://...
代码自解释不是不写注释的理由
cpongo55
03-27 177
\u003cp\u003e有什么比花时间写注释更令人感到兴奋的事情吗？如果我没有猜错，你可能会说：“不好意思，所有事情都比写注释更令人感到兴奋”。如果有人要你给代码加上注释，对你来说就像是一种侮辱。你的代码写得如此优雅，它已经足以说明它要做的事情，注释是多余的，代码就是一切。\u003c/p\u003e\n\u003cp\u003e无论是开源项目还是专业软件开发，代码注释通常有两种形式：要么没有和...
PHP json_encode里面经常用到的 JSON_UNESCAPED_UNICODE和JSON_UNESCAPED_SLASHES
Zami6969的博客
01-12 248
php格式化json的函数 json_encode($value,$options) 其中有2个比较常用到的参数 JSON_UNESCAPED_UNICODE（中文不转为unicode ，对应的数字 256） JSON_UNESCAPED_SLASHES （不转义反斜杠，对应的数字 64） 通常json_encode只能传入一个常量，如果同时使用2个常量怎么办？ ...
数据库设计中的9大常见错误
cpongo55
04-01 296
\u003cp\u003e作为数据库设计人员，当我们负责数据库项目时，在数据库设计以及把数据库部署到生产环境的过程中可能会遇到一些挑战。\u003c/p\u003e\n\u003cp\u003e其中一些问题不可避免，也无法控制。但是，其中相当一部分可以追溯到数据库设计本身的质量。我们在初步阶段所做的决定会对数据库最终的工作情况有深远的影响。\u003c/p\u003e\n\u003ch2\u003...
java 将 \u003c \u003e \u003d 转为 <> = 或者其他html符号
qq_31683775的博客
12-10 1万+
原字符串{"target_type":"single","msg_type":"text","target_name":"测试家长","target_id":"18539282209","from_id":"13820165774","from_name":"大大","from_type":"user","from_platform":"web","msg_body":{"text":"\u00...
\u003C>_<"
u011311506的专>_<栏
07-30 6056
喵喵子。
HTML基础教程：学习HTML基本标签
HTML基本标签是构建网页内容的基础，它们告诉浏览器如何显示网页的各种元素。HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。自1993年以来，HTML经历了多个版本的迭代，从最初的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值