00 HTML5和CSS3 笔记

HTML

---

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

• 超文本：链接
• 标记：标签，带尖括号的文本

标签

---

标签结构

• 标签要成对出现，中间包裹内容
• <> 里面放英文字母（标签名）
• 结束标签比开始标签多 /
• 标签分类：双标签 和 单标签

eg：

<strong>hello world</strong>
<br> # 换行
<hr> # 水平线

标签的关系

• 作用：明确标签的书写位置，让代码格式更整齐

1. 父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

   <html>
       <head></head>
   </html>

2. 兄弟关系（并列关系）：兄弟标签换行要对齐

   <head></head>
   <body></body>

HTML 基本骨架

• html：整个网页
• head：网页头部，用来存放给 浏览器 看的信息，例如：CSS
• body：网页主体，用来存放给 用户 看的信息，例如：图片、文字
• title：网页标题

eg：

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

• 快速生成的办法：! (英文) + Enter / Tab 键

注释

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

eg：

<!-- 我是 HTML 注释 -->

标题标签

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

eg：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标签名：h1 ~ h6（双标签）

显示特点：

• 文字加粗
• 字号逐渐减小
• 独占一行（换行）

技巧：

1. h1 标签在一个网页中只能用一次，用来 放新闻标题或网页的 logo
2. h2 ~ h6 没有使用次数的限制

段落标签

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

eg：

<p>段落</p>

显示特点：

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

换行和水平线标签

• 换行：br
• 水平线：hr

eg：

<br>
<hr>

文本格式化标签

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

• 提示：strong、em、ins、del 标签自带 强调含义（语义）

图像标签

作用：在网页中插入图片

eg：

<img src="图片的 URL">

<!-- src用于指定图像的位置和名称，是 <img> 的必须属性 -->

图像属性：

属性语法：

• 属性名=“属性值”
• 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

eg：

<img src="/home/1.png" alt="替换文本" title="提示文本">

超链接标签

作用：点击跳转到其他页面

eg：

<a href="https://www.baidu.com">跳转到百度</a>

• href 属性值是 跳转地址，是 超链接 的 必须属性
• 超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现 新窗口 打开页面
• 开发初期，不确定跳转地址，则 href 属性值写为 #，表示 空链接，页面不会跳转，在当前页面刷新一次

eg：

<!-- target="_blank" 新窗口跳转页面 --> 
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

音频标签

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

eg：

<audio src="/1.mp3" controls loop autoplay></audio>

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->

• 常见属性：

  

视频标签

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

eg：

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->

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

• 常见属性：

  

---

列表标签

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

列表分类：无序列表、有序列表、定义列表

无序列表

• 作用：布局排列整齐的 不需要规定顺序 的区域
• 标签：ul 嵌套 li，ul 是 无序列表，li 是 列表条目

eg：

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

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

有序列表

• 作用：布局排列整齐的 需要规定顺序 的区域
• 标签：ol 嵌套 li，ol 是有序列表，li 是列表条目

eg：

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

• 注意：
  • ol 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容

定义标签

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

eg：

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

• 注意：
  • dl 里面 只能包含 dt 和 dd
  • dt 和 dd 里面可以包含任何内容

eg：

<dl>
    <dt>hello</dt>
    <dd>world</dd>
    <dd>China</dd>
    <dd>Suzhow</dd>
</dt>

---

表格标签

作用：网页中的表格与 Excel 表格类似，用来展示数据

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

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

eg：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>98</td>
        <td>99</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>99</td>
        <td>99</td>
    </tr>
</table>

表格结构标签

eg：

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>99</td>
        </tr>
    </tbody>
</table>

<!--没什么本质区别-->

• 提示：表格结构标签可以省略

合并单元格

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

合并单元格的步骤：

1. 明确合并的目标

2. 保留 **最左最上 **的单元格，添加属性（取值是 数字，表示需要 合并的单元格数量）

   • 跨行合并：保留 最上 单元格，添加属性 rowspan
   • 跨列合并：保留 最左 单元格，添加属性 colspan

   

3. 删除其他单元格

eg：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

• 注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

---

表单标签

作用：收集用户信息

使用场景：

1. 登录页面
2. 注册页面
3. 搜索区域

表单区域标签：<form>

input 标签

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

<input type="...">

• 

eg：

