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

目录
相关文章
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
1月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
83 25
|
30天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
33 2
|
30天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
320 1
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24