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文件: