黑马官网2024最新前端就业课V8.5笔记---HTML篇

Html 定义

HTML 超文本标记语言——HyperText Markup Language。

标签语法

• 标签成对出现，中间包裹内容
• <>里面放英文字母（标签名）
• 结束标签比开始标签多 /
• 拓展 ：
  双标签：成对出现的标签
  单标签：只有开始标签，没有结束标签

HTML 基本骨架

VS Code 快速生成骨架:

在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键

标签的关系

作用:明确标签的书写位置;让代码格式更整齐

父子关系(嵌套关系)

兄弟关系(并列关系)

注释

在 VS Code 中,添加 / 删除注释的快捷键:Ctrl + /

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

高级软件人才培训专家
多一句没有,少一句不行,用更短时间,教会更实用的技术!

标题标签

标签名:H1 ~ H6(双标签)
显示特点:

• 文字加粗
• 字号逐渐减小
• 独占一行(换行)

注意

h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo

h2 ~ h6 没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名:P(双标签)

显示特点:

• 独占一行
• 段落之间存在间隙

换行与水平线标签

换行:<br.>(单标签)
浏览器不识别代码中的 Enter 键换行

水平线:<hr.>(单标签)

文本格式化标签

作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。

重点
strong、em、ins、del 标签自带强调含义(语义)。

图像标签 – 基本使用

作用: 在网页中插入图片。

src用于指定图像的位置和名称,是 <img.> 的必须属性。

<img src="图片的 URL">

其他属性

路径

路径指的是查找文件时,从起点到终点经历的路线。

相对路径: 从当前文件位置出发查找目标文件

• / 表示进入某个文件夹里面
• . 表示当前文件所在文件夹 ./
• . .表示当前文件的上一级文件夹 . ./

绝对路径: 从盘符出发查找目标文件

超链接

作用:点击跳转到其他页面。

语法

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target属性

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_ self和 _ blan两种，其中_ self为默认值，_blank为在新窗口中打开方式。

链接分类

1. 外部链接

<a href="http://www.qq.com" target="_blank">腾讯</a>`

2. 内部链接

网站内部之间的相互链接，直接链接内部页面名称即可。

<a href="index.html">首页</a>

3. 空链接
   如果当时没有确定链接目标时

<a herf="#">首页</a>

4. 下载链接
   如果href里面地址是一个文件或者压缩包，会下载这个文件。

5. 网页元素链接
   在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<h4>网页元素链接</h4><a href="http://www.baidu.com"><img src="img.jpg" /></a>

音频标签

<audio src="音频的 URL"></audio>

常见属性

拓展: 书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词

视频标签

<video src="视频的 URL"></video>

常见属性

列表

作用：布局内容排列整齐的区域。

无序列表

作用: 布局排列整齐的不需要规定顺序的区域。

标签 ul嵌套li，ul是无序列表，li是列表条目。

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

注意事项：

• ul标签里面只能包裹li标签
• li标签里面可以包裹任何内容

有序列表

作用： 布局排列整齐的需要规定顺序的区域。

标签： ol嵌套li，ol是有序列表，li是列表条目。

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

注意事项：

• ol标签里面只能包裹li标签
• li标签里面可以包裹任何内容
• < ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
• 常用的type属性值分别为是1，a，A，i，I
• < ol reversed=“reversed”>中的reversed属性能够让有序列表中的序列倒序排列。
• < ol start=“3”>中的start属性值为3，有序列表中的第一个序列号将从3开始排列。

自定义列表

标签： dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述

<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
</dl>

注意事项：

• dl里面只能包含dt和dd

• dt和dd 里面可以包含任何内容

表格

标签： table嵌套tr，tr嵌套td/th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

姓名	语文	数学	总分
张三	199	100	199
李四	198	100	198
总结	全市第	全市第	全市：

提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

---

表格属性

这些属性要写到标签table里面去
三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

表格结构标签－了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

合并单元格

作用： 将多个单元格合并成一个单元格，以合并同类信息。

合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”
  
  目标单元格：(写合并代码)
• 跨行：最上侧单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码
  合并单元格三部曲：
• 先确定跨行还是跨列合并
• 找到目标单元格，写上合并方式=合并的单元格数量。比如：
• 删除多余的单元格

表单

作用： 收集用户信息。
组成： 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单域
使用场景：

• 登录页面

• 注册页面

• 搜索区域

表单域

• 收集的用户信息通过form表单域传递给服务器

<form action="url地址" method="提交方式" name="表单域名称">  各种表单元素控件</form>

常用属性

表单控件

input标签基本使用

input标签type属性值不同，则功能不同。

<input type="." >

input标签占位文本

占位文本：提示信息。

<input type="..." placeholder="提示信息">

文本框和密码框都可以使用

单选框radio

常用属性：

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个(单选功能)
checked	默认选中	属性名和属性值相同，简写为一个单词

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

提示：name属性值自定义。

---

上传文件-file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。

<input type := "file" multiple>

多选框-checkbox

多选框也叫复选框。

默认选中：checked。

<input type="checkbox"checked>敲前端代码

---

下拉菜单

标签： select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。

<select><option>北京</option> <option>上海</option> <option>广州</option> <option>深圳l</option><option selected>武汉</option>
</select>

默认显示第一项，selected属性实现默认选中功能

文本域

作用： 多行输入文本的表单控件。

标签： textarea，双标签。

<textarea>默认提示文字</textarea>

注意点：

实际开发中，使用CSS设置文本域的尺寸实际开发中，一般禁用右下角的拖拽功能

label标签

作用： 网页中，某个标签的说明文本。

经验： 用label标签绑定文字和表单控件的关系，增大表单控件的点击范围，

label标签-增大点击范围

写法一

• label标签只包裹内容，不包裹表单控件

• 设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man"> 
<label for="man">男</label>

写法二

使用label标签包裹文字和表单控件，不需要属性

<label><input type="radio">女</label>

提示：
支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

---

按钮-button

<button type = ">按钮</button>

type属性值：

属性值 type	说明
submit	提交按钮，点击后可以提交数据到后台(默认功能)
reset	重置按钮，点击后将表单控件恢复默认值
button	普诵按钮，默认没有功能 - -般配合 lavaScript 使用

提示：

• 注意：按钮需配合form标签（表单区域）才能实现对应的功能。

无语义的布局标签

作用： 布局网页（划分网页区域，摆放内容）

• div：独占一行

• span：不换行

有语义的布局标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

字符实体

作用：在网页中显示预留字符。