当前位置：首页 > article >正文

一、html笔记

article 2025/2/2 22:16:06

（一）前端概述

1、定义

前端是Web应用程序的前台部分，运行在PC端、移动端等浏览器上，展现给用户浏览的网页。

通过HTML、CSS、JavaScript等技术实现，是用户能够直接看到和操作的界面部分。

上网就是下载html文档，浏览器是一个解释器，运行从服务器下载的html文件，解析html、css和js代码，呈现网页效果。

2、功能

前端负责将后端提供的数据和逻辑以可视化的形式展现给用户，实现用户与网站或应用的交互。前端开发涉及到多种技术和工具，如框架、库、编辑器等，旨在提升用户体验和交互效果。

3、核心技术

‌HTML‌：超文本标记语言（typer text markup language），用于定义网页的结构和内容，由各种标签组成，包括标题、段落、图像、链接，甚至音乐、程序等非文字元素等。

‌CSS‌：层叠样式表，用于定义网页的外观和布局，控制网页元素的样式和布局。

‌JavaScript‌：一种脚本语言，用于实现网页的动态效果和交互功能，如表单验证、动画效果、异步数据请求等。

4、发展历程与趋势

‌早期发展‌：在互联网发展的早期，前端开发主要是使用HTML和CSS来制作静态网页。随着JavaScript的诞生和浏览器技术的发展，前端开发逐渐从静态向动态转变。

‌现代前端‌：现代前端开发已经发展成为一门涉及多种技术、框架和工具的复杂领域。随着响应式设计、单页面应用（SPA）、前端框架（如React、Vue、Angular）等的出现，前端开发变得更加高效和灵活。

‌未来趋势‌：前端技术的未来发展将更加注重性能优化、跨平台兼容性、用户体验和交互设计等方面。同时，随着WebAssembly、PWA（渐进式Web应用）等新技术的兴起，前端开发的边界也在不断扩展。

5、前端开发流程

‌需求分析‌：理解用户需求，确定前端界面的功能和设计要求。

‌UI设计‌：根据需求分析结果，设计网页的布局、样式和交互效果。

‌编码实现‌：使用HTML、CSS、JavaScript等技术实现UI设计，并进行功能开发。

‌测试与优化‌：对前端界面进行功能测试、性能测试和兼容性测试，并根据测试结果进行优化。

‌部署与维护‌：将前端代码部署到服务器上，并进行后续的维护和更新工作。

6、 BS模式

cs模式需要自己写客户端，bs模式直接用浏览器作为客户端，不用自己写了

# 最简单的web开发例子：

import socket

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8089))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        buf = connection.recv(1024)

        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

        connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))

        connection.close()

if __name__ == '__main__':

    main()

（二）HTML介绍

1、HTML概念

HTML全称是：htyper text markup language 即超文本标记语言

超文本：就是指页面内可以包含文字、图片、链接，甚至音乐、程序等非文字元素。

标记语言：标记（标签）<>构成的语言.

网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html，只能看，不能点击等操作与后台交互

动态网页：html代码是由某种开发语言根据用户请求动态生成的

html文档树形结构图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
    
</body>
    
</html>

2、标签概念

由一对尖括号包裹的单词构成，例如：<html>

所有标签中的单词不能以数字开头

标签不区分大小写.<html> 和 <HTML>.，推荐使用小写.

标签分为两部分：开始标签<a> 和结束标签</a>.，两个标签之间的部分，我们叫做标签体

有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，例如: <br/> <hr/> <input /> <img />

标签可以嵌套，但是不能交叉嵌套. <a><b></a></b>
标签分为三种：
块级标签block：一个标签独占一行，宽度缺省是它的容器的100%，除非设定一个宽度，可以嵌套内联标签和块级标签，如：<p><h1><table><ol><ul><form><div>

内联标签inline：只占自己的内容（文字或图片）长度，不能设置宽width和高height，只能嵌套文本或内联标签，如：<a><input><img><sub><sup><textarea><span>。

行内块标签inline-block：既具有行内标签特性又具有块级标签特性的标签，它们可以与其他元素位于同一行，同时可以设置宽度和高度‌，如：<img><input><textarea><select><label><td><option>。

通过display属性可以将这三种标签互相转换。
inline-block元素之间会产生间隙，由于HTML中的空白字符（如空格、换行、制表符等）被当作渲染内容的一部分。当浏览器解析HTML代码时，这些空白字符会被渲染为文本节点，并在两个inline-block元素之间生成间隔。这个间隔的大小取决于父元素的字体大小，通常会等于当前字体的字符宽度。
<div style="display:inline-block; background-color:red; width:100px; height:100px;"></div>
<div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div>



<div style="display:inline-block; background-color:red; width:100px; height:100px;"></div><div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div>

<div style="font-size:0;">
    <div style="display:inline-block; background-color:red; width:100px; height:100px; font-size:16px;"></div>
    <div style="display:inline-block; background-color:blue; width:100px; height:100px; font-size:16px;"></div>
</div>

<div style="display:inline-block; background-color:red; width:100px; height:100px; margin-right:-4px;"></div>
<div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div>

<div style="display:inline-block; background-color:red; width:100px; height:100px;"></div><div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div>

注意嵌套规则：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

li内可以包含div
习惯上把内联标签与内联标签并列，块级标签与块级标签并列，块级与内联并列可以通过div标签把内联标签放在里面。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [suoning]{
            color: blueviolet;
        }
        .he>div{
            color: bisque;
        }

    </style>
</head>
<body>
    <div class="he">111
        <p class="fr">222
            <div>333</div>
        </p>
        <div>444</div>
    </div>
