HTML 基础
引言
开发一个网站
-
开发前端 ( HTML，CSS，JavaScript )
HTML：骨
CSS：皮
JavaScript：魂 -
开发后端 ( Java )
网页 + 服务器 => 网站 ( web app )
HTML 的作用
HTML：Hypertext Markup Language ( 超文本标记语言 )
HTML 早期设计是用来做报纸排版的，在当下时代，它被用来作为前端的整个网页骨架。
说明
使用 VS Code 来编写 HTML，使用 Chrome 浏览器来运行 HTML 展示结果
一、HTML 标准结构
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
这是一个相对完整的 HTML 结构，最外层是 html 标签，一个 html 文件 的顶层标签就应该是这个带尖号的 html 标签。在 html 标签 中，始终包含一个 head 标签 和 body 标签，
head 标签 中放的是这个 htmI 中的一些属性，
body 标签 中放的是这个 html 要展示的内容。
这样的结构就类似于一个 " 树形结构 "，htmI标签 就是根节点，head 和 body 就是 html 的子节点，那么 head 和 body 是兄弟关系。而 title 又是 head 的子节点，所以 title 也是 html 的孙子节点。
我们也把这个由标签 ( 元素 ) 构成的树，称为 " DOM树 "
D：Document 文档（html本身）
O：Object 对象（每个标签就视为一个对象）
M：Model 模型
这些对象也包含一些属性和方法，然后我们就可以在 JS 中来访问或修改这里的属性，或者调用其中的方法了。（ 这些对象都是浏览器在解析这个 html 文件 的时候，自动创建的。）
二、HTML 标签
下图是一个较为完整的 HTML 结构
第1行：声明当前网页遵守 html5 这个标准，( html5 是最新版本 )
第2行：描述网页的内容是哪种语言 “en” 表示 English，而 lang 表示 language，浏览器可以根据 lang 属性来决定怎么翻译
第3行：head 标签，里面放的是当前 htmI 中的一些属性
第4行：字符集为 “UTF-8”
第6行：描述页面的缩放规则
第7行：title 标签，用来自定义标题
第10行：body 标签，里面放的是当前 htmI 要展示的内容
展示结果：
标签一 注释标签
注释标签看起来和其他语言不太一样，另外，HTML 中写的注释和其他语言注释有一个本质的区别：HTML 这个注释是可能被暴露到外面的，被广大用户看到的。即用户是可能看到包括注释在内的 HTML 完整源代码的。而 Java / C 当我们使用类似 “//” 这样的注释，只在编译之前才能被看到，当编译并运行之后，是不会展示出来的。
和 IDEA 编译器一样，VSCode 能够使用 【Ctrl + / 】这样的操作来进行快速注释和反注释
<!-- 注释内容 -->
标签二 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!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>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
展示结果：
标签三 段落标签
<p>这是一个段落</p>
<!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>
</head>
<body>
<p>这是第一段
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eum animi numquam rerum labore inventore.
Magni excepturi non sed explicabo culpa ea beatae similique doloremque consectetur iure,
alias enim placeat voluptas.</p>
<p>这是第二段
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quam laudantium officia ad libero alias molestias inventore natus,
voluptatem corporis rerum iste! Odit sint natus officiis,
ducimus repellendus voluptatibus nam velit.</p>
<p>这是第三段
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Quam tempore culpa molestiae dolores asperiores adipisci sunt natus dolorum inventore optio maiores molestias officiis numquam,
libero vel ad explicabo! Eveniet, ratione!</p>
</body>
</html>
注意：
① 通过 Lorem 这样的方式可以构造出来一个随机的长文本出来
② 段落与段落之间存在间距
③ 在 HTML 中，内容首尾处的换行, 空格均无效。也就是说，在内容中换行了，但运行后 ( 展示结果 ) 并不会换行
展示结果：
标签四 换行标签
① 换行标签是一个单标签，即不需要结束标签来进行配合
② 下面的带斜杠的写法是规范写法，以防不同浏览器出现显示不同的情况
<br>
<br/>
<!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>
</head>
<body>
<p>这是第一段
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Eum animi numquam rerum labore inventore. <br>
Magni excepturi non sed explicabo culpa ea beatae similique doloremque consectetur iure, <br>
alias enim placeat voluptas.</p>
<p>这是第二段
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/>
Quam laudantium officia ad libero alias molestias inventore natus, <br/>
voluptatem corporis rerum iste! Odit sint natus officiis, <br/>
ducimus repellendus voluptatibus nam velit.</p>
<p>这是第三段
Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br/>
Quam tempore culpa molestiae dolores asperiores adipisci sunt natus dolorum inventore optio maiores molestias officiis numquam, <br/>
libero vel ad explicabo! <br>Eveniet, ratione!</p>
</body>
</html>
展示结果：
标签五 格式化标签
<strong>加粗字体</strong>
<b>加粗字体</b>
<em>倾斜字体</em>
<i>倾斜字体</i>
<del>删除线字体</del>
<s>删除线字体</s>
<ins>下划线字体</ins>
<u>下划线字体</u>
<!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>
</head>
<body>
<strong>加粗字体</strong>
<b>加粗字体</b>
<br/>
<em>倾斜字体</em>
<i>倾斜字体</i>
<br/>
<del>删除线字体</del>
<s>删除线字体</s>
<br/>
<ins>下划线字体</ins>
<u>下划线字体</u>
</body>
</html>
展示结果：
标签六 图片标签
<img src=" " alt=" ">
<!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>
</head>
<body>
<img src="123.png" alt="我是一个 logo" title="这个是我的头像"
width="500px" height="400px" border="5px">
</body>
</html>
注意：
① 图片标签说的就是 img 标签，单词即 image，image 标签必须带有 src 属性，表示需要放置的图片属性。图片路径可以来源于本地路径，亦可以来源于网络路径。
如果使用的是本地路径的绝对路径，直接复制粘贴即可。
如果使用的是本地路径的相对路径，必须以 html 所在位置为基准, 找到图片的位置。
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: 目录名/图片名.jpg
上一级路径: ../目录名/图片名.jpg
如果使用的是网络路径，直接复制粘贴即可。
② alt 属性表示，如果一个图片的地址输入的不正确或者是运行时的网络速度太慢等原因，导致刚刚 src 加载不出来，就会进行一个提示，提示可以自定义。如下：【我是一个 logo】就是一个自定义的 alt 属性。
③ img 标签中的 title 表示，当你点击图片的时候，它就会提示你一个内容。而这个我发现截图不好展示，小伙伴可以自己试一下。
④ width 和 height 表示宽带和高度，px 表示像素单位
⑤ border 表示边框，单位也是像素
展示结果：
标签七 超链接标签
<a href=" ">超链接提示</a>
展示1
<!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>
</head>
<body>
<a href="http://www.sogou.com">这是一个超链接</a>
<a href=""></a>
</body>
</html>
超链接我就不必说了，实际上就是点击到一个平时我们口头上的网页。但我们必须注意一个问题：在使用 html 的时候，必须带上一个超链接的文字提示，否则你就无法通过这个文字提示，来跳转到另一个窗口。也就是你鼠标压根就没地方点。【这是一个超链接】这就是一个文字提示。
展示结果：
展示2
在展示1 中，我们看到跳转链接后，新的页面会代替原有界面，而当我们为代码加上
【target = “blank”】的时候，在点击超链接后，就会生成一个新的页面，而原来的页面还在那里。
<body>
<a href="http://www.sogou.com " target="_blank">这是一个超链接</a>
</body>
展示结果：
展示3
超链接标签中的 href 属性也可以使用本地的文件
<body>
<a href="demo1.html">这是本地的一个 html 文件</a>
</body>
展示结果：
展示4
href 属性写作 “#” 表示不跳转
<body>
<a href="#">这是本地的一个 html 文件</a>
</body>
标签八 表格标签
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域 ( 注意和 th 区分, 范围是比 th 要大的 )
tbody: 表格得到主体区域.
大致示意图：
展示1
<!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>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>Jack</td>
<td>male</td>
<td>21</td>
</tr>
<tr>
<td>Rose</td>
<td>female</td>
<td>23</td>
</tr>
</table>
</body>
</html>
展示结果：
展示2
在展示1 中，我们可以看到，所谓的表格标签并没有格子，于是我们就可以通过添加一些属性来显示我们想要的结果。
① width 和 height 属性分别表示宽度和长度
② border 表示边框，但是因为加在 table 上，而 table 表示整个表格，所以大大小小的表格都加上边框了。
③ cellspacing 属性可以控制两个单元格之间的空隙
<!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>
</head>
<body>
<table width="500px" height="300px" border="1px" cellspacing="0px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>Jack</td>
<td>male</td>
<td>21</td>
</tr>
<tr>
<td>Rose</td>
<td>female</td>
<td>23</td>
</tr>
</table>
</body>
</html>
展示结果：
展示3
如果我们将 cellspacing 写成 “5px”，那么情况就不一样了
<table width="500px" height="300px" border="1px" cellspacing="5px">
展示结果：
标签九 列表标签
无序列表标签：ul + li
有序列表标签：ol + li
自定义列表标签：dl (总标签) + dt (小标题) + dd (围绕标题来说明)
/说明/
u: unordered (无序的)
o: ordered (有序的)
l: list (列表)
<!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>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>吃饭</li>
<li>学习</li>
<li>睡觉</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>吃饭</li>
<li>学习</li>
<li>睡觉</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>大学生的一天</dt>
<dd>吃饭</dd>
<dd>学习</dd>
<dd>睡觉</dd>
</dl>
</body>
</html>
展示结果：
标签十 表单标签
1. form 标签
form 标签描述了要把数据按照什么方式，提交到哪个页面中，action 输入的是待提交页面的路径。
form 标签需要搭配其他标签使用，其他标签亦需要搭配 form 标签 使用。简单来说，form 标签用来做最后提交服务器的动作，而其他标签用来自定义内容的动作。
<form action=" "></form>
2. input 标签
说明
input 标签，可以表示各种用来输入的控件。
简单来说，一个按钮、 一个文本框、一个单选框、一个复选框、或表示一个图形界面的基本元素，都被称为控件。而 input 标签中最核心的属性，就是 type，type 不同的取值就能表示不同的控件类型。
展示1 单行文本框和密码框
<!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>展示1</title>
</head>
<body>
<form action="">
<input type="text"><br/>
<input type="password">
</form>
<form action=""></form>
</body>
</html>
这与我们平时登录网页的输入账号和密码很相似，当我们忘记密码的时候，而网页又默认保存了之前的密码，我们就可以通过将 type 属性的 password 改成 text，也就是将框中的密码从不可见变成可见。这里也应该注意这两个都是单行输入的，不能换行。
展示结果：
展示2 单选框
name 属性：多个单选框之间可以通过 name 属性来关联，如果多个单选框的 name 属性相同，那么就只能取其中的一个。
checked 属性：使用 checked 属性表示默认的值
<body>
<form action="">
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked="checked">未知
</form>
</body>
展示结果：
展示3 多选框
<body>
<form action="">
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 学习
</form>
</body>
展示结果：
展示4 普通按钮
可以通过 onclick 属性来做提示
<body>
<form action="">
<input type="button" value="这是一个按钮" onclick="alert('hello')">
</form>
</body>
展示结果：
展示5 提交按钮
提交按钮就是把当前表单中的用户输入数据，包装成一个 http 请求，发送给服务器。
<body>
<form action=" ">
<input type="text" name="key"><br/>
<input type="submit" value="提交">
</form>
</body>
展示结果：
展示6 清空按钮
<body>
<form action="">
<input type="text" name="key"><br/>
<input type="reset" value="清空">
</form>
</body>
展示结果：
展示7 选择文件
<body>
<form action="">
<input type="file">
</form>
</body>
展示结果：
3. label 标签
label 标签主要是用来搭配 input 标签使用，具体来说是搭配单选框或复选框使用。
label 标签存在的意义就是为了让用户方便的来选中选项，for 属性就表示当前 label 要和哪个input 标签关联起来，这里就需要给对应的 input 标签创建一个唯一身份标识。
<body>
<form action="">
<input type="radio" name="gender" id="male"> <label for="male">男</label>
<input type="radio" name="gender" id="female"> <label for="female">女</label>
<input type="radio" name="gender" id="unknown"> <label for="unknown">未知</label>
</form>
</body>
我们不仅点击小圆点让选择的内容生效，当点击文字的时候，也能生效。
展示结果：
4. select 标签
展示1
<body>
<form action="">
<select>
<option>选择你的出生年份</option>
<option>1997</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</form>
</body>
展示结果：
展示2
selected 属性可以用来展示默认的内容，然后再做选择。
<body>
<form action="">
<select>
<option>吃饭</option>
<option selected="selected">学习</option>
<option>睡觉</option>
<option>运动</option>
</select>
</form>
</body>
展示结果：
5. textarea 标签
textarea 标签可以用来使用多行编辑。
<body>
<form action="">
<textarea cols="30" rows="5"></textarea>
</form>
</body>
展示结果：
标签十一 无语义标签
无语义标签：div + span
div 相当于独占一行的一个大盒子
span 相当于不独占一行是一个小盒子
盒子里面可以装其他的标签，或盒子里面也可以再装盒子。
<!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>Document</title>
</head>
<body>
<div>
<span>吃饭</span>
<span>吃饭</span>
<span>吃饭</span>
</div>
<div>
<span>睡觉</span>
<span>睡觉</span>
<span>睡觉</span>
</div>
<div>
<span>学习</span>
<span>学习</span>
<span>学习</span>
</div>
</body>
</html>
展示结果：
三、HTML 的特殊字符
因为 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>
</head>
<body>
这是一个 文本<br/>
这是一个 文本
<div> < </div>
<div> > </div>
<div> & </div>
</body>
</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>
</head>
<body>
<h1>十七</h1>
<h2>基本信息</h2>
<img src="D:\文件\计算机资料\6. 前端代码\123.png" alt=""
width="200px" height="150px"><br/>
<p>求职意向: Java 开发工程师</p>
<p>联系电话: 123</p>
<p>邮箱: 123@123.com</p>
<a href="https://gitee.com/" target="_blank"> 码云链接</a>
<br/><br/>
<a href="https://www.csdn.net/" target="_blank"> 博客链接</a>
<h2>教育背景</h2>
<ol>
<li>葵花幼儿园</li>
<li>葵花小学</li>
<li>葵花中学</li>
<li>葵花大学</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>C 语言</li>
<li>Java SE</li>
<li>数据结构</li>
<li>MySQL 数据库</li>
<li>Java Web</li>
</ul>
<h2>我的项目</h2>
<h3>1. 留言墙</h3>
<u>功能介绍: </u>
<ul>
<li>支持线上留言</li>
<li>支持线下留言</li>
<li>支持匿名留言</li>
</ul>
<h3>2. 学习小助手</h3>
<u>功能介绍: </u>
<ul>
<li>支持错别字检索</li>
<li>支持线上沟通</li>
<li>支持计时任务</li>
</ul>
<h2>个人评价</h2>
<p>踏踏实实、诚诚恳恳</p>
</body>
</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>
</head>
<body>
<h3>请填写简历信息</h3>
<table width="650px">
<tr>
<td> 姓名 </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> 性别 </td>
<td>
<input type="radio" name="gender" id="male">
<label for="male">
<img src="D:\文件\计算机资料\6. 前端代码\male.png" alt="" width="20px" height="20px">男
</label>
<input type="radio" name="gender" id="female">
<label for="female">
<img src="D:\文件\计算机资料\6. 前端代码\female.png" alt="" width="20px" height="20px">女
</label>
</td>
</tr>
<tr>
<td> 出生日期 </td>
<td>
<select>
<option>--请选择年份--</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select>
<select>
<option>--请选择月份--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择日期--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td> 就读学校 </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> 应聘岗位 </td>
<td>
<input type="checkbox"> 前端开发
<input type="checkbox"> 后端开发
<input type="checkbox"> 测试开发
<input type="checkbox"> 运维开发
</td>
</tr>
<tr>
<td> 掌握的技能 </td>
<td> <textarea cols="30" rows="10"></textarea> </td>
</tr>
<tr>
<td> 项目经历 </td>
<td> <textarea cols="30" rows="10"></textarea> </td>
</tr>
<tr>
<td> <input type="checkbox">我已仔细阅读过公司的招聘要求 </td>
</tr>
<tr>
<td>
<a href="D:\文件\计算机资料\6. 前端代码\2022_7_30\demo4.html" target="_blank">查看我的状态</a>
</td>
</tr>
<tr>
<td> <h3>请应聘者确认：</h3> </td>
</tr>
<tr>
<td>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
展示结果：
扫一扫
4312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
