目录
HTTP 概述
超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。HTML(超文本标记语言)是一种用于创建网页的标准标记语言。 HTML 不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。 它不是一种编程语言,而是一种标记语言。
上图描述了客户端和服务器的交互过程。当用户在浏览器输入网址后,浏览器与服务器建立了一个连接,浏览器给 Web 服务器发送了一个 HTTP 请求,服务器接收并解析请求后,返回响应。HTTP 响应中包含状态代码和返回资源的内容(响应正文)。
常见状态码
- 200 :成功。
- 302:跳转。
- 400 :客户端请求有语法错误,服务器端不能理解。
- 401 :该请求可能未经过授权。
- 403 :服务器端收到该请求,但是拒绝为它提供服务,可能是没有权限等等。不被允许。
- 404 :该资源没找到。不存在的页面。
- 500 :服务器端发生了一个不可预知的错误。
- 503 :服务器端当前还不能处理客户端的这个请求,可能过段时间之后才能恢复正常。
一个网页的基本结构:
<!doctype html>
<html>
<head>
<title>HTML 简介</title>
</head>
<body></body>
</html>
<!DOCTYPE html>
是我们的文档声明头。他告诉了浏览器,本文档处理的是 HTML 文档。
html
标签即根元素,此处表示文档的开始。
head
标签是网页的头部,设置网页的相关信息。
title
标签设置网页标题。
body
标签定义文档的主体,也就是我们的主要内容。
实验环境:VScode
HTML注释
HTML常用标签
HTML 标签与大小写无关的,例如 <body>
和 <BODY>
表示的意思是一样的,都代表“主体”,推荐使用小写。
基本标签
双标签(双标记)
双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下:
<标记名></标记名>
常见的双标签有:
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
例子 <a></a>
:
<a href="https://www.lanqiao.cn">实验楼</a>
单标签(单标记)
单标记也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下:
<标记名/>
常见的单标签有:
<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />
标签的关系
- 嵌套关系
<head>
<title> </title>
</head>
- 并列关系
<head></head>
<body></body>
HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
例子:
<p>I Love You</p>
注:这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>
,以及一个结束标签 </p>
。元素内容是:I Love You
。
常用标签
标题标签(h系列)
h
标签有六种 h1
,h2
,h3
,h4
,h5
,h6
,它代表着我们的标题。
<!doctype html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
段落标签(p 标签)
p
标签是我们的文本标签。删掉上段代码 <body>
标签里的内容,把下面的内容放到 <body>
标签里面去。
<p>我是第一段文字,实验楼,做实验,学编程</p>
<p>我是第二段文字,实验楼,做实验,学编程</p>
文本格式标签
图片标签
图片
<p>实验楼图片:</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />
HTML 的图像是通过标签 <img>
来定义的。 语法: <img src="图片地址"/>
。放在<body/>里面
图片属性
<img src="./范例图片.jpg" alt="图片加载失败" title="这是一张图片,当你鼠标悬停在图片上方会显示这行字">
<br>
<img src="./111.jpg" alt="图片加载失败">
<br>
<img src="./范例图片.jpg" alt="" width="200" title="不同大小的图片">
<br>
<img src="./范例图片.jpg" alt="" height="600" width="100" title="不同比例的图片">
音频标签
<audio src="./如愿.MP3" controls></audio>
<audio src="./如愿.MP3" loop controls autoplay>如愿</audio>
视频标签
autoplay想使用必须加用muted
<video src="./视频.mp4" width="400"></video>
<video src="./视频.mp4" width="400" controls loop muted></video>
相对/绝对路径
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="csdn图片加载失败" title="这是一张图片,当你鼠标悬停在图片上方会显示这行字">
超链接(a 标签)
<a>
标签是超链接标签,点击它可以跳转到一个网页。
<a href="https://www.lanqiao.cn/">实验楼</a>
<a href="https://www.lanqiao.cn/courses/43/learning/?id=152&compatibility=false">跳转到蓝桥杯</a>
<a href="https://www.bilibili.com/video/BV1kM4y127Li/?p=13&spm_id_from=pageDriver&vd_source=3abc663d9ac98eba628318cd01ab85e4">跳转到B站</a
<a href="https://www.bilibili.com/video/BV1kM4y127Li/?p=13&spm_id_from=pageDriver&vd_source=3abc663d9ac98eba628318cd01ab85e4"
target="_blank">跳转到B站</a>
<a href="#">空链接</a>
div 标签
<div>
标签是一个块级元素,块级元素占据其父元素(容器)的整个空间,你可以把它想成一个盒子。 <div>
能够设置其宽高
<div style="width:200px;height:200px;background:pink">块级元素</div>
这里设置的 style,后面我们会进行学习,现在只是为了便于产生效果,使大家更好理解。在这里的效果是生成一个宽高 200 像素的粉色 div。
换行标签和空格字符
在浏览器显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行,可以使用 <br/>
标签。如果想使用空格的话可以使用
字符。
<body>
<p>这是一段文字 前面有很多空格但是只显示一个空格</p>
<p>这是一段文字 用了空格字符nbsp</p>
<br />
<p>上面是换行符br</p>
<hr>
<p>上面是水平分割线hr</p>
</body>
综合应用
容器标签(div和span)
<!-- div大盒子,独占一行 -->
<div>div</div>
<div>div</div>
<!-- span小盒子,不独占一行 -->
<span>span</span>
<span>span</span>
字符实体
列表表格表单
列表
无序列表
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
有序列表
<ol>
<li>起床</li>
<li>刷牙</li>
</ol>
定义列表
<dl>
<dt>姓名</dt>
<dd>张三</dd>
<dd>李四</dd>
</dl>
表格
标签
tr:(tablerow)
td:(tablehead)
td:(tabledata)
<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>
表格一般都有标题,在 HTML 中表格标题通过 <caption>
定义。
<table border="1" width="300px" height="150px">
<caption>
表格标题
</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
单元格合并
<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>
table与div比较
在网页中可以使用很多个 div,在网页制作中,使用 div 可以将网页中的任何元素布局到网页中的任何位置。
同样的效果,使用 div 布局能比表格更加灵活,但是我们需要根据不同的场景使用不同的布局方式,现在我们来看看两种布局的优缺点。
table 元素布局:
- 优点:
- 理解比较简单。
- 不同的浏览器看到的效果一般相同。
- 缺点:
- 显示样式和数据绑定在一起。
- 布局的时候灵活度不高。
- 一个页面可能会有大量的 table 元素,代码冗余度高。
- 增加带宽。
- 搜索引擎不喜欢这样的布局。
div 元素布局:
- 优点:
- 符合 W3C 标准。
- 搜索引擎更加友好。
- 样式的调整更加方便,内容和样式的分离,使页面和样式的调整变得更加方便。
- 节省代宽,代码冗余度低。
- 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
表单
<form>
标签用于创建 HTML 表单,常见的表单格式为:
<form name="" method="" action=""></form>
- name:定义表单的名字。
- method:定义表单结果从浏览器传送到服务器的方式,默认参数为:
get
。post
安全性更高,因此常用作传输密码等,而get
安全性较低,一般用于查询数据。 - action:发送数据要去的地址。它的值必须是一个有效的 URL,可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者
action="#"
,则数据将被发送到包含表单的页面的 URL。
input标签
<body>
账号:<input type="text" >
<br><br>
密码:<input type="password" >
<br><br>
性别: <input type="radio">
<br><br>
求职意向:<input type="checkbox">前端 <input type="checkbox">后端
<br><br>
上传文件:<input type="file">
</body>
input标签占位文本
账号:<input type="text" placeholder="请输入账号">
<br><br>
密码:<input type="password" placeholder="请输入密码">
单选框radio
男 <input type="radio" name="gender">
女 <input type="radio" name="gender" checked>
<!-- name附上的属性必须相同,否则不能实现单选功能 -->
<!-- 加上checked的话就是默认一开始就是勾选这个 -->
上传多个文件
上传文件:<input type="file" multiple>
多选框默认勾选
<input type="checkbox" checked>我已阅读并同意注册条款
下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>厦门</option>
<option>福州</option>
<option>杭州</option>
</select>
<!-- 默认勾选第一个,如果不想默认第一个,可以在你想的那个option后面加selected -->
文本域
个人描述<textarea>请输入你的个人描述</textarea>
label标签
性别:
<input type="radio" name="gender" id="men"><label for="men">男</label>
<label><input type="radio" name="gender">女</label>
button按钮
<form>
账号:<input type="text" placeholder="请输入账号">
<br><br>
密码:<input type="password" placeholder="请输入密码">
<br><br>
<button type="button">提交</button>
<button type="submit">上传</button>
<button type="reset">重置</button>
</form>
代码规范
使用正确的文档类型
文档类型声明位于 HTML 文档的第一行:
<!doctype html>
可以省略 html 和 body 标签但不推荐
在标准 HTML5 中, <html>
和 <body>
标签是可以省略的,比如下面的写法也是正确的:
<!doctype html>
<head>
<title>页面标题</title>
</head>
<h1>我是标题</h1>
<p>我是段落。</p>
但是不推荐省略掉,建议还是写成下面这样:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落。</p>
</body>
</html>
使用小写元素名
HTML5 元素名可以使用大写和小写字母,建议使用小写字母,会显得更加好看一点,千万不要使用大小写混写,那样会显得很不专业。建议的写法如下:
<section>
<p>我是段落。</p>
</section>
关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如 <p>
元素),但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错:
<section>
<p>我是段落甲。
<p>我是段落乙。
</section>
建议写成下面这样:
<section>
<p>我是段落甲。</p>
<p>我是段落乙。</p>
</section>
关闭空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要关闭,我们可以这样写:
<meta charset="utf-8">
建议的写法是还是关闭:
<meta charset="utf-8" />
使用小写属性名
同样的 HTML5 属性名允许使用大写和小写字母。但是我们依然建议使用小写字母:
<div class="test"></div>
属性值
HTML5 属性值可以不用引号。但是属性值我们推荐使用引号,尤其是属性值有空格的话,一定要使用引号,不然不会起作用,属性的命名如果很长我们建议使用驼峰命名法:
<div class="test changeColor"></div>
图片属性
图片通常使用 alt
属性。 在图片不能显示时,它能替代图片显示。建议定义好图片的尺寸,在加载时可以预留指定空间,减少闪烁。比如:
<img src="syl.png" alt="HTML5" style="width:520px;height:1314px" />
空格前后的等号
等号的前后可以使用空格,也可以不使用,推荐少用空格。
<link rel="stylesheet" href="styles.css" />
避免一行代码过长
使用 HTML 编辑器,一行代码过长时左右滚动代码来查看是不方便的。如果实在太长,建议分为几行来写。
空格和缩进
不要无缘无故的添加空行,一般一个模块或一个功能添加一个空行便于区分,缩进使用两个空格,不建议使用 Tab。
注释
<!-- 这是注释 -->
快捷键为 Ctrl + /
。当然我们首先要选中要注释的代码再使用快捷键。
注:编码风格建议统一,不要乱而杂,另外建议大家养成多写注释的习惯,因为时间久了,如果没有注释,可能你自己都不知道自己当初写的是啥。