Web前端基础之HTML
一、浏览器
火狐浏览器、谷歌浏览器(推荐)、IE浏览器
推荐谷歌浏览器原因：
1、简洁大方,打开速度快
2、开发者调试工具（右键空白处->检查，打开调试模式）
二、开发工具
核心IDE工具
-
Visual Studio Code (VS Code)
微软开发的免费跨平台编辑器，支持智能提示、Git集成、调试功能及丰富的扩展插件。
轻量高效，适用于HTML/CSS/JavaScript及主流前端框架开发。 -
WebStorm
JetBrains推出的专业前端IDE，提供智能代码补全、重构、调试及ESLint集成。
适合复杂JavaScript/TypeScript项目，支持React/Vue等框架。 -
HBuilder
专为前端设计的国产工具，支持uni-app框架实现多平台开发（小程序、H5、App）。
提供实时预览和高效语法提示，适合快速迭代项目。
三、VSCode使用
- VSCode常用快捷键
- 生成浏览器文件的快捷方式:！+回车
- 代码格式化:Shift+Alt+F
- 向上或向下移动一行:Alt+Up或Alt+Down
- 快速复制一行代码:Shift+Alt+Up或Shift+Alt+Down
- 快速保存:Ctrl+S
- 快速查找:Ctrl+F
- 快速替换:Ctrl+H
- 快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改，ol标签同理）
- 快速生成表格结构：table>tr3>td2{单元格}
- VSCode常用插件
1.快速打开浏览器
扩展->搜索open in browser ->点击安装
四、相关概念介绍
- HTML5介绍
HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾。
HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:
标签有两种表现形式:
- 双标签,例如:
<html></html> - 单标签,例如:
<img>
- HTML5的DOCTYPE声明
DOCTYPE是document type(文档类型)的缩写。是H5的声明位于文档的最前面,处于标签之前。他是网页必备的组成部分,避免浏览器的怪异模式。
作用：避免同样的代码在不同的浏览器上展示不同的效果
3.HTML5基本骨架
- html标签
定义HTML文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其他元素要包裹在它的里面,标签限定了文档的开始点和结束点。
<!DOCTYPE html>
<html>
</html>
- head标签
head标签用于定义文档的头部。文档的头部秒速文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html>
<html><head></head>
</html>
- body标签
body元素定义文档的主体。
body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)
它会直接在页面中显示出来,也就是用户可以直观看到的内容
<!DOCTYPE html>
<html><head></head><body>我会显示在浏览器中</body>
</html>
- title标签
- 可定义文档的标题
- 它显示在浏览器窗口的标题栏或状态栏上
- title标签是head标签中唯一必须要求包含的东西,就是说写head一定要写title
- meta标签
meta标签用来描述一个HTML网页文档的属性，关键词等,例如:charset="utf-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8或是gbk,这些都是编码格式,通常使用utf-8。
以下是基本骨架:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我是标题</title></head><body>我会显示在浏览器中</body>
</html>
五、基础语法
1. 标题介绍与应用
标题(Heading)是通过h1-h6标签进行定义的。
h1定义最大的标题 h6定义最小的标题
示例代码：
<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>
技巧:快速生成h1~h6快捷键:h$*6
-
正确使用标题
请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
正确使用标题有益于SEO
应该将h1用作主标题(最重要的)，其后是h2(次重要的)，再其次是h3，以此类推 -
标题标签位置摆放
在标签中添加属性:align="left|center|right"默认居左
示例代码:
<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1 align="center">一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>
2.标签之段落§、换行(br)、水平线(hr)
- 标签之段落
段落是通过<p>标签定义的
<p>这是一个段落</p>
<p>这是另外一个段落</p>
- 标签之换行—单标签
如果希望在不产生一个新段落的情况下进行换行(新行),请使用<br>标签
<br/>元素是一个空的HTML元素。即是单标签
<p>我是一个段落标签</p>
<p>如果你希望在不产生一个<br/>新段落的情况下进行换行</p>
- 标签之水平线—单标签
<hr/>标签在HTML页面中创建水平线
<hr color="" width="" size="" align=""/>
属性：
- color:设置水平线的颜色
- width：设置水平线的宽度
- size:设置水平线的高度
- align:设置水平线的对齐方式(默认居中),可取值left|right
<hr color="green" width="300px" size="20px" align="left"/>
3. 图片标签<image>
<image>标签定义HTML页面中的图像
注意事项
<image>是单标签,不需要进行闭合操作
(1)、属性：
- src:路径(图片地址与名字)
- alt:规定图像的替代文本,如图片加载失败时,有个占位和文本提示
- width:规定图像的宽度
- height:规定图像的高度
- title:鼠标悬停在图片上给与提示
示例代码：
<img src="1.jpeg" alt="图片加载失败了!" width="300" height="300px" title="风景画">
(2)、图片路径
-
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\workplace\Web\1.jpeg -
相对路径
两者相对关系，两者在同一路径下可以直接访问
子级关系：/
父级关系：…/
同级关系:./(可以省略) -
网络路径
具体的网络地址
4. 超文本链接
超链接指想跳哪里跳哪里
超链接描述
HTML使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的
文档或者当前文档中的某个部分
<a href="url">链接文本</a>
示例代码:<a href="https://www.baidu.com/">点击</a>
超链接属性
在标签<a>中使用了href属性来描述链接的地址
默认情况下,链接将以,以下形式出现在浏览器中(默认效果):
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时,链接显示为红色并带有下划线
特别提示:
后期我们会通过CSS样式修改掉这些效果
5. 常用文本标签
| 标签 | 描述 |
|---|---|
<em> | 定义着重文字 |
<b> | 定义粗体文本 |
<i> | 定义斜体字 |
<strong> | 定义加重语气 |
<del> | 定义删除字 |
<span> | 元素没有特定的含义 |
特别提示
常用文本标签和段落是不同的,段落代表一段文本,而文本标签一般表示文本词汇
6.列表标签之有序列表
- 有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。
<ol><li>有序标签1</li><li>有序标签2</li>
</ol>
- type属性
<ol>的属性type 拥有的选项
- 1 表示列表项目用数字标号（1,2,3…）
- a 表示列表项目用小写字母标号（a,b,c…）
- A 表示列表项目用大写字母标号（A,B,C…）
- i 表示列表项目用小写罗马数字标号（i,ii,iii…）
- I 表示列表项目用大写罗马数字标号（I,II,III…）
- 有序列表嵌套
列表是可以进行嵌套的
<ol><li>有序标签主目录1</li><li><ol><li>有序标签子目录1</li><li>有序标签子目录2</li></ol></li><li>有序标签主目录2</li>
</ol>
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ol><li>苹果</li><li>橘子</li><li>香蕉</li></ol><ol type="a"><li>苹果</li><li>橘子</li><li>香蕉</li></ol><ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li><li>黄瓜</li></ol></li></ol>
</body>
</html>
7.列表标签之无序列表
无序列表实现
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。
<ul><li>无序列表1</li><li>无序列表2</li>
</ul>
type属性
<ul>的属性type 拥有的选项
-
disc 默认实心圆
-
circle 空心圆
-
square 小方块
-
none 不显示
无序列表嵌套
列表是可以进行嵌套的
<ul><li>无序列表主目录1</li><li><ul><li>无序列表子目录1</li><li>无序列表子目录2</li></ul></li><li>无序列表主目录2</li>
</ul>
常见应用场景
- 无序的列表效果
- 导航效果
代码示例:
<body><ul><li>无序列表1</li><li>无序列表2</li></ul><ul type="square"><li>无序列表1</li><li>无序列表2</li></ul><ul><li>无序列表主目录1</li><li><ul><li>无序列表子目录1</li><li>无序列表子目录2</li></ul></li><li>无序列表主目录2</li></ul>
</body>
8.标签之表格
表格标签
表格：
<table>行：
<tr>单元格(列)：
<td>
表格属性
- border：设置表格的边框
- width：设置表格的宽度
- height：设置表格的高度
代码示例:
<body><table border="1" width="400px" height="200px"><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></table>
</body>
9.表格单元格合并
- 水平合并(横向合并,即列之间)：colspan
- 垂直合并(竖向合并,即行之间)：rowspan
- 合并技巧:
水平合并：保留左边，删除右边
垂直合并：保留上边，删除下边
代码示例:
创建55表格进行合并示例,快速创建命令:table>tr5>td*5>{单元格}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>合并单元格6和7：colspan,水平合并</p><p>合并单元格15和20：rowspan,垂直合并</p><p>合并单元格16和17：colspan,水平合并,将合并后的16作为一个整体,垂直合并21和22，rowspan</p><p>水平合并：保留左边，删除右边</p><p>垂直合并：保留上边，删除下边</p><table border="1" width="600px" height="400px"><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr><tr><td colspan="2">单元格6,7</td><td>单元格8</td><td>单元格9</td><td>单元格10</td></tr><tr><td>单元格11</td><td>单元格12</td><td>单元格13</td><td>单元格14</td><td rowspan="2">单元格15,20</td></tr><tr><td colspan="2" rowspan="2">单元格16,17，21，22</td><td>单元格18</td><td>单元格19</td></tr><tr><td>单元格23</td><td>单元格24</td><td>单元格25</td></tr></table>
</body>
</html>
10.Form表单
表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
<form action="url" method="get|post" name="myform"></form>
属性说明
action服务器地址
name表单名称
method中Get和Post的区别
- 数据提交方式，get把提交的数据url可以看到，post看不到
- get一般用于提交少量数据，post用来提交大量数据
表单元素
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
- 表单标签
- 表单域
- 表单按钮
<form><input type="text"><input type="submit">
</form>
11.表单元素
文本框
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
密码框
密码字段通过标签<input type="password"> 来定义
温馨提示
密码字段字符不会明文显示，而是以星号或圆点替代
提交按钮
当用户单击确认按钮时，将数据发送给服务器
<form name="input" action="url" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"> //value 可以更改文本内容
</form>
12.块元素与行内元素（内联元素）
HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的
详细参考地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories
虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用
内联元素和块级元素的区别
| 块级元素 | 内联元素 |
|---|---|
| 块元素会在页面中独占一行（自上向下垂直排列） | 行内元素不会独占页面中的一行，只占自身的大小 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| ⼀般块级元素可以包含行内元素和其他块级元素 | ⼀般内联元素包含内联元素不包含块级元素 |
常见块级元素
div、form、h1~h6、hr、p、table、ul、等
常见内联元素(行内元素)
a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高）
button、img、input等
13.HTML5新增标签
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）`完成标准制定
在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签
注意:如果要考虑兼容性问题,那就还得用DIV+CSS这种写法,不然,就可以直接用新的标签代替
扩展知识
div容器元素，也是页面中见到的最多的元素
H5新标签
<header></header>头部<nav></nav>导航<section></section>定义文档中的节,比如章节、页眉、页脚<aside></aside>侧边栏<footer></footer>脚部<article></article>代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
上面代码等同于以下,不考虑兼容性问题,直接用上面的写法就可以,像小米商城等,为了考虑老版本的浏览器,所以还是采用了下面的写法：
<div id="header"></div><div id="nav"></div><div id="article"><div id="section"></div></div><div id="silder"></div><div id="footer"></div>