HTML和CSS基础使用

HTML 文档由一系列嵌套的标签组成，定义了网页的结构和内容。HTML5文档的基本框架为：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!DOCTYPE html> 声明文档类型为 HTML5 ，必须出现在文档最前面

<html> 是文档的根元素，包含整个HTML内容，通常指定语言属性 lang=“... ”

<head> 部分包含元数据和链接资源，不会显示在页面中

<title> 定义浏览器标签页显示的标题

<body> 包含所有可见的页面内容

二、常用的 HTML 标签

1、单标签

<hr> ：创建一条水平分隔线，用于内容分隔
常用属性：
①align：left（文字左对齐），right，center
②size ：默认为 2 像素
③color：设置颜色
④width：设置宽度

<br> ：用于插入换行符，通常在文本中强制换行

<img>：用于嵌套图像，必须包含 src 属性指定图像路径
常用属性：
①src：指定图像的 url 或路径，可以是绝对路径或相对路径
②alt：为图像提供替代文本，当图像无法显示时展示该文本
③width 和 height：设置图像的宽度和高度
④title：鼠标停留在图像上显示提示文本

<meta>：定义文档的元数据，如字符集

<input> ：用于创建表单输入控件，类型由type属性决定
常用属性：
①type：text：单行文本输入，password：密码输入，number：数字输入
checkbox：复选框，radio：单选按钮，submit：提交按钮
②placeholder：显示提示文本，用户进行输入时消失
③maxlength：限制文本输入的最大字符数

2、双标签

<p></p>：定义段落

<h1></h1>到<h6></h6>：定义标题，数字越小，级别越高

<head></head>：包含文档的元信息，如标题

<body></body>：包含文档的主体内容

<span></span>：用于对行内元素进行分组或样式化

<div></div>：用于对块级元素进行分组或样式化

<a></a>：定义超链接，通过 href 属性指定目标

<table></table>：定义表格

<tr></tr>：定义表格行

<td></td>：定义表格单元格

<form></form>：定义表单，用于用户输入

<textarea></textarea>：定义多行文本输入框
常用属性：
①cols：每行的字符数
②rows：总行数
③name：控件的名称
④readonly：元素不能被用户编辑、修改，表单提交时会发送
⑤disabled：不可编辑、选中，表单提交时不会发送

<select></select>：定义下拉列表
①size：可见选项数
②mutiple：按住ctrl多项选择
③selected：默认选项
④<oprgroup>：选项进行分组使用 label 属性

<option></option>：定义下拉列表的选项

<font></font>：文本样式标签，在HTML5中使用 CSS 写法

三、列表与表格的使用方法

1、无序列表

无序列表：<ul> 包裹 <li>,默认前面是小圆点

<ul>：无序列表整体标签
type 属性：disc 默认，circle 空心圆圈，square 实心方块

<li>：列表每一项

2、有序列表

有序列表：<ol> 包裹 <li>，默认自动使用1，2，3排序

<ol>：有序列表整体标签
type 属性：1(默认)，a或A，i或I
start 属性：从数字几开始

<li>：列表每一项

3、定义列表

dl：定义列表容器整体

dt：定义术语 / 标题

dd：定义解释 / 描述，标题靠左，解释自动缩进

4、table 表格

<table>：整个表格
表格常用属性：
①border：边框宽度
②width 和 height：表格宽度和高度
③align：表格在网页中的对齐方式
④colspan：跨列合并
⑤rowspan：跨行合并

<tr>：行

<td>：单元格

<th>：表头单元格（默认加粗、居中）

表格结构标签（了解）：

<thread>：表头区域

<tbody>：主体区域

<tfoot>：表尾区域

四、表单元素与输入类型

1、form 表单

<form> 标签用于创建HTML表单，收集用户输入并提交到服务器，是前后端交互的核心容器

核心属性：

action：数据提交地址（后端接口）

method：HTTP提交方式，GET（默认，明文），POST（密文）

enctype：数据编码类型（POST专用）

target：响应打开位置，_self（当前页），_blank（新窗口）

2、表单的控件（包含输入类型）

常用表单元素：

<input> ：核心输入框，通过type类型区分，必须加name（提交键名）
<textarea>：多行文本域
<select>：下拉选择框
<label>：标签关联，点击文字就可以选中标签

