HTML+CSS入门

Zhang_Nuyoah

已于 2024-03-21 20:41:23 修改

阅读量1.7k

点赞数 46

文章标签： html 前端 css

于 2024-03-21 20:39:30 首次发布

本文链接：https://blog.csdn.net/2301_80105894/article/details/136890486

版权

一、HTML

①HTML概述

HTML(HyperText Markup Language，超文本标记语言)用于设定特定的网页结构。其中“超文本”就是通过超链接的形式，将文本有机地组织在一起；“标记”是指应用一些预先定义好的标签来描述网页的标题、段落、图片、超链接等内容，每种标签都有特定的含义。

②HTML语法

1.标签

开始标签+结束标签（成对出现）开始标签：<> 结束标签：</> 标签与里面的内容构成元素

eg:<title>前端开发</title>

有的标签没有结束标签，用空格与、作为结束标记（/可以省略）

eg:<img src="logo.gif" alt="站标" />

2、属性（属性名+属性值）属性可以描述标签的具体特征

<标记名属性1 属性2 属性3...>

属性名与属性值用=连接，属性值用双引号括起来，属性有多个用空格分开，无先后顺序

3、元素

标签与其包含的文本内容共同构成HTML元素，元素呈现嵌套的结构

父元素、子元素、兄弟元素

空元素：有些元素无法嵌套子节点和内容，成为空元素

③文件结构

1、基本文件结构

2、字符集与编码

(1)字符：文字和符号。例如数字、英文、汉字；

字符集：字符的集合（charset）是和某一种特定语言文字相对应的，例如英文字符集包含大小写字母，汉字字符集包含一些汉字

(2)编码：从字符到二进制的映射

ASCII：包含数字、英文字母和一些基本符号
GB 2312：简体中文的编码方式
Unicode：对各国文字、符号进行统一编码
UTF-8：针对所有语言字符集的编码方式（主流规范编码方式）

注：乱码问题（字符集编码出现问题）：源文件保存时的编码与源文件声明<meta charset="编码方式">不一致

④网页结构

网页整体结构通常会被划分为若干区域，例如页眉、页脚、内容区、边栏等部分，以方便页面布局

在实现区域划分要在body中添加结构性标签

1、div标签

用于划分区域，本身没有含义，可以通过id属性或class属性定义名字区分这一区域

2、语义化结构标签

header:页眉（通常包括Logo、主导航、搜索框等）
nav:导航条
footer:页脚
main:页面主要内容
aside:侧栏
article与section:article可以独自被外部引用的内容 section：用于一段主题性内容

div、section、article语义从无到有、逐渐增强，可以使用article就不用section

⑤HTML常用标签

<一>文本

标题h1-h6（默认每级标题都是加粗显示）

2.段落p

p标签将正文文字划分为一个段落，每段结束后自动换行

3.段内换行br

由p构成的段落，段落结束后才换行。如想要段内换行，可以使用<br />

4.预留格式pre

默认情况下，段落内连续空格和空行只会被显示为一个空格，若需要连续空格，可使用特殊字符"&nbsp"

5.段内组合span

可以用于组合一小段文字，以便对其进行单独样式设置

6.粗体显示strong 斜体显示em

7.水平分割线hr 默认从网页左端到网页右端

8.注释注释可以跨行

<二>超链接

9.超链接 <a href="跳转的目标位置">文字或图片</a>

跳转到外部网站 eg:<a href="http://www.w3school.com.cn/">学习网站</a>
跳转到本网站另一个页面
跳转到当前页面特定位置

eg:<article id="top">……</article>

虚拟超链接

当跳转位置暂不确定时，可以采用虚拟超链接 eg:<a href="#">学习网站</a>

<三>图像音频视频

10.img标签（插入图片）

<img src="图片路径+文件名+扩展名" alt="替换文字" /> 常见图片格式：JPG、GIF、PNG

11.figure标签（将图片与图片标题组合在一起）

img标签：图片 figcaption：图片标题

12.audio标签 (音频)

<audio src="音频文件" controls="controls" loop="loop"></audio>

src:音频文件位置、文件名、扩展名（.ogg .mp3 .wav）

controls属性可选，取值“controls”表示显示控制条

loop属性可选，取值“loop”表示循环播放

13.video标签（视频）

<video src="视频文件" controls="controls" loop="loop" width="窗口视频宽度"></video>

可以使用poster属性设置开始海报图像

<四>列表

14.ul标签（无序列表）li标签 （每个列表项）

15.ol标签（有序列表）li标签 （每个列表项）

16.dl标签（自定义列表）

列表项由dt定义，列表项的描述由dd定义

<五>表格

17.table标签（表格标签）

标题：caption 表头：thead 表体：tbody 表尾：tfoot

嵌套标签：<tr>定义表格中的行

一个<tr>可以包含多个<th>标签(定义表头内容)和<td>标签(定义单元格内容)

border属性：表格默认无边框，若想要边框，可以使用CSS或border属性

colspan(合并列) rowspan(合并行)

<六>表单

18.form标签（表单标签）

name属性：表单名称
method属性：发送表单的方法，get适用于安全性较低，数据较少的情况；post适用于安全性较高，传送数据多的情况
action属性：处理表单数据的后端页面

19.<input type="text/password/submit/reset/radio/checkbox" /> input类型

文本框：type="text"
密码框：type="password"
提交：type="submit"
重置：type="reset"
单选框：type="radio"
复选框：type="checkbox"

20.select标签（下拉列表标签）

嵌套<option>定义选项

21.textarea标签（文本域标签）

22.button标签（按钮，内容可以是文本或图像）

input元素创建的按钮内容只能是文本

eg:<button><img src="baidu.png"></button>

二、CSS入门

①CSS概述

