HTML(Hyper Text Markup Language)

Circle in Circle

已于 2024-10-05 15:22:43 修改

阅读量1.3k

点赞数 14

文章标签： html 前端

于 2024-09-30 11:25:50 首次发布

本文链接：https://blog.csdn.net/weixin_43731078/article/details/142651161

版权

1 网站的组成

用户通常使用浏览器（Browser）或客户端（Client）访问网站服务
用户在展示出来的页面上做操作，一旦操作就会给对应的 WEB 服务器发送请求
WEB 服务器在接收到请求后，会按照预设的业务逻辑对请求进行处理
期间涉及到数据的增删改查，还需要访问数据库服务器
最后，WEB 服务器会将处理好的结果响应给用户端
用户端将拿到的结果渲染出页面展示给用户看
注意：目前我们的 WEB 服务器（Tomcat）与数据库服务器（MySQL）在同一台 PC 上

2 网页基础

什么是前端和后端

前端和后端是软件开发中的两个重要组成部分，它们会涉及到不同的技术和任务
前端主要关注用户页面和用户交互（页面相关）
后端主要关注服务器端的业务逻辑和服务可靠性，包括处理业务请求、存储数据、保证服务稳定可靠等等

2.1 什么是WEB前端

指使用 HTML、CSS、JavaScript 等技术，根据设计师提供的网页标注图进行代码编写，并将其转换为浏览器可以识别的网页界面，俗称网页。

HTML(内容层):负责页面的内容-文字链接图片…
CSS(样式层):负责页面的样式-颜色大小位置表现…
JavaScript(行为层):负责页面的行为-交互效果轮播图

页面的内容与样式也有标准,它的标准是由W3C(万维网联盟)制定的

2.2 基本概念

HTML（Hyper Text Markup Language）超文本标记语言，负责网页的内容
超文本：除了文本以外，我们还可以向网页中插入图片、超链接、表格、表单、音频、视频等等
目前我们学习的版本是最新的 HTML5，简称 H5

HTML 由大量的标记/标签构成，分为：
双标记标签：<head></head>
单标记标签：<br/>或 <br>，两种写法都可以
完整的网页结构：

<!-- 表示当前文档是html5版本 让浏览器使用h5的规范解析 -->
<!DOCTYPE html>
<!--表示网页的开始与结束 lang="en"表示网页是一个英文网站 zh表示中文-->
<html lang="en">
<!--网页头部,存放一些配置信息-->
<head>
    <meta charset="UTF-8"> <!--配置编码,为了认识中文-->
    <title>我是网页标题</title> <!-- 配置网页的标题 -->
</head>
<body> <!--网页展示的内容-->
第一个网页的内容
</body>
</html>

HTML 文件的后缀名是 .html 或 .htm，会按顺序从上往下、从左往右依次解析执行
HTML 属性
属性：也称为特征，描述标签某一方面的特点
html 有很多的属性和值，用来修改元素的样式和状态
写法：<标签属性名 1=“属性值 1” 属性名 2=“属性值 2”></标签>

要求：

属性的声明必须在开始标记里
一个元素可能不只有一个属性，多个属性之间使用空格隔开
多个属性之间不区分先后顺序
属性名与属性值之间使用等号连接
属性值要包裹在引号中
单值属性：只有一个与属性名同名值，值可以省略不写，比如 readonly 只读

2.3 注释

用来解释代码且不会执行的文本
注释格式： 
快捷键： Ctrl+/ 添加注释，再按一次取消注释
注释不能嵌套注释，也不可以写在标签里！

3 HTML常用标签

3.1 文本相关标签

<b>加粗文字</b>
<i> 斜体文字</i>
<u>下划线文字</u>
<s>删除线文字</s>
<hn>n级标题</hn>n为1到 6 独占一行，字体加粗，有垂直行间距
<p>段落</p> 独占一行，有垂直行间距
<hr>独占一行的灰色水平分割线
空格折叠现象：连续的多个空格或换行会折叠成一个空格显示，使用<br>换行
转义字符: <小于号 >大于号  空格
生成假文：输入 lorem 按 Tab 补全即可
有序列表OrderedList<ol></ol>
无序列表UnorderedList<ul></ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本处理</title>
</head>
<body>
<!-- 1.文本标签 -->
普通文字
<b>加粗文字</b>
<s>删除线文字</s>
<i>斜体文字</i>
<u>下划线文字</u>
<mark>高亮&nbsp;&nbsp;&nbsp;标记文字</mark>

<!--换行标签-->
<br>
<!--&lt;转义符号,在页面显示一个小于号 less than
&gt;转义符号,在页面显示一个大于号greater than-->
我最喜欢&lt;tom&gt;写的静夜思