对于这些控件详细在上面已经展示，下面进行样例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/user/login" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label for="password">密码:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="password" name="pwd" required>
        </div>
        <div>
            <label for="sex">请选择你的性别：</label>
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </div>
        <div>
            <select>请选择你所在的城市 
                <option>北京</option>
                <option>上海</option>
            </select>
        </div>

        <div>  
            <button type="submit">登录</button>
            <button type="reset">重置</button>
        </div>
        <div>
            
            <label for="advice">请给出您的建议：</label>
            <br>
            <textarea cols="30" rows="10">            
            </textarea>
        </div>
        
    </form>
</body>
</html>

五、HTML5 新增语义化标签

语义化标签表示标签本身自带含义，一眼就能看出是头部、导航、侧边栏……

常用语义化标签：

<header>：网页 / 区块头部，放标题、logo、导航简介

<nav>：导航栏，放网站主导航链接

<main>：网页主体内容，只有一个

<section>：区块 / 章节，把相关内容划分在一块，类似有含义的div

<article>：独立文章 / 内容块

<aside>：侧边栏、侧边广告、附加说明

<footer>：放版权、联系方式、备案信息

<time>：定义时间、日期

<mark>：高亮标记文本

六、CSS简介与引入方式

1、简介

CSS 层叠样式表，用于美化和布局 HTML 网页，可以设置文字颜色、大小、字体、背景、边框等样式；语法由选择器 + 属性和属性值组成，用来给 HTML 结构添加外观样式，实现结构与样式分离

2、CSS 样式表的引用

有四种方式：

行内样式：在 HTML 标签里用 style 属性直接写样式，优先级最高，只对所在标签起作用

内部样式：在页面 <head> 中用 <style> 标签书写CSS样式，仅当前页面生效

外部链接式：用 <link> 标签引入 .css 文件，多页面可共用，最常用

导入样式：在 <style> 或外部 CSS 里用@import 导入外部文件样式，加载稍慢

七、选择器类型与优先级

1、基础选择器

标签选择器（元素选择器）：直接用HTML中的标签名选中，选中所有同名标签
p {
  color: red;
}
类选择器 . ：用 . 开头，给标签加上class，可以多个标签共用
.box {
  font-size: 16px;
}
<div class="box">我是类选择器</div>
ID选择器 # ：用 # 开头，标签加上 id ，页面唯一，只能用一次
#title {
  font-weight: bold;
}
<h2 id="title">我是ID选择器</h2>
通配符选择器 * ：* 选中页面所有标签，一般用来初始化样式
* {
  margin: 0;
  padding: 0;
}
优先级：ID 选择器 > 类选择器 > 标签选择器 > 通配符

2、关系选择器

1、后代选择器空格：选中父元素里所有后代（儿子、孙子都算）

2、子元素选择器 >：只选亲儿子，孙子辈不选

3、相邻兄弟选择器 +：只选紧跟在后面的第一个亲兄弟

4、通用兄弟选择器 ~：选中后面所有同级兄弟

3、属性选择器

属性选择器，就是通过标签自带的属性 / 属性值来选中元素，不用依赖 class，id

常用属性选择器类型：

1、基础匹配：是否存在某属性语法：[ 属性名 ]
/* 所有带 title 属性的元素 */
[title]{
    color:red;
}

/* 所有带disabled 属性的input */
input[disabled]{
    background:#eee;  
}
2、精确匹配：属性值完全相同语法：[ 属性名 = “值” ]
input[type="text"]{
     border:1px solid blue;
}
3、包含匹配：属性值包含指定单词语法：[ 属性名~=“单词” ]（匹配空格分隔的独立单词）
[class~="active"]{
     background: yellow;
}
4、 开头匹配：属性值以指定字符串开头语法：[ 属性名^=“开头” ]
a[href^="https"]{
    color:green;
}
5、结尾匹配：属性值以指定字符串结尾语法：[ 属性名$=“结尾” ]
a[href$=".pdf"] {
  color: orange;
}
6、子串匹配：属性值包含指定字符串语法：[ 属性名*=“子串” ]
a[href*="baidu"] {
  color: purple;
}

4、结构伪类选择器

结构伪类选择器，就是根据元素在父容器里的位置、顺序来选中它，不用额外加 class

