Day 45 HTML标签与文档结构

最新推荐文章于 2021-06-04 14:39:38 发布

A1L__

最新推荐文章于 2021-06-04 14:39:38 发布

阅读量342

点赞数

文章标签： html python

本文链接：https://blog.csdn.net/A1L__/article/details/108587701

版权

Day 01 HTML标签与文档结构

HTML标签与文档结构

HTML文档结构，我们可以将它理解为网页的语法结构，一种编码格式。这个文档结构可以使网页变的非常规范。规范的代码可以增加代码可读性，看起来也显得更专业。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
H（很）T（甜）M（蜜）L（啦）
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义；

因为他可以加入，图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）

一句就是：

网页是由网页元素组成的，这些元素是利用html标签描述出来的，然后通过解释器解析，就可以显示给用户了。

HTML骨架格式

HTML有自己的语言语法骨架格式：（要遵循，要专业）要求务必非常流畅的默写下来

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

HTML骨架标签总结

标签名	定义	说明
	文档声明	必须写在HTML文档第一行，位于之前，表明该文档是HTML5文档
	HTML标签	页面中最大的标签，我们成为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的
	文档的标题	让页面拥有一个属于自己的网页标题

HTML标签之间的关系

主要针对于双标签的相互关系分为两种

嵌套关系（父子关系\上下级）
- ```
<head>
	<title> </title>
<head>
```
并列关系（兄弟关系\平级）
- ```
<head></head>
<body></body>
```

倡议：如果两个标签是嵌套关系，子元素最好缩进一个tab键的身位(四个空格)，并列关系，最好上下对齐。

注意：

记号/标签是不会显示出来的。
标签只是用来做记号而不负责控制样式：虽然用<h1>标记的文本在显示时会被加大加粗（h后数字越大标题好越小），但请务必记住，HTML的作用只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一种解耦合的思想
HTML标签不区分大小写，<h1>和<H1>是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。
HTML中有部分标签是可以嵌套的。例如：

段落

,但不能交叉

HTML中的标签分类

容器类型标签

容器类标签可以简单的理解为能嵌套其它所有标签的标签。

常见容器级别的标签

标签	描述
h系列	标题元素h1-h6 标题号越大效果越不明显 ul>li 有序列表>列表项 ol>li 无序列表>列表项 dl>dt+dd 定义列表>定义属于+定义描述
ul>li	有序列表>列表项
ol>li	无序列表>列表项
dl>dt+dd	定义列表>定义属于+定义描述
div	常用块级容器，也是css和layout的主要标签

文本类型标签

文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。

常见文本级的标签

标签	描述
p	段落
span	常用的内联容器，定义文本内区块
strong	加粗强调
em	倾斜
ins	插入
del	删除

HTML注释

无论我们学习什么编程语言，一定要重视的就是注释，HTML中注释的格式:

<!--这里是注释的内容-->

注意：注释中可以直接使用回车换行。

并且我们习惯用注释的标签把HTML代码包裹起来。如：

<!-- xx部分 开始 -->
    这里放你xx部分的HTML代码
<!-- xx部分 结束 -->

HTML注释的注意事项：

#1、HTML注释不支持嵌套。
#2、HTML注释不能写在HTML标签中。

HTML5新特性

h5新特性感觉面试必问，但是记住所有是不可能的，也不切实际。把几个主要的新标签记住，讲清楚应该就差不多了吧。

标签	描述
	定义日期或时间
	状态标签（任务过程：安装、加载）
	定义图形，比如图标和其他图像。，canvas作容器，用脚本绘制图形。
	定义对话框或窗口。
	定义视频，像电影片段或其他视频流而不用再使用第三方插件。现在主要支持 Ogg 和 MPEG 两种视屏格式。
	定义音频，如音乐或其他音频流。
	定义表单里一个生产的键值，加密信息传送。

Head常用标签与Meta

<!doctype html>
<html lang="en">
<head>
    <meta charset="GBK">  <!--默认为UTF-8我们可以修改为GBK-->
    <meta name="Keywords"
          content="时代洪流，铁骨青年， 世纪弄潮儿，战争英雄">  <!--关键字搜索排名-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  <!-- 兼容IE -->
    <meta http-equiv="refresh" content="3">  <!--设置三秒后刷新  -->

    <title>I See</title>  <!-- 浏览器打开时 显示的网页的名字 -->
    <link rel="icon" href="bitbug_iceberg.ico">  <!-- 加载小图标 浏览器左上角那个，可以自己制作 -->
    <style type="text/css">
        body {background: #e3e3e3
        }
        p {color: #d1fbff
        }
    </style>
    <script src="QJ8420088537.jpg"></script>
</head>

Body内常用标签

body中的标签是会显示到浏览器窗口中的,body内的标签只有一个作用就是用来标记语义的,语义指的是从字面意思就可以理解被标记的内容是用来做什么的

<body>
<hr>
 <div style="text-align: center;"><h1>我是毛成</h1></div>
<hr>
 <div style="text-align: center;">
我是一位下棋天才<br>平常以诸葛亮自喻<br>具有运筹帷幄之中<br>决胜千里之外的才华<br>我三岁就与街边老头下棋
<br>我的诗如李白<br>貌若潘安<br>策略如诸葛亮<br>歌如刘德华<br>乒乓球如马琳<br>数学如华罗庚
<br>我不但精通下棋<br>且还是一位思想理论家<br>哲学家<br>擅长笛<br>会吉他<br>能说会道<br>
舌战群儒<br>是一位才华美貌集于一身的全能天才<br>
     <strong>请大家多多指教！</strong>
    </div>

<div style="text-align: center">
    <img src="QJ8420088537.jpg" alt="图片找不到了哦" title="冰山之上" width="512">
    </div>


</body>
</html>