***************************
    <div suoning="sb">ddd
        <p>pppp</p>
    </div>
     <p suoning="sb2">ddd2
         <p>pppp2</p>
     </p>
</body>
</html>

3、标签的属性

通常是以键值对形式出现的. 例如 name="alex"

属性只能出现在开始标签或自闭合标签中.

属性名字全部小写

属性值必须使用双引号或单引号包裹例如 name="alex"

如果属性值和属性名完全一样，直接写属性名即可，例如 readonly

在HTML中，标签属性按功能可以分为两种：

全局属性可以应用于多种不同的HTML元素，为网页开发提供了丰富的功能和灵活性；

特定属性仅适用于特定的HTML元素。

事件属性是一种特殊的属性

3.1 全局属性

可以应用于几乎所有HTML元素的属性。它们不特定于某个元素，而是为所有元素提供通用的功能。以下是一些常见的全局属性：

‌class‌：用于为元素指定一个或多个类名（classname），多个类名用空格分隔，这些类名可以与CSS和JavaScript一起使用，以实现样式和行为的定制。

‌id‌：为元素指定一个唯一的标识符。在文档中，id的值可以是任何字符串，但应该是唯一的，常用于通过JavaScript或CSS选择特定的元素。

‌style‌：直接在元素上定义内联样式，值是合法的CSS样式声明，用于控制元素的外观和布局。

‌title‌：值为任何文本字符串，为元素提供额外的说明或标题，当用户将鼠标悬停在元素上时，这些说明通常会显示为工具提示。

‌data-*（自定义数据属性）‌：允许开发者为元素添加自定义的数据属性，值可以是任意字符串，这些属性可以通过JavaScript访问和操作。

‌hidden‌：值为hidden 或 ''（空字符串），如果设置了这个属性，元素将不会被呈现，也不会占据页面上的任何空间。

‌tabindex‌：一个数字（例如1表示第一个）或0（表示可访问性焦点），指定元素在键盘导航中的顺序（通过Tab键），以及元素是否可以通过键盘获得焦点。

accesskey‌：为元素设置一个快捷键，用户可以通过按下该键快速访问元素，值为一个键盘字符，例如“O”。

contenteditable‌：指定元素的内容是否可编辑，值为true 或 false。

contextmenu‌：自定义鼠标右键点击时弹出的上下文菜单内容。但请注意，这个属性目前只有Firefox浏览器支持，值为一个<menu>元素的唯一ID

dir‌：设置元素内文本的书写方向，值为ltr（从左到右）、rtl（从右到左）或 auto。

draggable‌：指定元素是否可以被拖拽，值为true、false 或 auto。

dropzone‌：设置元素拖放类型，值可以是copy（拷贝）、move（移动）或link（指向原始数据链接）。但目前主流浏览器还不支持这个属性。

lang‌：设置元素内容的语言，值为有效的ISO语言代码，例如en（英文）、zh-CN（简体中文）等。

spellcheck‌：指定是否对元素进行拼写和语法检查，值为true 或 false。

translate‌：指定元素及其子孙节点的内容是否需要本地化，但目前主流浏览器还不支持这个属性，值为yes 或 no。

3.2 事件属性

在HTML中，事件属性用于定义元素上可触发的事件的行为。以下是一些常见的事件属性：

‌（1）全局事件属性‌：

onload：当页面或某个资源加载完成后触发‌。

onunload：当用户离开页面时触发，如关闭页面或跳转到其他页面‌。

onchange：当元素的值发生变化时触发，常用于表单元素‌。

onclick：当鼠标点击元素时触发‌。

ondblclick：当鼠标双击元素时触发‌。

onfocus：当元素获得焦点时触发，如文本框‌。

onblur：当元素失去焦点时触发‌。

onmousedown：当鼠标按下时触发‌。

onmouseup：当鼠标释放时触发‌。

onmousemove：当鼠标在元素上移动时触发‌。

onmouseover：当鼠标移到元素上时触发‌。

onmouseout：当鼠标移出元素时触发‌。

onkeydown：当用户按下键盘上的某个键时触发‌。

onkeypress：当用户按住并释放键盘上的某个键时触发（不包括功能键），但在某些浏览器中可能不支持所有按键‌3。

onkeyup：当用户释放键盘上的某个键时触发‌。

onselect：当元素中的文本被选中时触发‌。

onsubmit：当表单提交时触发‌。

onreset：当表单重置时触发‌。

（2）特定元素的事件属性‌（如媒介元素、表单元素等）：

媒介事件（如onabort, onwaiting等）适用于视频、音频等媒介元素‌。

表单事件（如上面提到的onchange, onsubmit, onreset等）专门用于表单元素‌。

这些事件属性可以通过JavaScript来监听和处理，从而实现丰富的交互效果。

4、常用标签

4.1 <!DOCTYPE html>标签

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同(Quirks mode或者称为CompatibilityMode)

由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)

为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
window.top.document.compatMode：
//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 
//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
/*
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，
那么compatMode默认就是BackCompat，浏览器按照自己的方式解析渲染页面，
也就是说，同一个html文档在不同的浏览器会显示不同的样式。
*/
在html文档开头添加<!DOCTYPE html>标签，就等同于开启了标准模式，浏览器只能按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

4.2 head标签

html文档头，<head></head>之间包含了关于该文档的元数据（metadata）和引入外部资源，，即提供关于文档内容、结构、样式以及与其他文档关系的信息，从而确保网页能够正确地显示和运行。

这些信息通常不会直接展示在网页上，但对于机器（例如搜索引擎爬虫和浏览器）来说却是至关重要的。

<head>标签中常见的一些子元素及其用途如下：