1、：first - child：选中父元素里的第一个子元素
p:first-child {
  color: red;
}
2、：last - child：选中父元素里最后一个子元素
p:last-child {
  color: blue;
}
3、：nth - chlid(n)：选中父元素里第n个子元素
li:nth-child(3) {
  background: yellow;
}
4、：first - of - type：选中父元素里第一个同类型的元素
p:first-of-type {
  font-weight: bold;
}

八、盒模型与布局基础

所有 HTML 元素都是一个矩形盒子，由四部分组成：

内容区 content：文字、图片放的地方，宽高 width / height

内边距 padding：内容和边框之间的距离

边框 border：盒子边线

外边距 marign：盒子和其它盒子之间的距离

盒模型的计算：

元素的实际宽度 = width + padding 左右 + border 左右 + marign 左右

元素的实际高度 = height + padding 上下 + border 上下 + marign 上下

盒模型：

标准盒模型：width 只代表内容宽，padding、border会额外撑大盒子

边框盒（常用）：width已经包含 content + padding + border，修改不会撑大盒子
/*标准盒模型*/
box-sizing:content-box;
/*边框盒*/
box-sizing:border-box;
三个属性用法：

1、padding 内边距
/*一个属性值时*/
padding: 上下左右;
/*两个属性值时*/
padding: 上下 左右;
/*四个属性值时*/
padding: 上 右 下 左;
2、border 边框
border: 宽度 样式 颜色;

/*例*/
border: 1px solid blue;
3、marign 外边距
/*可以设置 auto 实现水平居中*/
marign: 0 auto;
元素三大显示类型：

块级元素 block：独占一行，可设宽高，如：div，p，h1~h6

行内元素 inline：同行显示，不能设宽高，如：span，a

行内块 inline-block：同行显示，可设宽高，如：img、input

转换代码：
display: block;
display: inline;
display: inline-block;
布局常用方式：

标准流（普通文档流）：默认从上到下、从左到右排列，块级换行、行内同行

浮动 float：让块级元素并排同行，脱离标准流

定位 position：static 默认标准流；relative 相对自身原位偏移；absolute 绝对定位脱离文档流，相对于已定义父级；fixed 固定定位

弹性布局 flex：轻松实现水平居中、垂直居中、均分排列

九、常用CSS属性

一、文本字体属性

color 文字颜色

font - size 字体大小

font - family 字体

font - weight 加粗 bold / normal

text - align 水平对齐 left / center / right

line - height 行高

text - decoration 下划线 none / underline

text - indent 首行缩进

二、宽高尺寸

width 宽度

height 高度

三、盒模型属性

padding 内边距

marign 外边距

border 边框

border - radius 圆角

box - sizing 盒模型 border-box

四、背景属性

background-color 背景色

background-image 背景图片

background-repeat 是否平铺

background-position 背景位置

background-size 背景大小

五、显示类型与布局

display ：block块级 / inline行内 / inline-block 行内块 / none隐藏

float 浮动 left / right / none

clear 清除浮动

六、定位属性

position 定位 static默认 / relative相对 / absolute绝对 / fixed固定

top / left / right / bottom 偏移距离

z-index 层级

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

AI Agent实现CODESYS自动化编程

AtomGit开源社区

量化基石：深入解析法玛-弗伦奇模型中的SMB与HML因子

摘要：规模因子（SMB）和价值因子（HML）是量化投资的核心因子，分别反映小盘股与大盘股、价值股与成长股的超额收益差异。SMB源于小公司流动性差、抗风险能力弱等风险补偿，长期存在溢价但可能阶段性失效；HML则体现低估值股票（如银行、能源）的均值回归特性，在高通胀或利率环境下表现突出。两因子通过2×3分组法独立构建，确保纯粹性。SMB侧重规模效应，HML聚焦估值差异，二者共同构成多因子策略的基础，

AtomGit开源社区

Linux Reactor网络模型与高效http静态服务器构建

HTTP服务器接受请求时，不必接收完所有的数据才进行数据解析，可以读一部分数据先进行解析，再解析后面的数据。可以按行解析，如HTTP请求时，可以先解析GET方法所在行的数据，里面就包含了请求资源的位置。由于这种复制是在内核中完成的，因此sendfile比读和写的组合更有效，后者需要在用户空间之间传输数据。如果偏移量为NULL，则从当前文件偏移量开始从in fd读取数据，并通过调用更新文件偏移量。H