HTML学习笔记

Leon J

已于 2024-09-24 16:18:39 修改

阅读量771

点赞数 12

文章标签： html 前端学习笔记

于 2024-02-28 10:28:58 首次发布

本文链接：https://blog.csdn.net/u011259405/article/details/136338921

版权

HTML

文章目录

HTML
@[toc]
1. Basic
1.1 Element Tag
1.2 Attribute
1.3 List
有序列表或者无序列表前的序号设置
自定义列表前面的点
FAQ：序号设置了但不显示

1.4 Table
1.5 Forms
1.6 Input
1.7 Button
1.8 Image
1.10 Class
1.11 ID
1.12 HTML代码替代空格[^5]
1.13 div - Division 区块
1.14 span
1.15 Box Model
1.15.1. Tips
1.15.2 Template:

1.16 nav - 导航栏
1.17 引用

2. HTTP常见状态码
1. 常见的状态码
2. HTTP状态码100-500详细介绍[^4]

3. Tips
1. 快捷输入 (Emmet)
2. `innerHTML` & `outerHTML`

Reference

1. Basic

在这里插入图片描述

1.1 Element Tag

块级元素	内联元素
在页面以块的形式展现	通常在块级元素内
出现在新的一行	不会导致文本换行
占全部宽度	只占必要的部分宽度
`<div>`,`<h1>`-`<h6>`, `<p>`	`<a>`,`<img>`,`<em>`,`<strong>`

units of measurement	Meaning
em	The em unit is relative to the font size of the element itself. If the font size of an element is 16 pixels, 1em is equal to 16 pixels.
px (Pixels)	The px unit is an absolute unit and represents a fixed-size pixel on the screen. Unlike em and rem, px does not scale with the font size of the parent element or the browser’s default font size.
rem	The rem unit stands for “root em.” It is similar to em but is relative to the font size of the root (the element), not the parent element.
%	The percentage unit is relative to the parent element. For example, if you set a width of 50% on an element, it will take up half of its parent’s width. Percentages are versatile and can be used for various properties like width, height, margins, and padding.
vw (Viewport Width)	vw is a unit that represents a percentage of the viewport width. For example, 50vw would be 50% of the viewport width. It’s useful for creating designs that scale with the width of the viewport.
vh (Viewport Height)	Similar to vw, vh represents a percentage of the viewport height.

元素	功能	示例
`<p>`	paragraphs of text
`<span>`	apply styles or scripting to a specific part of text within a larger block.[内联元素]
`<div>`	generic container to group and style larger sections of content.[块级元素]
`<img>`	display picture, src specifies the source URL, alt provides additional explanation

For more detail, refer:[^2]

1.2 Attribute

在这里插入图片描述

Attribute 应放在起始tag的里面, 如果是没有起始tag的tag，也应写在前。

格式： 属性名称+等于号+双引号/单引号

eg: <a href="https://www.baidu.com" target="_blank">百度一下，你就不知道</a>

如这一段文字的意思就是给 Lorem这一段文字加上超链接 https://google.com, target = "_blank"的作用是在新标签页打开指定网址，而不是直接跳转

Attributes	Expression
Hyperlink	href = “”
Target	target = “_blank”
Class	“class_1 class_2”

In HTML and the Document Object Model (DOM), it is common to separate multiple attribute values by a space.

For more detail, refer:[^3]¹

1.3 List

In HTML we have 2 lists: <ul> and <ol>

快速创建多对tag，例： li*n可快速创建n对li tag

<ul>: Unordered List •
<ol>: Ordered List
<li>: Elements in a list

    <!-- Ordered  List -->
    <ol>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
    </ol>

    <p>=====================</p>

    <!-- Unordered List -->
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
    </ul>

有序列表或者无序列表前的序号设置

list-style-type是ol和ul的属性，有以下常用值：

decimal：数字（1、2、3 等）。这是有序列表 <ol> 的默认样式。
disc：实心圆。这是无序列表 <ul> 的默认样式。
none：无标记，即不显示任何标记。
circle：空心圆。
square：实心方块。
decimal-leading-zero：数字前面带 0（01、02、03 等）。
lower-roman：小写罗马数字（i、ii、iii 等）。
upper-roman：大写罗马数字（I、II、III 等）。
lower-alpha：小写英文字母（a、b、c 等）。
upper-alpha：大写英文字母（A、B、C 等）。

自定义列表前面的点

<style>
    ul {
        /* remove default bullet dot */
        list-style-type: none;
    }

    li {
        position: relative;
        padding-left: 20px;
    }

    li::before {
        /* choose one dot from below 3 dots with different size  */
        /* content: '•'; */
        content: '●';
        /* content: '⚫'; */
        position: absolute;
        left: 0;
        color: #769d55;
        line-height: 1;
    }
</style>