CSS（Cascading Style Sheets,层叠样式表）用于设定网页样式，主要包括页面元素的样式和页面布局。CSS样式可以嵌入到网页文件中，也可以单独保存在扩展名为.css的样式表文件中。多重样式有不同的优先级，样式之间可以相互覆盖、层叠。CSS能够使内容与样式分离，便于修改样式，内容由HTML决定，内容修改不影响样式。

②CSS三大特性

CSS的三大特性包括层叠性、继承性和优先级。

层叠性：主要解决样式冲突问题。当多个CSS规则应用于同一个元素时，浏览器通过一组规则来确定哪个规则将被应用。这些规则包括选择器的特殊性、源代码中的顺序以及!important声明。如果两个规则具有相同的特殊性，则后面出现的规则将覆盖前面的规则。样式的层叠性遵循就近原则，即哪个样式离被设置元素的结构近，就优先执行哪个样式。
继承性：子元素可以继承父元素的某些样式属性，如文本颜色和字号。恰当地使用继承可以简化代码，降低CSS样式的复杂性。但需要注意的是，并非所有CSS属性都可以继承，例如宽度、高度和背景等属性就不能被继承。
优先级：当同一个元素被多个选择器指定样式时，浏览器需要根据选择器的权重来决定应用哪个样式。权重高的选择器会覆盖权重低的选择器。例如，ID选择器的权重高于类选择器，类选择器的权重又高于元素选择器。此外，复合选择器的权重会有叠加效果，需要计算权重来决定。

③CSS语法格式

选择器{

属性名：属性值；

……

}

④CSS添加方式

行内样式：在确定的某个对象的标签中定义style属性，eg:<p style="color="red";>内容</p>
内嵌样式表：在<head></head>中定义，样式只对当前页面起作用。格式如下：
单独文件：

Ⅰ、创建样式表文件（样式表文件.css）

选择器{

属性名：属性值；

……

}

Ⅱ、引用样式表文件

注：优先级顺序——行内样式>内嵌样式>外部样式（就近原则）

⑤CSS选择器

元素选择器：选择所有的指定元素

p {
color:red;
}

类选择器：选择具有指定类的元素,名称以（.）开头，在元素中用class属性引用

.big{

font-size:20px;

}

引用该样式：<p class="big">html</p>

ID选择器：选择具有指定ID的元素,以#开头，在元素中用id属性引用

选择器分组：基于元素属性和属性值来确定，用逗号隔开选择器名称，进行选择器分组，使这些选择器有相同的样式

h1,p {
color:red;
}

后代选择器：用空格隔开选择器名称，表示“……内的……”被设置为特定样式

p strong{
color:red;
}

子元素选择器（>分隔）：选择某个元素的直接子元素

p >strong{
color:red;
}
p的直接子元素strong被设置样式

相邻兄弟选择器（+分隔）：选择紧邻在另一个元素后的元素，且具有相同的父元素

h2+p{
color:red;
}
h2标题后的第一个段落文字颜色为红色

属性选择器
全局选择器：名称为*，作用于所有元素

*{
color:red;
}

⑥CSS常用样式

（一）单位与颜色

单位：px（像素）,pt（磅）,em（1em:1字符，相当于当前字符大小）,rem（1字符，相当于html元素的字符大小）,%（相当于当前字符大小）
颜色：rgb(x,x,x),rgb(x%,x%,x%),rgba(x,x,x,x)设置透明程度，transparent透明，#rrggbb十六进制颜色数值，每两位表示一个颜色分量

（二）文本样式

color:文本颜色
letter-spacing:字符间距
line-height：行高
text-align：对齐center/left/right/justify
text-decoration：装饰线none、overline、underline、line-through
text-indent：首行缩进

（三）字体样式

font：设置字体属性，格式为font：斜体粗体字号/行高字体
font-family：字体系列
font-size：字号
font-style：斜体，normal正常，italic斜体
font-weight：粗体，normal正常，bold粗体

（四）背景样式

background：所有背景设置
background-image：背景图片
background-color：背景颜色
background-repeat：重复方式

（五）超链接样式

a:不同状态下共同样式
a:link 未被访问的超链接
a:visited 已访问的超链接
a:hover 鼠标悬停时
a:active 单击超链接，鼠标键未抬起时

（六）列表样式

list-style-type：列表项标号类型。无序列表：“disc”（实心圆点，默认值）、“circle”（空心圆点）、“square”（实心方块）有序列表：“decimal”（数字，从1开始递增）、“lower-alpha”（小写字母）、“upper-alpha”（大写字母）等
list-style-image：将自定义的图片设置为列表项前的标记。list-style-image：url("images/bullet.gif")
list-style-position：定义列表项标记的位置。“outside”（默认值，标记在列表项内容的外侧）“inside”（标记在列表项内容的内侧）
list-style：同时设置上述三个与列表样式相关的属性,在一个声明中设置list-style

（七）表格样式

border：边框
width：宽度
height：高度
border-collapse：合并边框
caption-side：标题位置
vertical-align:本文在单元格内部垂直对齐

（八）表单样式

:checked 仅用于单选按钮或复选按钮
:focus 选择元素输入后具有焦点
:disabled 选择所有被禁用的表单元素
:enabled 选择所有启用的表单元素
:optional 选择没有“required”属性指定的元素
:required 选择有“required”属性指定的元素
:read-only 选择只读属性元素
:read-write 选择没有只读属性元素

⑦简单定位方式

文档流定位：从上到下，从左到右排列（display：转换元素显示方式 visibility：元素是否可见）
浮动定位：进行分列布局（float：设置浮动 clear：消除浮动影响）
层定位：使用position属性实现层定位（position:static文档流定位 position:fixed固定定位 position:relative相对定位 position:absolute绝对定位 position:sticky粘性定位）