<body>
    文本框：<input type="text">
    密码框：<input type="password">
    单选框：<input type="radio">
    多选框：<input type="checkbox">
    上传文件：<input type="file">
</body>

input 标签占位文本

占位文本的作用：提示信息，文本框和密码框都可以使用

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

eg：

<body>
    文本框：<input type="text">
    密码框：<input type="password" placeholder="请输入密码">
    单选框：<input type="radio">
    多选框：<input type="checkbox">
    上传文件：<input type="file">
</body>

input 标签单选框

常用属性：

eg：

<body>
    文本框：<input type="text">
    密码框：<input type="password" placeholder="请输入密码">
    单选框/性别：
    	<input type="radio" name = "gender" checked> 男 
    	<input type="radio" name = "gender"> 女
    多选框：<input type="checkbox">
    上传文件：<input type="file">
</body>

• 提示：name 属性值是 自定义

input 标签上传多个文件

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

<input type="file" multiple>

input 标签多选框

多选框也叫复选框，默认选中：checked

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

label标签 - 增大点击范围

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

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

方法一：

• label 标签只包裹内容，不包裹表单控件
• 设置 label 标签的 for 属性值 和 表单控件的 id 属性值相同

eg：

<body>
    <input type="radio" name="gender" id="man" checked>
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
</body>

方法二：

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

eg：

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

• 输出结果同上

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

下拉菜单标签

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

eg：

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

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

文本域标签

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

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

• 注意：

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

按钮标签

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

type属性值：

eg：

<body>
    <!-- form 表单区域-->
    <!-- action是发送数据的地址 -->
    <form action="">
        <button type="submit">提交功能</button>
        <button type="reset">重置功能</button>
        <button type="button">普通按钮</button>
    </form>
</body>

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

---

无语义的布局标签

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

• div：独占一行
• span：不换行

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

---

有语义的布局标签

---

字符实体

---

CSS

---

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来 描述 HTML 文档的呈现（美化内容）

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码

eg：

<head>
    <title>hello world</title>
    <style>
      /* 选择器 { } : 哪里需要美化就写哪里*/
      p {
        /* CSS 属性 */
        color: red;
        /* 字号 */
        font-size: 30px;
      }
    </style>
</head>


<p> hello </p>

• 提示：属性名和属性值成对出现 → 键值对

---

CSS引入方式

---

• 内部 样式表：学习使用

  • CSS 代码写在 style 标签里面

• 外部 样式表：开发使用

  • CSS 代码写在单独的 CSS 文件中（.css）
  • 在 HTML 使用 link 标签引入

  eg：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello world</title>
      <link rel="stylesheet" href="./2.css">
  </head>
  <body>
      <p> hello </p>
  </body>
  </html>

  /* 这个文件放 CSS 文件 */
  /* 选择器 { CSS 属性} */
  
  p {
      color: tomato;
  }

• 行内 样式：配合 JavaScript 使用

  • CSS 写在标签的 style 属性值里

  <div style=" CSS属性 "></div>

  eg：

  <body>
      <div style="color: crimson;"> hello </div>
  </body>

---

选择器

---

作用：查找标签，设置样式

---

基础选择器

标签选择器

• 标签选择器：使用 标签名 作为选择器 → 选中 同名标签设置相同的样式
• 特点：选中同名的标签设置相同的样式，无法差异化同名标签的样式

eg：

<style>
    p {
        color : red;
    }
</style>

类选择器

• 作用：查找标签，差异化 设置标签的显示效果

• 步骤：

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class="类名"

eg：

<!-- 1. 定义类选择器 -->
<style>
    .red {
        color = red;
    }
    
    .size {
        font-size: 50px;
    }
</style>

<!-- 2. 使用类选择器 -->
<div class = "red size"> this is div label </div>

• 注意：

  1. 类名 自定义，不要用纯数字或中文，尽量用英文命名
  2. 一个类选择器 可以供多个标签使用
  3. 一个标签可以使用多个类名，类名之间用 空格 隔开

id 选择器

• 作用：查找标签，差异化 设置标签的显示效果

• 场景：id 选择器一般 配合 JavaScript 使用，很少用来设置 CSS 样式

• 步骤：

  • 定义 id 选择器 → #id名
  • 使用 id 选择器 → 标签添加 id= "id名"

• 规则：同一个 id 选择器在一个页面只能使用一次

eg：

