Web前端从入门到放弃 第一周学习笔记
声明：本学习内容来自于 千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套）！
一、HTML基本架构和属性
HTML的全称为“超文本标记语言(HyperText Markup Language)”，标准通用标记语言下的一个应用。是网页制作必备的编程语言。
HTML： 超文本 标记 语言
-
超文本：文本内容+非文本内容（图片、视频、音频等）
-
语言：编程语言
-
标记：也叫做标签，写法有两种：
①单标签 <header> ②双标签 <header></header>-
创建标签的快捷键：单词 + tab →<单词>（自动识别单双标签）
-
标签的使用方式：可以上下排列，也可组合嵌套（标签不会对原文本造成影响，只是写结构的；至于其样式则需要CSS调解）
- 上下排列
- –组合嵌套
- 标签的属性：用来修饰标签的，设置当前标签的一些功能。
（标签的语法：<标签 属性1=“值1” 属性2=“值2”> ）
- 上下排列
-
HTML常见标签：HTML5元素周期表（链接）
二、HTML初始代码
每个 .html 文件都有的代码叫做初始代码，要符合html文件的规范写法。在VScode当中，我们可以用快捷键“ ！ + tab ”来创建初始代码（小白的话建议多用小手扣，等熟悉之后再使用快捷键！）
**hmtl初始代码：
<!DOCTYPE html> ————文档声明：告诉浏览器这是一个hmtl文件
<html lang="en"> ————html文件的最外层标签：包裹着所以html标签代码 ； “lang=en（zh-CN）”表示这是一个英文（中文）网站
<head>
<meta charset=“UTF-8”> ————元信息是编写网页中的一些辅助信息；charset=“UTF-8”是国际编码，防止网页出现乱码
<title>Document</title> ————设置网页标题
</head>
<body>
显示网页内容的区域
</body>
</html>
三、HTML中的注释
注释的语法： <!- -注释内容- ->（语法中没有空格，加空格是因为这个语法在csdn中也为注释语法，为方便显示才加了空格）
-注释的意义：
1. 把暂时不用的代码注释起来，方便以后使用。
2. 可以对开发人员进行提示。
-快捷添加注释与删除注释：
1. ctrl + / （不需要选中文本）
2. shift + alt + a （需要选中文本）
以上两种按两次可以取消注释
四、HTML语义化
所谓HTML语义化值得是吗，根据网页中内容过的结构，选择适合的HTML标签进行编写。好处：
- 在没有CSS的情况下，页面也鞥呈现很好的内容结构。
- 有利于SEO，让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析（如品目阅读器、蛮人阅读器等）。
- 便于团队开发与维护。
-语义化标签：标题与段落
-
① 标题 为双标签 ,共有六个等级，其大小（或重要性依次递减）：(注意原语法中无空格！)
1. <h 1>标题</h 1>
2. <h 2>标题</h 2>
3. <h 3>标题</h 3>
4. <h 4>标题</h 4>
5. <h 5>标题</h 5>
6. <h 6>标题</h 6>
- 特别的——h1标题最重要，只能出现一次，而h5、h6标题则很少用
- ②段落也为双标签 ，语法为：< p>内容</ p>（注意原语法中无空格！）
五、文本修饰标签
- 强调 → 双标签：
- < strong></ strong> (粗体)；例：强调
- < em></ em>（斜体）；例：强调
- strong强调性大于em的强调性
- 下标：< sub></ sub> 例：x2+y2=z2
- 上标：< sup></ sup> 例：H2O
- 删除文本：< del></ del> 例：
原价399 - 插入文本： 例：现价199
- 注：一般情况下 ，删除文本都是和插入文本配合使用的。
六、图片标签与图片属性
< img>图片：< img src=" " alt=" " title=“ ” width=“ ” heigh=“ ”>
- src：图片地址；
- alt：当图片出现问题时，可以提示文字；
- title：提示信息；
- width、height：图片大小，单位为像素；
-注：当网速较慢时，设置大小可以获得更好的视觉体验。
七、引入文件的地址路径
-
相对路径：
- （.）在路径中表示当前路径
- （. .）在路径中表示上一级路径
-
绝对路径：
- 本地路径
- 网络路径
特别的，在windows下，本地路径中的斜线和反斜线表示路径时作用相同，但网络路径中不行，必须用 “ / ” 。
八、跳转链接
-
a→双标签，语法为：< a href=“”></ a>
- href 属性：链接的地址
- target 属性：可以改变链接打开的默认方式
- 默认情况下，在当前页面打开“ _self ”；新窗口为“ _blank ”
-
base→单标签，作用是改变链接的默认行为，一般写在“ head ”部分
1. <a href="http://www.baidu.com">文字</a> 2. <a href="http://www.baidu.com"> <img src="" alt=""> （图片） </a>
九、跳转锚点
类似于目录的跳转，使用同为 “ a 标签 ”
-
第一种用法：#号 与 id属性 形成的映射关系
例： <a href=“ # html ”> </a> 跳转按钮 对应 <h2 id=“ html ”> <h2> 跳转位置 -
第二种用法：** #号 **与 ** name属性 **形成的映射关系
例： <a href=“ # html ”> </a> 跳转按钮 对应 ** <a name=“ html ”> </a> ** （不作任何值, 相当于不占任何空间，则显示的是其下一行） <h2 id=“ html ”> <h2> 跳转位置
十、特殊符号
编写一些文本时，经常会遇到输入法无法输入的字符，如R（注册商标)、@(版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
—特殊字符表
十一、无序列表
<ul><li>：列表的最外层容器、列表项 可用 type = “ ” 改变前面标记的样式(一般用CSS进行控制)
注：tl和li必须是组合出现 的让他们之间是不能有其他标签的
正确示范：<ul> 错误示范：<ul>
<li>无<li> <p>
<li>序<li> 无序
<ul> <p>
<ul>
十二、有序列表
<ol><li>：列表的最外层容器、列表项 其运用规范与无序列表相同 。
注：有序列表的使用较少，经常使用多个是无序列表，无序列表可以去代替有序列表。
十三、定义列表
<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>csS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
1695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
