开启新篇章~其实是又加了个工作室hhh）
目录
I.HTML简介
①网页
②HTML（重点！）
③网页的形成: 网页是由网页元素组成(利用html标签描述出来)的然后通过浏览器解析显示给用户
④浏览器
⑤web标准（重点！) →Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合【W3C（万维网联盟）是国际最著名的标准化组织】
1）原因
2）构成→主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面
3）总结
⑥语法规范
1）<html> </html> 双标签，结束前有/ ；
<br /> 单标签；
2）双标签关系→包含关系（父子）和并列关系（兄弟）
eg. ✿<html>
<head> </head>
</html>✿<body> </body>
II. 基本结构标签
①分类
eg.写的第一个页面嘿嘿，目前感觉比算法简单好多qwq！
<html> <head> <title> 第一个页面 </title> </head> <body> 继续加油！ </body> </html>效果图：
（就打了四个字的懒仔）
PS：✿重命名的时候如果电脑不显示后缀的话，我的电脑→查看→选文件拓展名
✿title→网页名，body→网页内容
② 总结
III. VScode相关
①建页面
②推荐插件
③自带代码的解释
框出来的那一块好像没什么影响。。
这句话不写可能会乱码！！！
总结 
IV.常用标签
①标题标签< h1-6 >
作用：字体加粗加大
预览效果：
② 段落标签 < p >
作用：文档分段
③换行标签 < br / >（单）
作用：强制换行
④文本格式化标签
⑤盒子标签（无语义）
1）<div>→division缩写，表示分割，分区；
eg、代码：
<div>我是一个div标签我一个人单独占一行</div>123 <div>我是一个div标签我一个人单独占一行</div>123效果：
2）<span>→跨度、跨距 好像只有一个空格（？）
eg、代码：
<span>百度</span> <span>新浪</span> <span>搜狐</span>效果：
⑥图像标签 < img >（单）和路径
eg.
<img src="图像URL"/>PS：
1）属性
eg.代码：
<img src="img.jpg"> <h4>alt替换文本图像显示不出来的时候用文字替换：</h4> <img src="img1.jpg" alt="可爱修猫"> <h4>title提示文本鼠标放到图像上，提示的文字：</h4> <img src="img.jpg" alt="可爱修猫" title="可爱www"> /* 图片是网上找的可爱布偶猫ww！ */预览：title那个截图出不来qwq
PS.目录
2）路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径；
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
⑦链接标签 < a >
作用：定义超链接，作用是从一个页面链接到另一个页面
1）语法格式
<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
常用_blank
eg.代码：
<a href="http://www.qq.com">腾讯</a>预览：
2）分类
PS：※1 内部链接，要在同一目录下；
※2 空连接点不出东西；
※3 网页元素链接，元素附加链接
⑧表格标签
作用：显示数据
1）分类
常用*3 ❀<table></table>是用于定义表格的标签；
❀<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中；
❀<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中；
❀字母 td指表格数据（table data），即数据单元格的内容
表头<th></th> （table head）一般位于表格的第一行或第一列（单元格里面的文本内容加粗居中显示）；
eg.
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
结构*2 ❀<thead></thead>：定义表格头部，<thead>内部必须有<tr>；
❀<tbody></tbody>：定义表格主体，主要用于放数据本体
2）属性→写< table >里
PS：不常用→一般用CSS 还没学到啊喂！！！
3）合并单元格
方式 ❀跨行合并：rowspan=”合并个数”→最上侧单元格为目标单元格
❀跨列合并：colspan ="合并个数”→最左侧单元格为目标单元格
（如果不理解的话看下图）
目标单元格 就是合并代码写的地方
步骤
eg.代码：
<table border="1" cellspacing="0" cellpadding="10"> <thead> <tr> <th>合并行</th> <th>样</th> <th>例</th> </tr> </thead> <tbody> <tr> <td rowspan="3">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> <br /> <table border="1" cellspacing="0" cellpadding="10"> <thead> <tr> <th>合并列</th> <th>样</th> <th>例</th> </tr> </thead> <tbody> <tr> <td colspan="3">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table>预览：
没删单元格所以有点丑
⑨列表标签
作用：布局（有无序、有序、自定义列表）
1）无序列表
用<ul>标签定义，一般会以项目符号呈现列表项，用<li>标签定义列表项
2）有序列表
用<ol>标签定义，列表排序以数字来显示，用<li>标签定义列表项
3）自定义列表
用<dl>标签定义（<dt> → 定义项目/名字；<dd> → 描述每一个项目/名字）
使用场景 常用于对术语或名词进行解释和描述，列表项前没有任何项目符号
eg.代码：
<ul> <li>默认的</li> <li>项目符号</li> <li>是黑点</li> </ul> <br /> <ol> <li>不知道</li> <li>写点</li> <li>什么qwq！</li> </ol> <br /> <dl> <dt>→近期目标←</dt> <dd>高分过六级、考大英（争取拿奖！！）</dd> <dd>学算法和web</dd> <dd>减肥啊qwq！！！</dd> <dd>争取搞个奖学金（但是大一好像不让评qwq）</dd> <dt>留个足迹怎么样（doge）</dt> <dd>点赞</dd> <dd>关注</dd> <dd>评论</dd> </dl>预览：
字是随便打的doge
总结
⑩表单标签
- 作用：收集用户信息
- 组成：由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
表单域 用<form>标签用于定义→实现用户信息的收集和传递
表单控件（元素）
❀<input>输入表单元素→收集信息 （单标签！）
属性
※1 type
1️⃣ submit→点击后把元素的值提交给后台，默认内容为“提交“，可通过value更改；
eg.
<input type="submit" value="免费注册">※2 其他
1️⃣ 实现单选→ <input>的name相同（复选框也要）；同一单选和复选框的name必须一致
2️⃣ name和value→每个表单元素都有的属性值，主要给后台人员使用；
3️⃣ value→默认显示值；
4️⃣ checked→<radio>单选唯一，<checkbox>多选随意
<lable>标签 ▲常与<input>搭配用▲→为input元素定义标注
for和id可以顺序不一样！
eg.代码：
<form> 性别 <input type="radio" name="sex" id="na"> <label for="na">男 </label> <input type="radio" name="sex" id="nv"> <label for="nv">女</label> </form>预览：
（点男女就可以选嗷w！）
❀select下拉表单元素
❀textarea文本域元素
V.注释和特殊字符
①注释 <！--注释语句-->（快捷键：ctrl+ /）：解释代码+程序不执行、页面不显示
②特殊符号（框出来的是必记的）
VI.查阅文档
恭喜看到这的小伙伴w，已经完成HTML基本知识的学习了哦！！！
下面进入CSS的学习吧(★ ω ★)→CSS第一天
有用的话就点赞评论收藏嗷！！
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