<!-- 1. 定义id选择器 -->
<style>
    #red {
        color = red;
    }
</style>

<!-- 2. 使用id选择器 -->
<div id = "red"> this is div label </div>

通配符选择器

• 作用：查找页面 所有 标签，设置相同样式
• 通配符选择器： *，不需要调用，浏览器 自动 查找页面 所有 标签，设置相同的样式

eg：

<!-- 1. 定义通配符选择器-->
<style>
    * {
        color:yellowgreen;
    }
</style>

<!-- 2. 使用通配符选择器-->
<p> hello </p>
<div> hi </div>
<h1> bye </h1>

• 通配符选择器可以用于 清除标签的默认样式，例如：标签默认的外边距、内边距

---

盒子尺寸和背景色

---

目标：使用合适的选择去画盒子

新属性：

eg：

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: brown;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

<div class="box1"> div1 </div>
<div class="box2"> div2 </div>

---

文字控制属性

---

字体大小

• 属性名：font-size
• 属性值：文字尺寸，PC 端网页最常用的单位 px

<style>
    p {
	  font-size: 30px;
	}
</style>

• 注意：谷歌浏览器默认字号是 16px

字体样式

是否加粗

• 属性名：font-weight
• 属性值：
  • 正常：400 / normal
  • 加粗：700/ bold

是否倾斜

• 作用：清除文字默认的倾斜效果
• 属性名：font-style
• 属性值
  • 正常：normal
  • 倾斜：italic

eg：

<style>
    p {
        font-weight: 700;
        font-style: italic;
    }
</style>

行高

• 作用：设置多行文本之间的距离

• 属性名：line-height

• 属性值

  • 数字 + px
  • 数字（当前标签font-size属性值的倍数）

• 行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

  

eg：

<style>
    p {
        line-height: 10px;
    }
</style>

行高 - 垂直居中

• 垂直居中技巧：行高属性值等于盒子高度属性值

eg：

div {
  height: 100px;
  background-color: skyblue;

  /* 注意：只能是单行文字垂直居中 */
  line-height: 100px;
}

• 注意：该技巧适用于单行文字垂直居中效果

字体

• 属性名：font-family
• 属性值：字体名

eg：

font-family: 楷体;

• font-family 属性值可以书写多个字体名，各个字体名用 , 隔开，执行顺序是 从左向右 依次查找
• font-family 属性最后设置一个字体族名，网页开发建议使用 无衬线字体 sans-serif

eg：

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font复合属性

• 使用场景：设置网页文字公共样式，简化代码
• 复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用 空格 隔开
• font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

eg：

div {
    /* 是否倾斜 是否加粗 字号/行高 字体; */
    font: italic bold 20px/2 楷体;
}

• 注意：字号 和 字体值 必须书写，否则 font 属性不生效

文本缩进

• 作用：首行缩进，段落空两格
• 属性名：text-indent
• 属性值：
  • 数字 + px
  • 数字 + em（推荐：1em = 当前标签的字号大小）

eg：

/* 首行缩进两个字的效果 */
p {
  text-indent: 2em;
}

文本对齐方式

• 作用：控制内容水平对齐方式

• 属性名：text-align

• 属性值：

  属性值	效果
  left	左对齐（默认）
  center	居中对齐
  right	右对齐

eg：

/* 文字居中的效果 */

p{
    text-align: center;
}

• text-align 本质是 控制内容的对齐方式，属性要设置给内容的父级

/* 图片居中的效果 */

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="./images/1.jpg" alt="">
</div>

文本修饰线

• 属性名： text-decoration

• 属性值：

  属性值	效果
  none	无
  underline	下划线
  line-through	删除线
  overline	上划线

eg：

p {
    text-decoration: underline;
    /* text-decoration: overline; */
}

<p> hello world </p>

文字颜色

• 属性名：color

• 属性值：

  颜色表示方式	属性值	说明	使用场景
  颜色关键字	颜色英文单词	red、green、blue…	测试
  rgb表示法	rgb(r, g, b)	r, g, b表示红绿蓝三原色，取值：0 ~ 255	了解
  rgba表示法	rgba(r, g, b, a)	a表示透明度，取值：0 ~ 1	实现透明色
  十六进制表示法	#RRGGBB	#000000 简写：#000	开发使用

eg：

p {
    color: rgb(0, 0, 0);
    color: #000000;
}

---