HTML结构
HTML 代码是由 “标签” 构成的.
HTML标签
形如:
<body>hello</body>
标签名 (body) 放到 < > 中
大部分标签成对出现. 为开始标签, 为结束标签.
少数标签只有开始标签, 称为 “单标签”.
开始标签和结束标签之间, 写的是标签的内容. (hello)
开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).<body id="myId">hello</body>
HTML文件基本结构
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body></html>
- html 标签是整个 html 文件的根标签(最顶层标签)
- head 标签中写 页面的属性.
- body 标签中写的是 页面上显示的内容
- title 标签中写的是 页面的标题.
标签层次结构
- 父子关系
- 兄弟关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
其中：
head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.
有点二叉树内味儿哈哈哈，标签之间的结构关系，构成了一个DOM树，DOM 是 Document Object Mode (文档对象模型) 的缩写
👉快速生成代码框架
由于俺电脑上的idea是社区版的，不支持html文件，所以快速生成代码框架的方法是在VS Code上的办法
在html文件输入 ！即可生成代码框架，省时省事
效果如下：
细节解释: ( 了解即可, 不必深究)
< !DOCTYPE html > 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
< html lang=“en” > 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
< meta charset=“UTF-8” > 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
< meta name=“viewport” content=“width=device-width, initial-scale=1.0” >
1.name=“viewport” 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
2.content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽度等宽, 并
设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).
🐟HTML常见标签
注释标签
注释不会显示在界面上. 目的是提高代码的可读性.
<!-- 我是注释 -->
ctrl + / 快捷键可以快速进行注释/取消注释.
注释的原则
要和代码逻辑一致.
尽量使用中文.
不要传递负能量.（容易被老板实锤）
标题标签：h1-h6
有六个, 从 h1 - h6. 数字越大, 则字体越小.
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
效果：
段落标签：p
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.
例如：
此时用p标签即可实现文字分段
- p 标签表示一个段落.
<p>这是一个段落</p>
通过 p 标签改进上述代码, 每个段落放到 p 标签中.
注意:
p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容 首尾处的换行, 空格均无效.
在 html 中文字之间 输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.
👉换行标签：br
br 是 break 的缩写. 表示换行（通常和p标签一起使用）
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
< br/ > 是规范写法. 不建议写成 < br >
（其实只写br也可以，浏览器会自动补全代码）
👉格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
效果：
👉图片标签：img
img 标签必须带有 src 属性. 表示图片的路径.
<img src="rose.jpg">
此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.
img 标签的其他属性
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
注意:
属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行.
属性之间 不分先后顺序
属性使用 “键值对” 的格式来表示.
属性=“xxxx”
关于目录结构:
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: …/image/1.jpg
绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
代码示例
使用相对路径: 创建一个 image 目录和 html 同级, 并放入一个 rose2.jpg
<img src="image/rose2.jpg" alt="">
使用相对路径2: 在 image 目录中创建一个 html, 并访问上级目录的 rose.jpg
<img src="../rose.jpg" alt="">
使用绝对路径1: 最好使用 / , 不要使用 \
<img src="D:/rose.jpg" alt="">
使用绝对路径2: 使用网络路径
<img src="图片链接"alt="">
