HTML&CSS
JS
Vue.js
Java
MySQL
Redis
SpringBoot
前端补充
后端补充
🌻HTML-Notes
type
status
date
slug
summary
tags
category
icon
password
HTML-Notes,HTML 标记语言,非常简单,记住标记含义,刚开始记不住也没关系,忘记了就查,写多了就记住了。
web 开发简介
- HTML-内容、骨架
- CSS-排版、美化、外表
- JS-动态、交互、血液
HTML 骨架结构
html
:整个网页
head
:网页头部,用来存放给浏览器看的信息,例如 CSStitle
:网页标题style
:网页内部 CSS 样式link
:引入外部样式等
body
:网页主体,用来存放给用户看的信息,例如图片、文字
VS Code 可以快速生成骨架:在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键
注释
在 VS Code 中,添加 / 删除注释的快捷键:Ctrl + /
HTML 基本标签
标签总体特点:
- 标签要成对出现,中间包裹内容
- <>里面放英文字母(标签名)
- 结束标签比开始标签多 /
- 标签分类:双标签和单标签
标题-h
- 文字加粗
- 字号逐渐减小
- 独占一行(换行)
经验
- h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo
- h2 ~ h6 没有使用次数的限制
段落-p
- 独占一行
- 段落之间存在间隙
换行-br
水平线-hr
文本格式化标签
- 为文本添加特殊格式,以突出重点
- 加粗、倾斜、下划线、删除线
<b><i><u><s>也可以实现同样功能,但无强调语义,故不太常用。
插入图片-img
alt
:图片无法显示的时候显示的文字
title
:鼠标悬停在图片上面的时候显示的文字
width
:值为数字,没有单位
height
:值为数字,没有单位
src
:图片地址
src用于指定图像的位置和名称,是 <img> 的必须属性。属性名=“值”。属性之间用空格隔开。
路径
- 相对路径:从当前文件位置出发查找目标文件
- 绝对路径:从盘符出发查找目标文件,或者通过链接找到网络上的图片
相对路径
查找方式:从当前文件位置出发查找目标文件
特殊符号:
- / 表示进入某个文件夹里面 →
/
- . 表示当前文件所在文件夹 →
./
- .. 表示当前文件的上一级文件夹 →
../
超链接-a
作用:点击跳转到其他页面。
href
:跳转的链接,可以绝对,也可以相对
target
:默认当前窗口跳转,属性值为_blank
可实现新窗口跳转
- 开发初期,不确定跳转地址,则 href 属性值写为 #,表示空链接,页面不会跳转,在当前页面刷新一次。
href 属性值是跳转地址,是超链接的必须属性。超链接默认是在当前窗口跳转页面,添加 target="_blank" 实现新窗口打开页面。
音频-audio
src
:音频链接(MP3、Ogg、Wav)
controls
:显示音频控制面板
loop
:循环播放
autoplay
:自动播放
src 为必填属性。
视频-video
src
:视频地址(MP4、WebM、0gg)
controls
:显示音频控制面板
loop
:循环播放
muted
:静音播放
autoplay
:自动播放
src 为必须填属性。在浏览器中,想要自动播放,必须有 muted 属性。
列表
布局内容排列整齐的区域。
- 无序列表
- 有序列表
- 自定义列表
无序列表
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul 嵌套 li,ul 是无序列表,li 是列表条目。
有序列表
作用:布局排列整齐的需要规定顺序的区域。
标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。
定义列表
标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情。
表格-table
标签:table 嵌套 tr,tr 嵌套 td / th。
tr
:行
th
:表头,即行标题
td
:内容
- 一行一行写,第一行表示标题
提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。
合并单元格
合并单元格的步骤:
- 明确合并的目标
- 保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
- 跨行合并,保留最上单元格,添加属性 rowspan
- 跨列合并,保留最左单元格,添加属性 colspan
- 删除其他单元格
表单-form
作用:收集用户信息。
使用场景:
- 登录页面
- 注册页面
- 搜索区域
表单域标签下,下面的标签才起作用。
input
type
:type 属性值不同,则功能不同text
:文本框placeholder
:提示信息password
:密码框placeholder
:提示信息radio
:单选框name
:控件名称,控件分组,同组只能选中一个(单选功能)checked
:默认选中 属性名和属性值相同,简写为一个单词checkbox
:多选框checked
:默认选中 属性名和属性值相同,简写为一个单词file
:上传文件multiple
:文件多选
下拉菜单-select
select
嵌套option
select
是下拉菜单整体
option
是下拉菜单的每一项
selected
:默认选中属性
文本域-textarea
多行文本表单控件。
注意点:
- 实际开发中,使用 CSS 设置 文本域的尺寸
- 实际开发中,一般禁用右下角的拖拽功能
标签-label
经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。
- 写法一
- label 标签只包裹内容,不包裹表单控件
- 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
- 写法二:使用 label 标签包裹文字和表单控件,不需要属性
提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮-button
submit
:提交按钮,点击后可以提交数据到后台(默认功能)
reset
:重置按钮,点击后将表单控件恢复默认值
button
:普通按钮,默认没有功能,一般配合JavaScript 使用
语义化-布局标签-div
- 无语义
div
:独占一行span
:不换行
- 有语义
header
:头部nav
:导航footer
:底部aside
:侧边栏section
:区块article
:文章
欢迎在下方留言讨论~
Loading...
Last update: 2024-07-04
🎉欢迎来到《现代网站开发技术》课程的开源文档笔记🎉