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

简介: 【HTML&CSS】运维、后端你该会的前端基本内容(二)

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

目录
相关文章
|
16天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
236 91
|
1天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
7 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1天前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
7 2
前端基础(九)_CSS的三大特征
|
1天前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
6 1
前端基础(十七)_HTML5新特性
|
16天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
49 28
|
2天前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
19 5
WK
|
1天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
9 3
|
1天前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位,包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用,解释了它们各自的特点和使用场景。例如,em和rem单位与字体大小相关,百分比单位与父元素的尺寸相关,而vw和vh单位则与浏览器视窗的宽度和高度相关。
5 1
|
1天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
15 1
|
1天前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
15 1

热门文章

最新文章