<!--2.标题字-->
<!--h1~h6 h4的字号和普通文字一样大-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级</h7>

<!-- 3.段落标签 -->
<p>吃葡萄不吐葡萄皮</p>
<p>吃葡萄不吐葡萄皮</p>
<p>吃葡萄不吐葡萄皮</p>
<!--生成假文 先写lorem 再按Tab补全-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda at corporis dolore eum in inventore nobis numquam, obcaecati quaerat quis quo ratione saepe sint tempora unde, velit voluptate voluptates?</p>

<!-- 生成一条水平的灰色分割线   -->
<hr>

<!-- 4.有序列表 ordered list 里面每一条数据称作:列表项 list item-->
<!--type属性默认1阿拉伯数字 A大写字母 a小写字母 I大写罗马数字 i小写罗马数字-->
<ol type="i">
    <li>把冰箱门打开</li>
    <li>把大象塞进去</li>
    <li>把冰箱门关上</li>
</ol>
<!-- 5.无序列表ul(unordered list) 列表项还是li(list item)-->
<!-- type="none"去掉无序列表项前的标识符(黑色实心圆) -->
<ul type="none">
    <li>《Think in Java》</li>
    <li>《Java从入门到精通》</li>
    <li>《颈椎康复指南》</li>
</ul>
<hr>
</body>
</html>

3.2 分区元素

分区标签：可以理解为一个区域，对多个具有相同或相似结构的标签进行统一管理

<div></div>块级分区
<span></span>行内分区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分区元素</title>
</head>
<body>
<!--行内分区元素 span不会换行 用来选中一行中的一部分 -->
我是JSD240328班级的<span style="color:red;">小可爱</span>
<hr>
<!--块级分区元素 独占一行 默认宽度为父级宽度的100% 高度为0-->
<div></div>
我是文字
<div>我是文字</div>
我是文字
</body>
</html>

HTML5 新增了一些带有语义的分区标签

<header></header>定义网页或一个区域的头部
<nav></nav>定义网页的导航部分
<main></main>定义网页的主要内容
<section></section>定义网页的一个区块或章节
<article></article>定义网页中独立完整的内容，比如博客文章或新闻报道
<aside></aside>定义网页的侧边栏或者附属信息
<footer></footer>定义网页或一个区域的页脚部分

<hr>
<!-- 目前div的使用频率较高   -->
<div class="header">顶部条</div>
<div class="nav">导航栏</div>
<div class="aside">侧边栏</div>
<div class="main">主体</div>
<div class="article">文章</div>
<div class="footer">尾部</div>
<hr>
<!-- h5新增的一些带有语义的分区标签 -->
<header>头部</header>
<nav>导航栏</nav>
<main>主体</main>
<article>文章</article>
<section>区域</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

其实在用户看来是没有区别的，只不过这样会大大提高代码的可读性与模块复用性、也有利于检索

3.3 URL路径

URL（Uniform Resource Locator）统一资源定位符，俗称路径，用来标识资源的位置

3.3.1 相对路径

从当前 html 文件的位置出发去找资源
如果 html 与资源在同一个目录下，直接写资源的名字，如：1.png
如果资源在 html 的下一级目录，先写目录名再写目录里的资源，如：img/2.png
如果资源在 html 的上一级目录，先回到上一级再找资源，如： …/3.png

3.3.2 绝对路径

从根目录处开始找资源，不需要当前文件的位置

优点：节省本地服务器的存储空间
缺点：资源不稳定如果远程服务器删除此资源，本地服务器就引用不到了
网络资源：从协议开始，如： https://cdn.tmooc.cn/bsfile//courseImg///f044221ee737404e91584a4d083764bd.png

3.4 图片插入

img 标签用来向页面插入图片

src 表示资源的路径
alt 表示图片无法显示时的替代文本
title 鼠标悬停时显示的描述文本
图片本身有大小，修改图片宽高时要注意图片本身的宽高比如果设置的宽高不符合图片本身的宽高比，图片会变形–图片比例失真
解决方案：宽或者高只设置一个，另外一个会自动随之更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片插入</title>
</head>
<body>
<!--
从当前文件出发去找资源:
1)图片与文件在同一个文件夹,直接写图片的全名
2)图片在文件的下一级文件夹,先写文件夹名,再写文件夹下的图片全名
3)图片在文件的上一级文件夹,先写../回到上一级,再写图片全名
-->
<!-- alt图片不能正常显示时替换的文字  -->
<!-- title表示鼠标悬停在图片上显示的描述文字   -->
<img src="2.png" alt="">
<img src="img/1.jpg" alt="">
<img src="../3.png" alt="" title="我是一张五常大米的图片">
<img src="../3.pg" alt="哎呀,图片走丢了">
<!-- 使用绝对路径 -->
<!-- 如果远程服务器的资源删除，绝对路径就引用不到图片资源了  -->
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg" alt="">
<!-- width设置图片宽度 height设置图片高度
   只要设置一个,另外一个会跟着改,如果两个一起设置,注意图片的原始比例防止图片失真-->