<body>
    <ul>
        <li>提高早期研究对确证研究可预测性的方法路径</li>
        <li>临床研究证据充分性的评价</li>
        <li>提高早期研究对确证研究可预测性的方法路径</li>
        <li>临床研究证据充分性的评价</li>
        <li>提高早期研究对确证研究可预测性的方法路径</li>
        <li>临床研究证据充分性的评价</li>
    </ul>
</body>

FAQ：序号设置了但不显示

重点检查：

margin(margin-left)
life-style-type
padding
position

1.4 Table

<table>
    <thead>
        <tr>    <!-- Table Row -->  
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody> 
        <tr>  
            <td>Jackie</td> <!-- Table Body -->  
            <td>Chen</td>
            <td>Male</td>
        </tr>
        <tr>  
            <td>Michael</td> <!-- Table Body -->  
            <td>Jackson</td>
            <td>Male</td>
        </tr>
        <tr>  
            <td>Anny</td> <!-- Table Body -->  
            <td>Dai</td>
            <td>Female</td>
        </tr>
    </tbody>

1.5 Forms

<!-- Forms -->
<form action="form.js" method="POST">
    <div>
        <!-- div -->
        <label>First Name</label>
        <input type = "text" name = "firstname" placeholder="Enter First Name">
    </div>

    <div>
        <label>Last Name</label>
        <input type = "text" name = "lastname" placeholder="Enter Last Name">
    </div>

    <div>
        <label>Age</label>
        <input type = "text" name = "age" placeholder="Enter Age">
    </div>

    <div>
        <label>Age</label>
        <input type = "email" name = "age" placeholder="Enter Age">
    </div>
</form>

action: 内容完成后
method:
name: 输入指定内容后，会与action里的form.js发送指定action的请求
placeholder: 默认值，但如果用户输入内容，则会被覆盖为指定内容

1.6 Input

<input type="text" name="firstname" placeholder="Enter First Name">

提交input表单

<input type="submit" name="submit" value="Submit">

1.7 Button

<button>A Button to Baidu</button>

1.8 Image

<img style="width: 30vw" src="img/baidu.png" alt="This is a img tag">

vw表示占浏览器宽度的比例

1.10 Class

用 .+ class_name 快速创建一个class

<!-- 输入 `.box2`会生成如下 -->
<div class="box2"></div>

1.11 ID

用 #+ id_name 快速创建一个id

<!-- 输入 `#sidebar`会生成如下 -->
<div id="sidebar"></div>

1.12 HTML代码替代空格²

半方大的空白用&ensp;或 

全方大的空白用&emsp;或 

不断行的空白格用 或 

1.13 div - Division 区块

会自动另起一行，代替原本的table，但div可以更为方便快捷的应用CSS

1.14 span

不会自动另起一行，常用于在同一行放置多个元素。

1.15 Box Model

快捷输入/Emmet	语法
设置上、右、下、作边距	`padding: 10px 20px 15px 15px;`
分别设置上下边距和左右边距	`padding: 10px 20px;`
设置上下左右为同一边距	`padding: 10px;`
分别设置上，左右，下边距	`padding: 10px 30px;`

在这里插入图片描述

外边距塌陷（重叠/合并）：两个盒子靠在一起的时候，只会有一个外边距，即取最大的那个外边距作为两个盒子之间的外边距

1.15.1. Tips

1.15.2 Template:

打开编辑器，输入!然后编辑器可以自动填充出html的template

<!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>

</body>
</html>

1.16 nav - 导航栏

1.17 引用

<!-- Quotation 引用 -->
<blockquote>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore quidem odit quam fugit. Nostrum cum saepe alias minima maiores facilis, voluptatem, vel iure pariatur animi ipsum ea corporis quidem ad!</blockquote>

<!-- Abbreviation 缩写 -->
<p><abbr title="Massacheusetts Institute of Technology">MIT</abbr> is a prestigious colleague</p>

<!-- Cite -->
<p><cite>MIT is a prestigious colleague</cite>by Leon</p>

2. HTTP常见状态码

1. 常见的状态码

200（成功） - 服务器成功返回网页
201（已创建） - 请求成功并且服务器创建了新的资源。
304（未修改） - 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
400（错误请求） - 服务器不理解请求的语法。
404（未找到） - 请求的网页不存在
500（服务器内部错误） - 服务器遇到错误，无法完成请求。
503（服务不可用）- 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

2. HTTP状态码100-500详细介绍[^4]

1xx（临时响应信息提示）

这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个1xx。
100（继续）- 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101（切换协议） - 服务器将遵从客户的请求转换到另外一种协议
2xx (成功)

表示成功处理了请求的状态代码。
200（成功） - 服务器已成功处理了请求。
201（已创建） - 请求成功并且服务器创建了新的资源。
202（已接受） - 服务器已接受请求，但尚未处理。
203（非授权信息） - 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204（无内容） - 服务器成功处理了请求，但没有返回任何内容。
205（重置内容） - 服务器成功处理了请求，但没有返回任何内容。与 204响应不同，此响应要求请求者重置文档视图(例如，清除表单内容以输入新内容)。
206（部分内容） - 服务器成功处理了部分 GET 请求。
3xx - 重定向

