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>
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