<img src="img/zly.jpg" width="300px" height="300px" alt="">
</body>
</html>

3.5 超链接练习

a 标签用于向页面插入超链接

href 表示要链接的资源路径
超链接可以链接网络与内部资源，还可以链接图片
通过 a 标签包裹 img 标签可以实现图片超链接
锚点：先给对应的 html 内容添加 id，再通过#id 值选中，即可跳转到锚点位置，#表示直接跳转到页面顶部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超链接</title>
</head>
<body>
<!-- 跳转到本地资源 -->
<a href="p2_文本处理.html">跳转到今日的第2个页面</a>
<a href="p4_图片插入.html">跳转到今日的第4个页面</a>
<!-- 跳转到外部资源 -->
<a href="https://www.baidu.com/">百度首页</a>
<a href="https://www.tmooc.cn/">TMOOC首页</a>
<!-- 跳转至本地的图片资源 -->
<a href="2.png">即将打开一张图片</a>
<!-- 图片链接   -->
<a href="https://www.baidu.com/">
  <img src="2.png" alt="" width="300px">
</a>
<hr>
<!-- _blank打开一个空白页 _self刷新当前页面  -->
<a href="https://www.baidu.com/" target="_blank">百度1</a>
<a href="https://www.baidu.com/" target="_self">百度2</a>
<hr>
<!-- 锚点 -->
<!--p*20>lorem Tab补全-->
<h1>第一序列</h1>
<a href="#c1">快速跳转至第1章</a>
<a href="#c2">快速跳转至第2章</a>
<a href="#c3">快速跳转至第3章</a>

<h3 id="c1">第一章</h3>
第一章内容:从黑暗的混沌中醒来，少年任小粟擦了擦自己额头上的汗，然后看向门口的那个十三、四岁小男孩。

“六元，有没有什么事情？”任小粟问道。

被称呼为六元的小孩其实全名叫颜六元。

颜六元长得一副人畜无害的模样，看起来就很无辜，然而他手里却握着一柄骨刀守在门口，此时深夜，他看起来已经很困了但始终不曾闭眼，因为他要守夜。

颜六元摇摇头说道：“没事，你脑袋里面这病到底怎么回事，集镇上的医生也看不出是什么病吗？”

“你不用操心这种事情，我这不是病，”任小粟语气果决地说道：“天快亮了，我准备出去打猎，你睡一会儿按时去学堂上课。”

“哦，”颜六元低沉的点点头：“在这废土里，学习好有什么用……”

“我说有用就有用，”任小粟用不容置疑的语气说道。

“我也要去打猎，”颜六元瘪着嘴巴。

“你要出点什么意外谁来守夜？昏迷的我？”任小粟站起身来准备去集镇中心打水，天亮的时候集镇上就没有那么危险了。

这里的夜晚，是法外之地。

……

阴霾的天空有乌云在不断翻滚，云层中一滴酸雨终于坠落，它在狂风中不断飘摇，最终啪嗒一声，落在了任小粟的面前。

少年任小粟趴在荒野的地面上，他皱了皱眉头心说今天运气有点不好，猎物还没等来竟然先等来了酸雨。

有人说，在这废土之上行走必须要小心野兽。

<h3 id="c2">第二章</h3>
第二章内容:从黑暗的混沌中醒来，少年任小粟擦了擦自己额头上的汗，然后看向门口的那个十三、四岁小男孩。

“六元，有没有什么事情？”任小粟问道。

被称呼为六元的小孩其实全名叫颜六元。

颜六元长得一副人畜无害的模样，看起来就很无辜，然而他手里却握着一柄骨刀守在门口，此时深夜，他看起来已经很困了但始终不曾闭眼，因为他要守夜。

颜六元摇摇头说道：“没事，你脑袋里面这病到底怎么回事，集镇上的医生也看不出是什么病吗？”

“你不用操心这种事情，我这不是病，”任小粟语气果决地说道：“天快亮了，我准备出去打猎，你睡一会儿按时去学堂上课。”

“哦，”颜六元低沉的点点头：“在这废土里，学习好有什么用……”

“我说有用就有用，”任小粟用不容置疑的语气说道。

