HTML和CSS基础使用

HTML 文档由一系列嵌套的标签组成，定义了网页的结构和内容。HTML5文档的基本框架为：
html 复制代码
<!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>：**标签关联，点击文字就可以选中标签

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

html 复制代码

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

2、关系选择器

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

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

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

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

3、属性选择器

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

常用属性选择器类型：

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

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

4、结构伪类选择器

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

1、**：first - child****：**选中父元素里的第一个子元素
css 复制代码
p:first-child {
  color: red;
}
2、：last - child：选中父元素里最后一个子元素
css 复制代码
p:last-child {
  color: blue;
}
3、：nth - chlid(n)：选中父元素里第n个子元素
css 复制代码
li:nth-child(3) {
  background: yellow;
}
4、：first - of - type：选中父元素里第一个同类型的元素
css 复制代码
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，修改不会撑大盒子
css 复制代码
/*标准盒模型*/
box-sizing:content-box;
/*边框盒*/
box-sizing:border-box;
三个属性用法：

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

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

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

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

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

转换代码：
css 复制代码
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 层级