新闻公告

【HTML&CSS】运维、后端你该会的前端基本内容（二）

发布时间：2023-06-30 18:00:53

1.8、列表

1.8.1、无序列表

标签	描述	块/行元素	单/双标签
ul	无序列表的声明	块	双
li	每个列表项的起始	块	双

ul标签属性	取值	说明
type	disc	项目符号显示为实体圆（默认值）
type	circle	项目符号显示为空心圆
type	square	项目符号显示为实体方形

以空心圆为例：

1.8.2、有序列表

标签	描述	块/行元素	单/双标签
ol	有序列表的声明	块	双
li	每个列表项的起始	块	双

ol标签属性	取值	说明
type	1	列表项将用数字编号（默认）
type	A	列表项将用大写字母编号
type	a	列表项将用小写字母编号
type	I	列表项将用大写罗马数字编号
type	i	列表项将使用小写罗马数字进行编号

以列表项将用大写字母编号为例：

1.8.3、自定义列表

标签	描述	块/行元素	单/双标签
dl	自定义列表声明	块	双
dt	自定义列表项的起始	块	双
dd	自定义列表注释	块	双

1.9、表格

标签	描述	块/行元素	单/双标签
table	定义表格	块	双
th	表头	块	双
tr	行	块	双
td	列	块	双

table标签属性	取值	说明
border	”数字“	设置表格边框的宽度
width	”数字“	设置表格的宽
height	”数字“	设置表格的高
cellpadding	”数字“	设置内边距
cellspacing	”数字“	设置外边距
align	”数字“	设置表格的对齐方式(在网页中的显示位置)

td标签属性	取值	说明
align	left、center、right	左对齐、居中对齐、右对齐
valign	top、middle、bottom、baseline	顶端对齐、居中对齐、底端对齐、基线对齐

1.9.1、合并单元格

td标签属性	取值	说明
colspan	“数字”	定义单元格横跨多少列(水平合并单元格)
rowspan	“数字”	定义单元格纵跨多少行(垂直合并单元格)

1.10、表单

表单是接收用户输入信息的容器

作用：负责获取用户填写的数据，并通过浏览器向服务器传递数据。

标签	描述	块/行元素	单/双标签
form	定义表单	块	双
input	添加控件（单行文本框、密码框、单选按钮、复选框、按钮、文件域）	行	单
select、option	添加控件（下拉列表框）	块	双
textarea	添加控件（多行文本框）	块	双

form标签属性	取值	说明
action	url (必须有)	定义表单提交的地址，通常为URL地址。值为空，默认提交到本页
method	post、get、delete(必须有)	定义表单提交的方式，通常用post。

例子：

二、CSS基础

2.1、入门

CSS (Cascading Style Sheets，层叠样式表），是为结构化文档（HTML、XML）添加样式的语言。

HTML中使用CSS的4种常见方式

外部样式表 (链接式)
内部样式表 (内嵌式)
内联样式表 (行内样式)
导入样式

CSS优势

实现内容和样式的分离，利于团队开发。
实现样式复用，提高开发效率。
实现页面的精准控制。
更利于搜索引擎的收录。

2.1.1、外部样式表 (链接式)

外部样式就是样式内容在另外一个文件中，html文件和css文件分离，样式代码在 .css 文件中。

链接方式：首先在html文件head标签中添加link标签，link就是用来链接css文件的标签。

标签	描述	块/行元素	单/双标签
link	链接一个外部样式表	行	单

link标签属性	取值	说明
rel	stylesheet	url (必须有)规定当前文档与被链接文档之间的关系
type	text/css	规定被链接文档的 MIME 类型
href	绝对路径/相对路径	规定被链接文档的位置

html文件：

css文件：

关于我们