“我也要去打猎，”颜六元瘪着嘴巴。

“你要出点什么意外谁来守夜？昏迷的我？”任小粟站起身来准备去集镇中心打水，天亮的时候集镇上就没有那么危险了。

这里的夜晚，是法外之地。

……

阴霾的天空有乌云在不断翻滚，云层中一滴酸雨终于坠落，它在狂风中不断飘摇，最终啪嗒一声，落在了任小粟的面前。

少年任小粟趴在荒野的地面上，他皱了皱眉头心说今天运气有点不好，猎物还没等来竟然先等来了酸雨。

有人说，在这废土之上行走必须要小心野兽。

<h3 id="c3">第三章</h3>
第三章内容:
从黑暗的混沌中醒来，少年任小粟擦了擦自己额头上的汗，然后看向门口的那个十三、四岁小男孩。

“六元，有没有什么事情？”任小粟问道。

被称呼为六元的小孩其实全名叫颜六元。

颜六元长得一副人畜无害的模样，看起来就很无辜，然而他手里却握着一柄骨刀守在门口，此时深夜，他看起来已经很困了但始终不曾闭眼，因为他要守夜。

颜六元摇摇头说道：“没事，你脑袋里面这病到底怎么回事，集镇上的医生也看不出是什么病吗？”

“你不用操心这种事情，我这不是病，”任小粟语气果决地说道：“天快亮了，我准备出去打猎，你睡一会儿按时去学堂上课。”

“哦，”颜六元低沉的点点头：“在这废土里，学习好有什么用……”

“我说有用就有用，”任小粟用不容置疑的语气说道。

“我也要去打猎，”颜六元瘪着嘴巴。

“你要出点什么意外谁来守夜？昏迷的我？”任小粟站起身来准备去集镇中心打水，天亮的时候集镇上就没有那么危险了。

这里的夜晚，是法外之地。

……

阴霾的天空有乌云在不断翻滚，云层中一滴酸雨终于坠落，它在狂风中不断飘摇，最终啪嗒一声，落在了任小粟的面前。

少年任小粟趴在荒野的地面上，他皱了皱眉头心说今天运气有点不好，猎物还没等来竟然先等来了酸雨。

有人说，在这废土之上行走必须要小心野兽。

<a href="#">快速跳转至顶部</a>
</body>
</html>

3.6 表格练习

<table></table> 表示整个表格包含表格的全部内容
<tr></tr> 表示表格中的一行 table row
<td></td> 表示表格中的一个单元格 table datacell
单元格是真正存放数据的地方，一行有几个单元格，表示一行有几列
<caption></caption> 表格的标题
<th></th> 行/列的标题文字加粗居中显示
表格属性：
border=“1px” 给表格添加边框
style=“border-collapse: collapse;” 表格默认的边框是带有间距的，想去掉可以加这句代码
合并单元格：写在 td 里，被合并的单元格一定得删掉！
colspan=“n” 跨列
从当前单元格开始，向右合并 n 个单元格（n 也包含当前单元格）
rowspan="n"跨行
从当前单元格开始，向下合并 n 个单元格（n 也包含当前单元格)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网页表格</title>
</head>
<body>
<!--table表格的开始与结束 border表格边框-->
<table border="1px" style="border-collapse: collapse;">
  <caption>爱好表</caption>
  <!--tr表格行 table row-->
  <tr>
    <!--th表格标题 文字加粗居中-->
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  <tr>
    <!--单元格 table datacell 真正存放数据的地方 一行有几个单元格就有几列-->
    <td>1</td>
    <td>传奇</td>
    <td>玩偶</td>
  </tr>
  <tr>
    <td>2</td>
    <td>伟超</td>
    <td>丽颖啊赵丽颖</td>
  </tr>
  <tr>
    <td>3</td>
    <td>硕博</td>
    <td>伟超</td>
  </tr>
</table>
<table border="1px">
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr>
    <!-- colspan横着合并,跨列 从当前单元格开始向右合并n个单元格-->
    <!-- rowspan竖着合并,跨行 从当前单元格开始向下合并n个单元格-->
    <!-- 注意:被合并的单元格一定得删掉!-->
    <td colspan="2">2-1</td>
    <!-- <td>2-2</td>-->
    <td>2-3</td>
    <td rowspan="3">2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    <!--        <td>3-4</td>-->
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <!--        <td>4-4</td>-->
  </tr>
</table>

