HTML与CSS快速入门

最新推荐文章于 2025-07-25 19:52:36 发布

原创最新推荐文章于 2025-07-25 19:52:36 发布 · 983 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css

本文是HTML和CSS的快速入门指南，涵盖了HTML的基本标签、通用属性、列表、区块元素、表单和表格等内容。CSS部分讨论了其使用、语法、选择器、权重，以及内容相关的样式，包括位置、字体、背景和边框等。推荐使用VSCode作为编辑器，并介绍了几个实用的插件，如Auto Rename Tag和Live Server，帮助提升开发效率。

HTML与CSS快速入门

html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

建议使用vs code来入门

vscode 插件

Atuo Rename Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

guides 代码对齐辅助线，有利于代码整洁规范

Chinese (Simplified) Language Pack for Visual Studio Code 中文简体语言包

View In Browser ， open in browser 在浏览器中打开，很重要的插件

Path Intellisense 文件路径提示

Live Server 用这个打开可以自动刷新页面

JavaScript (ES6) code snippets 可以快速编写ES6语法的js拓展包

其他的可以自行网上查找

HTML

解读基本标签

<!DOCTYPE html> //声明为 HTML 文档
<html>  // 是 HTML 页面的根元素，浏览器解析从这里开始
<head>  // 头标签，可以放标题，图标，链接等
<meta charset="utf-8"> // 定义网页编码格式为 utf-8 字符
<title>第一个程序</title> // 描述了文档的标题
</head> // 与<head>标签为一对，表示头标签结束
<body> // 包含了可见的页面内容
    <h1>标题</h1> // 定义一个大标题，基础style加粗
    <p>段落</p> // 定义一个段落，结束自带分行
</body>
</html>

<a href="https://www.baidu.com" target="">链接</a> //链接标签，herf属性填写链接地址，#，#id 
// target 属性决定在何处打开链接 _blank 新标签页 _self 同一标签页 
<img src="image/***.jpg" alt=""> // 图片标签，src属性放图片地址，alt属性放替代图片的文本，当图片无法显示时使用

<br> // 换行标签
&nbsp; // 空格
<hr> // 放置一个水平线，初始宽度由父类决定
// 注释

html元素以开始标签开始，以结束标签结束，有的标签不成对出现，大多数html标签拥有属性，可以嵌套（包含其他html标签）。

html对大小写不敏感，但是推荐使用小写

html标签通用属性

属性	作用
class	为html元素定义类名，可以一个或多个(类名从css引入)
id	定义元素的唯一id，id不能重复
style	规定元素的行内样式，权重很高
title	描述了元素的额外信息 (作为工具条使用)
name	规定了标签的name，不可重复

文本标签

标签	描述
b	粗体文本
em	着重文字
i	斜体字
smail	小号字
strong	加重语气
sub	下标字
sup	上标字
ins	插入字
del	删除字

列表

有序列表

自动标上序号

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

无序列表

没有序号，着重号

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

区块元素

div 独占一行，行级元素

span 不独占一行，块级元素

表单

<form method="get/post" action="">
    <input type="text" name="username" id="" value="" placehplder="">
    <input type="password"> // 密码
    <input type="button"> // 按钮
    <input type="submit"> // 提交按钮
    <input type="checkbox"> // 复选框
    <input type="radio"> // 单选按钮
    <textarea></textarea>
    <select>
        <option></option>
    </select>
    <label></label>
</form>

表格

<table>
    <tr>
       <th></th> // 表头
    </tr>
    <tr>
       <td></td> // 内容
    </tr>
</table>

CSS

css可以修饰html标签，使其变得更加美观，同时也可以描述其各种属性

使用：

style 标签内，或者css文件内

语法

选择器 {
   属性：值;
}

选择器

元素选择器

body {
   background-image: url(**/**.jpg); // 定义背景图片
}

类选择器

.classname {
   background-color: #ffffff; // background-color定义背景颜色
}

id选择器

#id {
    font-size: 16px; // font-size定义字体大小，以像素为单位
}

属性选择器

input[type="text"] {
    border: 1px solid grey; // border定义边框样式
}

伪类选择器

a:hover{
   color: red; // color定义字体颜色，颜色可以用颜色名，16进制以及rgba代码表示
}

权重

每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；

权重越大，优先级越高，这会导致优先级高的样式覆盖优先级低的样式。当权重相同时，后定义的优先级高，css属性后面加上!important，无条件优先。

权重分为四个等级，每个等级不能进位，可以视作0，0，0，0

行内样式，即在标签的style属性定义的样式，权重最高，叠加在最高位，为1，0，0，0

ID选择器的权重次之，叠加在第二位，为0，1，0，0

类名选择器，伪类选择器，属性选择器权重叠加在第三位，为0，0，1，0

标签选择器和伪元素选择器权重最低，叠加在第四位，为0，0，0，1

其他如通用选择器不叠加权重。

也可以视作，越特殊，越能精准定位，权重越高。

权重等级不能进位，相同等级只能叠加，如：

.nav .right .content div {

} // 该样式的权重为（0，0，3，1），小于（0，0，4，1）、（0，0，3，2）、（0，1，0，0）等

即使叠加到（0，0，10，0），权重也依然小于（0，1，0，0）

因此，如果修改了css代码但是没有变化，可以看看是不是权重问题。

内容

位置相关：

margin （外边距）

margin: 10px;// 上下左右都与邻边元素相距10px
margin：5px 10px; // 与上下相距5px，与左右相距10px
margin-right:10px; // 与左边元素相距10px

padding （内边距）

与margin用法类似，区别是与边框距离改变

position

值	描述
absolute	绝对定位，相对于最近的有relative属性的父元素定位。可以通过 “left”, “top”, “right” 以及 “bottom” 属性调整位置。
fixed	固定位置，相对浏览器定位，不随滚动条改变位置。可以通过 “left”, “top”, “right” 以及 “bottom” 属性调整位置。
relative	相对定位，相对于其正常位置进行定位。

float
对于行级元素，一般情况下是一个元素独占一行，但有些情况需要行级元素共享一行，这时候或者可以更改标签属性，改成块级元素，或者可以用float进行浮动。
这里最常用的就是li

<style>
    li {
        width: 50px;
        height: 50px;
        margin: 20px;
        background-color: #78e0fa;
    }
</style>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

<style>
    li {
        width: 50px;
        height: 50px;
        margin: 20px;
        background-color: #78e0fa;
        float: left;
    }
</style>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

字体相关

{
    color: red; // 字体颜色
    font-size: 18px;  // 字体大小
    font-weight: normal;  // 字体粗细
    font-style: italic;  // 字体样式
    font-family: 'Courier New', Courier, monospace;  // 字体系列
    line-height: 30px;  // 行高
    text-align: left; // 对齐方式
    text-decoration: solid; // 添加修饰，如下划线 overline,underline,line-through
    text-shadow: #000; // 字体阴影
    text-indent: 10px;  // 文本首行缩进
    letter-spacing: normal; // 字间距
}

背景相关

属性	描述
background	简写，将所有背景属性放在一个属性中，要注意顺序。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置背景颜色。
background-image	设置背景图片。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像的重复。

边框相关

属性	描述
border	简写，将所有背景属性放在一个属性中，要注意顺序。
border-style	用于设置边框样式。
border-width	用于设置边框宽度
border-color	用于设置边框颜色
border-radius	用于设置边框圆角

边框所有属性都可以单独设置某边，如：border-right-style，或border-right