---

---

一、项目创建

1.新建文件夹（根目录）

2.新建html文件
代码区输入!创建一个element

3.设置
编辑字体大小：ctrl++/-
设置字符缩进：文件→首选项→设置→通用→Editor设置→Tab Size
保存自动格式化：文件→首选项→设置→通用→Editor设置→文本编辑器→格式化

4.快速编写代码
Ctrl+U 呼唤侧边栏AI；
Ctrl+I 呼唤内嵌AI.

5.浏览器预览
下载插件：LiveServer

---

---

二、什么是HTML

超文本标记语言 — HyperText Markup Languege,是一种用来告知浏览器如何组织页面的标记语言。
知识点：

1.标记也称为标签（元素）。
2.大小写都可以，建议小写。
3.HTML 由一系列的标签组成。
简单说，学习HTML 就是学习标签

【例】HTML文档

---

---

三、简介

（一）标签语法

1.页面内容都要写在【< body>标签内容 < /body>】里面；
2.标签的分类：
双标签：< h1>标题标签< /h1>; < p>段落标签< p>…
单标签：< hr>横线

（二）标签分类

1.块级元素:
独占一行, 可嵌套其他元素,
常见比如 h、p、div 等.

2.内联（行内）元素:
一行多个, 常与文本一起使用, 不能嵌套块级元素,可以嵌套其他内联元素,
常见比如 strong、em、a 等.

（三）标签关系

· father and son or brothers
（ AI排错：Ctrl+U唤起侧边栏，选择【builder】）

---

---

四、路径

（一）相对路径

1.同级目录:
<img src="./pig.png" alt=" ">
2.下级目录：使用目录名/文件名
<img src="img文件/pig.png" alt=" ">
3.上级目录：使用…/返回上一级
<img src="../pig.png" alt=" ">

（二）绝对路径

1.从盘符开始
2.网页完整地址

---

---

五、基础标签

（一）标题标签和段落标签

1.标题标签 h
语法：
<h1>这是一级标题</h1>
显示特点：标题文字会加粗显示，并且每行只显示一个
h1一般用于文章标题或者logo
2.段落标题 p
语法：< p> 里面是段落文本< /p>

hr横线
br换行

---

（二）强调标签

1.语义强调标签

2.注释标签
< !-- 这是一个注释 -->

---

（三）图像标签

1.语法
<img src=" " alt=" ">
<img src="pig.jpg" alt="这是佩奇">
<img src="佳佳姐.jpg" alt="佳佳姐躲起来咯😋" width="200" height="200" title="我是佳佳姐">

2.特点
单标签（空元素）：默认包含两个属性
src属性：图像地址
alt属性：备选文本，用于在图片无法显示或者因为网速慢情况下显示的文字

3.其他属性

4.常见的图片格式：

---

（四）video视频标签

1.语法
<video src=""></video>
<video src="video.mp4" controls width="300"></video>

2.特点
src属性：地址
width/height属性：宽度高度
controls：显示播放控件

3.其他属性

【 在h5中如果属性的 【键】和【值】是相同的，则可以省略值 】

4.视频标签兼容性写法：
<video controls autoplay loop muted poster=" ">
<source src="video.mp4" type="vidNo/mp4">
<source src="video.mp4" type="vidNo/mp4">
<source src="video.webm" type="video/webm">
<p>您的浏览器不支持 HTML5 Video 标签，请升级浏览器。</p>
</video>
（1）将src属性放在几个单独的<source>(单标签)元素中，分别指向各自的资源；
（2）浏览器检索<source>元素，播放第一个匹配的媒体；
（3）添加type属性，可以使浏览器快速检查跳过不支持的格式。

---

（五）audio音频标签

1.语法
<audio src="audio/That girl.mp4" controls autoplay loop title="神曲"></audio>
2.兼容性写法
<audio controls muted loop title="神曲"> <source src="audio/That girl.mp4" type="audio/mp4"> <p>您的浏览器不支持 audio 元素。</p> </audio>

---

（六）超链接

1.语法

<a href="">
<a href="https://www.deepseek.com/">DeepSeek官网</a>

2.分类

1）内部链接
锚点链接
step1：定义锚点目标
<h2 id="1">第一部分</h2>
step2：创建跳转链接
<a href="#1">跳转到第一部分</a>
（#：可理解为取地址）
用css实现页面滑动效果：

  <style>
    html{
      scroll-behavior: smooth;
    }
  </style>

2）外部链接
下载链接
<a href="download.exe">下载链接</a>
空链接
<a href="#">空连接</a>
邮件链接
<a href="mailto:pig@mozilla.org">从这里给我发邮件</a>

3.属性

---

---

六、布局标签

（一）网站结构

---

（二）无语义

---

（三）列表

1.无序列表
父元素<ul>包含li是容器内元素

<ul>  
<li>猪爸爸</li>
<li>猪妈妈</li>
<li>佩奇</li>
<li>乔治</li>
</ul>

2.有序列表

<ol>
<li>猪爸爸</li>
<li>猪妈妈</li>
<li>佩奇</li>
<li>乔治</li>
</ol>

3.描述列表

<dl>
<dt>家电</dt>
<dd>电视</dd>
<dd>冰箱</dd>
<dd>空调</dd>
<dd>烟灶</dd>

</dl>

---

（四）表格

1.基本语法

2.增强语义

2.合并单元格

---

（五）表单

是用于收集用户的输入数据，并交给后端处理。

1.表单容器

  <form action="在提交表单时，数据送到这里给（URL）处理 ">
    <input type="text" placeholder="请输入姓名">
  </form>

2.表单控件

---

2.1 表单控件-input

2.1.1 type属性

<input type="text">
text→单行文本框
password→密码框
radio→单选框
checkbox→复选框
file→文件域

①（type=radio/checkbox ）单选框和复选框

单选框radio：

  <li>
    性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女
  </li>

复选框checkbox：

  <li> 爱好：
    <input type="checkbox" value="1">足球
    <input type="checkbox" value="2">篮球
    <input type="checkbox" value="3">跑步
  </li>

②（typle=file） 文件域

2.1.2 其他属性

<ul>
  <li>
    密码：<input type="password" accesskey="P" maxlength="6" autocomplete="off" placeholder="请输入密码">
  </li>
</ul>

---

2.2 表单控件-textarea

场景：评论或反馈表单

<textatea></textarea>

<ul>
 <li>
  请输入您的评论： 
 </li>
 <li>
  <textarea name="" id="" placeholder="良言一句三冬暖，恶语伤人六月寒"  cols="30" rows="10"></textarea>
 </li>
<ul>

---

2.3下拉表单控件-select

提供选项菜单
①<ul>元素是容器，option是每一个选项标签，每个选项要跟一个值；
②要想默认选一个，可添加selected属性。

<select name="" id="">
<option value="北京">北京</option>
<option value="深圳" selected>深圳</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>

2.4按钮控件-button

<button>搜索</button>
①button内部可以放置文本或图像内容；
②加入disabled属性