表示要完成请求，需要进一步操作。客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。建议在每次请求中使用重定向不要超过 5次。通常，这些状态代码用来重定向。
300（多种选择）- 针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301（永久移动）- 请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302（临时移动）- 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303（查看其他位置）- 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304（未修改）- 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305（使用代理）- 请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307（临时重定向）- 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4xx(请求错误)

这些状态码表示请求可能出错，客户端似乎有问题。例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息。妨碍了服务器的处理。
400（错误请求）- 服务器不理解请求的语法。
401（未授权）- 请求要求身份验证。对于登录后请求的网页，服务器可能返回此响应。
403（禁止）- 服务器拒绝请求。如果您在 Googlebot 尝试抓取您网站上的有效网页时看到此状态码(您可以在 Google网站管理员工具诊断下的网络抓取页面上看到此信息），可能是您的服务器或主机拒绝了 Googlebot 访问。
404（未找到）- 服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。
405（方法禁用）- 禁用请求中指定的方法。
406（不接受）- 无法使用请求的内容特性响应请求的网页。
407（需要代理授权）- 此状态码与 401(未授权)类似，但指定请求者应当授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。
408（请求超时）- 服务器等候请求时发生超时。
409（冲突）- 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT请求时可能会返回此代码，以及两个请求的差异列表。
410（已删除）- 如果请求的资源已永久删除，服务器就会返回此响应。该代码与404（未找到）代码类似，但在资源以前存在而现在不存在的情况下，有时会用来替代 404 代码。如果资源已永久移动，您应使用 301指定资源的新位置。
411（需要有效长度）- 服务器不接受不含有效内容长度标头字段的请求。
412（未满足前提条件）- 服务器未满足请求者在请求中设置的其中一个前提条件。
413（请求实体过大）- 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414（请求的 URI 过长）- 请求的 URI(通常为网址)过长，服务器无法处理。
415（不支持的媒体类型）- 请求的格式不受请求页面的支持。
416（请求范围不符合要求）- 如果页面无法提供请求的范围，则服务器会返回此状态码。
417（未满足期望值）- 服务器未满足”期望”请求标头字段的要求。
5xx(服务器错误)

这些状态码表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
500 （服务器内部错误）- 服务器遇到错误，无法完成请求。
500.12- 应用程序正忙于在 Web 服务器上重新启动。
500.13- Web 服务器太忙。
500.15- 不允许直接请求 Global.asa。
500.16- UNC 授权凭据不正确。这个错误代码为 IIS 6.0 所专用。
500.18- URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。
500.100- 内部 ASP 错误。
501 （尚未实施）- 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）- 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）- 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时）- 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）- 服务器不支持请求中所用的 HTTP 协议版本。

3. Tips

1. 快捷输入 (Emmet)

快捷输入/Emmet	语法
设置上下左右为同一边距	`padding: 10px;`
依次为上下边距和左右边距	`padding: 10px 20px;`
依次为上，左右，下边距	`padding: 10px 30px;`
依次为上、右、下、作边距	`padding: 10px 20px 15px 15px;`

lorem+数字 = 放置x个字符作为placeholder	`lorem50`

创建一个指定ID的元素	`div#id-name`
创建一个指定class的元素	`div#class`
创建一个ul元素，嵌套li作为子元素	`ul>li`
创建多个li元素	`li*5`
-> 例1：创建一个无序列表，其中包含 5 个列表项，每个列表项的类名为 item1 、item2 、item3 、item4 、item5	`ul>li.item$*5`
-> 例2：创建一个 3 行 4 列的表格。	`table>tr3>td4`
创建一个带有指定 `src` 和 `alt` 属性的 `<img>` 元素。	`img[src="image.jpg" alt="My Image"]`
创建一个带有指定 `href` 属性的 `<a>` 元素。	`a[href="https://example.com"]`
创建一个指定类型为 `text` 的 `<input>` 元素。	`input[type="text"]`
创建从 `h1` 到 `h6` 的标题元素，内容分别为 `Header 1` 、`Header 2` 等等。	`h${Header $}*6`

2. `innerHTML` & `outerHTML`

innerHTML and outerHTML are properties of an element in the Document Object Model (DOM) of a webpage. both can return child elements and text.

However, innerHTML returns only the contents of the div element, it does not return the element itself.

Example:

HTML:

<div id="example">
  <h1>Hello, world!</h1>
  <p>This is an example of the difference between innerHTML and outerHTML.</p>
</div>

JavaScript:

const div = document.getElementById('myDiv');

console.log(div.innerHTML); 
// Output: <h1>Hello, world!</h1><p>This is an example of the difference between innerHTML and outerHTML.</p>

console.log(div.outerHTML); 
// Output: <div id="example"><h1>Hello, world!</h1><p>This is an example of the difference between innerHTML and outerHTML.</p></div>