<table border="1ox" style="border-collapse: collapse;">
  <caption>购物车</caption>
  <tr>
    <th>商品编号</th>
    <th>商品名称</th>
    <th>商品价格</th>
  </tr>
  <tr>
    <td>1</td>
    <td>小米Air</td>
    <td>5877</td>
  </tr>
  <tr>
    <td>2</td>
    <td>华为遥遥领先</td>
    <td>8877</td>
  </tr>
  <tr>
    <td>总价:</td>
    <td colspan="2">10000</td>
  </tr>
</table>
</body>
</html>

3.7 表单

表单提供了一些可视化的输入控件，会自动收集整理用户输入的内容，并提交给服务器
<form></form> 表示表单的开始与结束
属性：

action=“url” 向哪个地址提交数据，如果不写会提交给当前页面，也可以写一个#号占位
type 控件类型
name 控件名
value 可以设置输入框的默认值，如果是按钮，则设置的是按钮上显示的文本
placeholder 提示占位文本
maxlength 设置输入的最大长度
readonly 设置文本控件只读，能看不能改，数据可以提交
checked 单选框使用此属性可以设置选项默认选中

<input type="text"> 文本输入框
<input type="password"> 密码框
<input type="radio"> 单选框 注意设置name与value属性！
<input type="checkbox">多选框 注意设置name与value属性！
<input type="date">日期
<input type="file">文件
<input type="submit" value="提交按钮">    
<input type="reset" value="重置按钮">    
<input type="button" value="普通按钮">

按钮的另外一种写法：

<button type="submit">提交</button>    
<button type="reset">重置</button>    
<button type="button">按钮</button>

下拉选框： selected 可以设置默认选中

<select name="city">       
   <option value="1" selected>北京</option>        
  <option value="2">上海</option>        
</select>

label 关联控件：用于 form 中文本和控件的关联，单击文本如同单击控件

<input type="checkbox" id="agree">    
<label for="agree">我同意相关的服务协议</label>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--表单的所有内容都需要写到form标签里
action表示表单收集到的数据提交到哪 #占位符表示暂时提交到当前页 -->
<form action="#">
    <!-- input输入框 type控制输入框的类型 placeholder设置提示文本
    表单元素必须加name属性才可以提交 uname=tom&upwd=123
    value设置输入框的默认值,如果是按钮,设置的是按钮上显示的文字-->
    <!--text普通文本输入框 password密码输入框 -->
    用户名<input type="text" value="tom" placeholder="请输入用户名" name="uname">
    密码<input type="password" placeholder="请输入密码" name="upwd">
    <hr>
    <br>
    <!--type为radio表示单选 必须要设置同一个name才能实现单选
     而且每个单选项要设置value值,否则提交的是on-->
    性别:
    <input type="radio" name="gender" value="1" checked>男
    <input type="radio" name="gender" value="0">女
    <br>
    爱好:
    <input type="checkbox" name="like" value="cy" checked>抽烟
    <input type="checkbox" name="like" value="hj">喝酒
    <input type="checkbox" name="like" value="tt">烫头
    <input type="checkbox" name="like" value="java" checked>学Java
    <br>
    生日:<input type="date"><br>
    幸运色:<input type="color"><br>
    头像:<input type="file"><br>
    <br>
    <input type="checkbox" id="yes">
    <!--label关联控件的for属性值是被关联控件的id-->
    <label for="yes">请同意此协议</label>
    <hr>
    <!--submit提交按钮 reset重置按钮 button普通按钮配合后面的JS使用-->
    <input type="submit" value="点我提交">
    <input type="reset" value="点我重置">
    <input type="button" value="普通按钮">
    <button>普通按钮</button>
    <hr>
    <!--selected单值属性 设置默认被选中-->
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="cq">重庆</option>
        <option value="yt">烟台</option>
    </select>
</form>
</body>
</html>

必须掌握!

value加在输入框上,是设置什么?设置显示的默认值,用户输入的值也保存在value属性中
value加在按钮上,是设置什么?设置按钮上显示的文字
value加在单选/多选/下拉选框选项上,是设置什么? 设置选中当前选项时提交的值
只读属性是什么?readonly单值属性只允许看,不允许编辑
怎么设置单选/多选选项的默认选中? checked单值属性
怎么设置下拉选框选项的默认选中? selected单值属性
写单选时,必须要写的两个属性是什么? name将所有选项分到同一组 value不然提交的是on

3.8 视频插入

src= “插入视频资源的路径”
controls 显示播放控件单值属性
muted 设置静音，必须设置静音才能自动播放单值属性
autoplay 自动播放单值属性
loop 循环播放单值属性
poster= "…/2.png"设置封面，未播放时显示，有自动播放可不设置封面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频插入</title>
</head>
<body>
<video src="img/wdsj.mp4" controls muted autoplay loop style="width:500px;">
</video>
</body>
</html>