Web开发系列-第1章 HTML-CSS

pengzhuofan

已于 2025-07-27 18:03:03 修改

阅读量575

点赞数 11

CC 4.0 BY-SA版权

文章标签： web

于 2025-07-27 18:02:09 首次发布

本文链接：https://blog.csdn.net/weixin_66095070/article/details/149693535

第1章 HTML-CSS

1.1 前端代码如何转换网页？

通过浏览器内核转化（解析和渲染）成用户看到的网页。

1.2 什么是HTML & CSS？

HTML: HyperText Markup Language，超文本标记语言。

由标记构成。
可写入文字、图片、音频、视频等内容。

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

1.3 前端开发工具VSCode

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。
官网： Visual Studio Code - Code Editing. Redefined

1.3.1 VSCode插件安装

好插件为开发者提供更好的开发体验，需要安装的插件如下列表：

插件名称	插件作用
Chinese (Simplified) Language Pack	VS Code 的中文（简体）语言包
Code Spell Checker	拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。
HTML CSS Support	在编写样式表的时候，自动补全功能大大缩减了编写时间。
JavaScript (ES6) code snippets	支持ES6语法提示
Mithril Emmet	一个能大幅度提高前端开发效率的一个工具，用于补全代码
Path Intellisense	路径提示插件
Vue 3 Snippets	在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。
VueHelper	vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码
Auto Close Tag	自动闭合HTML/XML标签
Auto Rename Tag	自动完成另一侧标签的同步修改
Beautify	格式化 html ,js,css
Bracket Pair Colorizer	给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
open in browser	vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
Vetur	Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。
File Utils	方便快捷的来创建、复制、移动、重命名文件和目录。
IntelliJ IDEA Keybindings	在VSCode中使用IDEA的快捷键。

1.4 基础标签<?>

基础标签如下：

HTML文档标签<html>
头标签<head>
主体标签<body>
标题标签 <h1> ... <h6>
图片标签 <img>
- 常见属性: src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径) width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比) height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
水平分割线 <hr>
超链接 <a href="..." target="...">央视网</a>
- 属性:
  - href: 指定资源访问的url
  - target: 指定在何处打开资源链接
    - _self: 默认值，在当前页面打开
    - _blank: 在空白页面打开
无语义标签<span>
块标签<div>
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
视频标签:<video>
- 属性:
  - src: 规定视频的url
  - controls: 显示播放控件
  - width: 播放器的宽度
  - height: 播放器的高度
音频标签:<audio>
- 属性:
  - src: 规定音频的url
  - controls: 显示播放控件
换行标签:<br>
段落标签: <p>
- 如: <p> 这是一个段落 </p>

1.5 CSS引用方式

具体有3种引入方式，语法如下表格所示：

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式	在<head>中定义<style>标签，在标签内部定义css样式	<style> h1 {...} </style>
外联样式	在<head>中定义<link>标签，通过href属性引入外部css文件	<link rel="stylesheet" href="css/news.css">

1.6 CSS选择器

选择器是用于对相应元素样式进行修饰的，有如下几类常见的选择器：

1.元素（标签）选择器：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {
    css样式名:css样式值；
}

例子如下：

 div{
     color: red;
 }

2.id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

#id属性值 {
    css样式名:css样式值；
}

例子如下：

#did {
    color: blue;
}

3.类选择器：

选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {
    css样式名:css样式值；
}

例子如下：

.cls{
     color: green;
 }

1.7 盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）=>类似包住照片部分、边框区域（border）=>类似框架部分、外边距区域（margin）=>类似框架外花边部分。

1.8 表格标签<table>

表格标签<table>
- 常用属性如下：
  - border：规定表格边框的宽度
  - width：规定表格的宽度
  - cellspacing: 规定单元之间的空间
行标签<tr> : 可以包裹多个 <td>
单元格标签<td> : 可以包裹内容 , 如果是表头单元格，可以替换为 <th> 。

1.9 表单标签<form>

表单标签<form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。

表单项标签: 不同类型的input元素、下拉列表、文本域等。

<input>: 表单项 , 通过type属性控制输入形式。

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域