＜前端＞HTML模块学习个人笔记帖

（according to B站黑马程序员课程）

---

不同浏览器渲染引擎（浏览器内核）不同，相同代码解析出的效果不同。所以设定一个Web标准：让五大浏览器解析效果相同。

前端构成分别结构、表现和行为，对应的语言为HTML（超文本标记语言）、CSS（层叠样式表）、JavaScript。

软件：VScode；本科自学时用的DW；

新建.html后缀的文件，输入“！”，ENTER (或者Tab)直接出框架。注释为<!--这是注释-->，快捷键：CTRL+/

标题标签：（双标签）

一级至六级标题，重要程度依次递减，均有加粗效果；独占一行。

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

排版标签：

段落标签：<p> 文本 </p>; 段落之间存在间隙，可用CSS改；独占一行。

换行标签：<br>单标签

水平线标签：<hr>单标签

文本格式化标签：(双标签)

加粗	b	strong
下划线	u	ins
倾斜	i	em
删除线	s	del

两列效果相同，强调时候用后面一列。

媒体标签：

图片标签：<img src=" " alt=" " title=“ ”> 

src=" "是一个标签属性；src是属性名，“ ”中内容是属性值。

标签可有多个属性，且用空格隔开。标签名与属性用空格隔开，属性之间没有顺序之分。

alt	替换文本：图片加载失败才会显示alt中的文字
title	提示文本：鼠标悬停时显示的文本；不仅可用于图片标签。
width/ height	宽度/高度：只设一个，另一个没设置的会等比例缩放；同时设置两个，可能会变形。

路径标签：

绝对路径：直接到达目标位置，通常从盘符开始。例如：C：\users\...或者网址。

相对路径：从当前文件出发寻找目标，分为

同级目录	直接写名称.后缀
下级目录	文件夹名/名称.后缀
上级目录	../是返回上一级；返回两级是../../。再找目标

音频标签：（双标签）

<audio src="./music.mp3" controls>   </audio>

controls	显示播放控件（默认不播放）
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

音频三种格式：mp3、Wav、Ogg

视频标签：

<video src="./mv.mp4" controls autoplay muted loop>   </vedio>

属性与音频相同；google中自动播放autoplay需要配合muted实现静音播放

视频三种格式：mp4、WebM、Ogg

链接标签：

<a href="./目标网址.html">超链接</a>

<a href="#">空链接</a>

href是跳转地址

target属性：目标网页的打开形式

_self	默认值。在当前窗口跳转（覆盖原网页）
_blank	新窗口跳转，保留原网页

eg：<a href="./目标网址.html" target="_blank">新窗口弹出</a>

列表标签：

无序列表：<ul>整体；<li>每一项，项前有默认圆点，可以在CSS中改

<ul>标签只允许包含<li>标签；<li>标签可包含任意内容

有序列表：<ol>整体；<li>每一项，项前有序号

<ol>标签只允许包含<li>标签；<li>标签可包含任意内容

自定义列表：一般在网页底部导航中使用

<dl>表示整体，用于包裹<dt>/<dd>，并且只许有<dt>/<dd>

<dt>表示列表主题

<dd>表示每一项；默认项前缩进

表格标签：

<table>：表示整体。包裹多个<tr>

<tr>：行。包裹<td>

<td>：单元格

表格相关属性：

border	边框高
width	表格宽
height	表格高

eg. <table border="1" width="600" height="400"> </table>

<caption>：表格大标题

<th>：表头单元格（替换td）

结构标签：包裹tr标签，可以省略

表格头部	thead
表格主体	tbody
表格底部	tbody

合并单元格操作：（跨行合并——竖着合并；跨列合并——水平合并）

step1：明确合并哪几个单元格

step2：根据左上原则（上下并，留上删下；左右并，留左删右）

step3：给保留格设置：跨行合并用rowspan；跨列合并用colspan。属性值即为合并的单元格个数

PS：同一个结构标签的单元格才能合并，不能跨thead、tbody、tbody

eg. 跨行合并——<td rowspan="2"> 文字  </td>

表单标签：(登录注册搜索功能用)

input标签：

type属性值	说明
text（默认）	文本框 输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	文件选择 上传文件
submit	提交按钮
reset	重置按钮
button	普通按钮

· placeholder 占位符：提示输入内容文本

eg. <input type="text" placeholder="请输入文字">

· radio 多选一：

name属性：用于分组。有相同name的单选框为一组，一组只能选中一个。

checked属性：默认选中

eg. <input type="radio" name="gender">男   <input type="radio" name="gender">女

· file: 多选文件用multiple属性

eg. <input type="file" multiple>

· submit和reset必须在表单域内才能使用

<form action="地址"> 提交按钮/重置按钮 <.form>     (因为提交重置需要有范围)

button无名称：<input type="button" value=“普通按钮”>    （value是给按钮添加文字的）

button标签：<button>文字</button>

属性值：submit / reset / button

<button type="submit">文字</button>

button名称放中间即可，input名称需要放在标签中。

select下拉菜单标签:

select标签：下拉菜单整体

option标签：下拉菜单每一项

常用属性：selected ——下拉菜单的默认选中

textarea文本域标签：（双标签）

属性：

cols	可见宽度
rows	可见行数

label标签：绑定内容与表单标签的关系yi'x

方法1：（复杂一些）

step1. 用label标签把内容（eg.文本）包裹起来

step2. 在表单标签上添加id属性

step3. 在label标签的for属性中设置对应的id属性值

eg.  <input type="radio" name="gender" id="nan"><label for="nan"> 男 </label>

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

此时点文字“男”即可选中，“女”不可

方法2：（简单一些）

step1. 用label标签把内容和表单标签一起包起来

step2. 把label标签for属性删掉

eg.     <label> <input type="radio" name="gender"> 女 </label>

语义化标签：

无语义的布局标签：

div	一行只显示一个
span	一行可以显示多个

有语义的布局标签：（手机端常用）

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

字符实体：

空格

&nbsp