HTML CSS JS

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

标准HTML5基础模版

html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 指定文档类型为HTML5 -->
    <meta charset="UTF-8"> <!-- 定义文档的字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度与设备宽度相同，初始缩放级别为1.0 -->
    <title>Document</title> <!-- 定义文档的标题，在浏览器标签栏中显示 -->
</head>
<body>
    <!-- 这是页面的主体部分 -->
    
</body>
</html>

html标签参考手册

HTML页面的基础结构标签

html
<html>
    <head>
    	<title> </title>
    </head>
    <body>
       
    </body>
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

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

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

HTML中的标签特点

HTML标签不区分大小写
HTML标签的属性值，采用单引号、双引号都可以
HTML语法相对比较松散 (编写HTML标签的时候尽量严谨一些)

HTML基本标签

标题标签`<h1>`

html
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

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

经验

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

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

`br`标签

html
<br>

定义简单的折行(换行)
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

`hr`标签

html
<hr>

<hr> 元素通常显示为水平线，用于在 HTML 页面中分隔内容，或定义内容上的变化。

`div`和`span`

html
<div>山东蓝翔</div>
<div>挖掘机哪家强</div>
<span>山东蓝翔</span>
<span>挖掘机哪家强</span>

div，一个人占一整行。【块级标签】
span，自己多大占多少。【行内标签、内联标签】

段落标签``

html
<p>大漠孤烟直, 长河落日圆</p>

文本格式化标签

加粗： 或者 
倾斜： 或者 
删除线：<del> </del>或者<s> </s>
下划线：<ins> </ins>或者

推荐使用第一列的标签, 标签有具体含义

图像标签`img`

html
<img  src="图片的 URL">

src用于指定图像的位置和名称，是的必须属性。

图像属性

属性语法

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

路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录出发

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

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

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

html
<img  src="C:\images\mao.jpg">

提示

Windows 默认是 \ ，其他系统是 /，建议统一写为 /

特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

超链接标签 `a`

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

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

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

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

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

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

音频`audio`

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

常用属性

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

html
<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

视频`video`

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

常用属性

html
<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

列表

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

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

无序列表

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

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

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

注意事项：

ul 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

有序列表

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

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

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

注意事项：

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

定义列表

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

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

注意事项：

dl 里面只能包含dt 和 dd

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

表格

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

基本使用

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

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

html
<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

表格结构标签-了解

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

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

合并单元格

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

合并单元格的步骤：

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
删除其他单元格

html
<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）。

表单

作用：收集用户信息。

使用场景：

登录页面
注册页面
搜索区域

input 标签

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

html
<input type="..." >

input 标签占位文本

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

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

单选框

常用属性

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

提示：name 属性值自定义。

上传文件

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

html
<input type="file" multiple>

多选框

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

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

下拉菜单

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

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

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

文本域

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

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

注意点：

实际开发中，使用 CSS 设置文本域的尺寸

实际开发中，一般禁用右下角的拖拽功能

label 标签

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

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

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

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

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

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

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

按钮

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

html
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

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

语义化

无语义的布局标签

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

div：独占一行
span：不换行

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

有语义的布局标签

字符实体

页面布局

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

布局标签

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：
特点：
- div标签：
  - 一行只显示一个（独占一行）
  - 宽度默认是父元素的宽度，高度默认由内容撑开
  - 可以设置宽高（width、height）
- span标签：
  - 一行可以显示多个
  - 宽度和高度默认由内容撑开
  - 不可以设置宽高（width、height）

测试：

html
<body>
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

    <span>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </span>
    <span>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </span>
</body>

浏览器打开后的效果:

1). div会独占一行，默认宽度为父元素 body 的宽度

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度

盒子模型代码

代码如下:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;  /* 宽度 */
            height: 200px;  /* 高度 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
        }
    </style>
</head>

<body>
    
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

</body>
</html>

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：

我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

目录

HTML CSS JS

标准HTML5基础模版

html标签参考手册

HTML页面的基础结构标签

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

HTML中的标签特点

HTML基本标签

标题标签<h1>

br标签

hr标签

div和span

段落标签<p>

文本格式化标签

图像标签img

图像属性

属性语法

路径

相对路径

绝对路径

超链接标签 a

音频audio

视频video

列表

无序列表

有序列表

定义列表

表格

基本使用

表格结构标签-了解

合并单元格

表单

input 标签

input 标签占位文本

单选框

上传文件

多选框

下拉菜单

文本域

label 标签

按钮

语义化

无语义的布局标签

有语义的布局标签

字符实体

页面布局

盒子模型

布局标签

盒子模型代码

标题标签`<h1>`

`br`标签

`hr`标签

`div`和`span`

段落标签`<p>`

图像标签`img`

超链接标签 `a`

音频`audio`

视频`video`