🍎一.HTML结构
🍒1.1认识HTML标签
HTML 代码是由 “标签” 构成的
形如:
<body>hello</body>
●标签名 (body) 放到 < > 中
●大部分标签成对出现. 为开始标签, 为结束标签
●少数标签只有开始标签, 称为 “单标签”
●开始标签和结束标签之间, 写的是标签的内容. (hello)
●开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)
<body>hello</body>
🍒1.2HTML文件基本结构
<html> <head> <title>第一个页面</title> </head> <body> hello world </body> </html>
● html 标签是整个 html 文件的根标签(最顶层标签)
● head 标签中写页面的属性
● body 标签中写的是页面上显示的内容
● title 标签中写的是页面的标题
🍒1.3标签层次结构
<html> <head> <title>第一个页面</title> </head> <body> hello world </body> </html>
其中:
● head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
● title 是 head 的子标签. head 是 title 的父标签
● head 和 body 之间是兄弟关系
🍒1.4快速生成代码框架
我们只需要在VScode输入**!**就可以快速生产HTML代码框架
按回车就生成了大概的代码框架
细节解释: (了解):
● * 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件
● 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
● 描述页面的字符编码方式. 没有这一行可能会导致中文乱码
● name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域
● content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)*
🍎二.HTML常见标签
🍒1.1注释标签
我们只需要在按住CTRL+/就可以将代码变成注释,或者生成一个自己编写的注释
🍒1.2标题标签（h1-h6）
有六个, 从 h1 - h6. 数字越大, 则字体越小
<h1>hello</h1> <h2>hello</h2> <h3>hello</h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6>
我们运行在浏览器就可以明显的看到
🍒1.3段落标签（p）
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落
例如以下文本:
<p>输入字段</p>
我们发现这个虽然是段落但是首字前没有空格
这样就是需要利用css来进行个字段赋予一些属性了
<style> p{ text-indent: 2em; } </style>
🍒1.4换行标签（br）
br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成 <br>
空格等一些字符转义符
🍒1.5格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主.
<strong>strong 加粗</strong> <b>b 加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u>下划线</u>
🍒1.6图片标签（img）
img 标签必须带有 src 属性. 表示图片的路径.<img src="冰巣.jpg">此时要把 冰巢.jpg 这个图片文件放到和 html 中的同级目录中.
img 标签的其他属性
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.<img src="rose.jpg">
我们发现这个照片太大了，有的会站一个网页一半左右，这样我们就可以用<img src="冰巣.jpg" alt="这是一个照片" width="400" height="400">，来选择照片的长度与宽度
关于目录结构:
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
● 相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: …/image/1.jpg
● 2 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 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="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"alt="">
