HTML笔记（自用）

超文本传输协议（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;&nbsp;&nbsp;&nbsp;用了空格字符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 + /。当然我们首先要选中要注释的代码再使用快捷键。

注：编码风格建议统一，不要乱而杂，另外建议大家养成多写注释的习惯，因为时间久了，如果没有注释，可能你自己都不知道自己当初写的是啥。

hyy2022A

关注

28
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