HTML
介绍
HTML是一门语言,所有的网页都是用HTML这门语言编写出来的
HyperText Markup Language 超文本标记语言
超文本:超越文本的限制,除了文字信息,还可以定义图片,音频,视频等内容
标记语言:由标签构成的语言
HTML运行在浏览器上,标签是由浏览器来解析,不需要编译
HTML标签都是预定义好的
在任何地方都可以创建html文件,后缀名是.htm或.html
W3C标准:网页主要由三部分组成:
- 结构:HTML 人的骨骼
- 表现:CSS 化妆师
- 行为:JavaScript 唱跳rap
结构标签
| 标签 | 描述 |
|---|
| 定义HTML文档 |
| 定义文档的信息 |
| 定义文档的标题 |
| 定义文档的主体 |
HTML标签不区分大小写
HTML标签属性值单双引皆可
基础标签
| 标签 | 描述 |
|---|
~ | 定义标题,h1最大,h6最小 |
color,size,face | 定义文本的字体,字体尺寸,字体颜色 颜色也能用十六进制表示 |
| 加粗 |
| 倾斜 |
| 文本下划线 |
| 文本居中 |
| 段落 |
| 换行 |
| 水平线 |
转义字符

图片,音频,视频标签
| 标签 | 描述 |
|---|
![]() | 图片 |
| 音频 |
| 视频 |
- img:定义图片
- src:规定图片的url
- height:图片的高度 单位是px(默认)像素,也可以%表示
- width:图片的宽度
- audio:音频 支持的音频的格式:MP3,WAV,OGG
- src:音频的url
- controls:显示播放控件
- video:视频 支持的音频格式:MP4,WebM,OGG
- src:视频的url
- controls:显示播放控件
注:
- src引入的路径不能是本地的路径
- 对于video和audio必须书写播放控件属性controls
超链接标签
- href:指定访问资源的url
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
列表标签
- 有序列表标签 order list
- type:默认值为1,然后标签li依次递增
- type属性值:1,A,a,i,I
- 无序列表标签 unorder list
- type属性值:cirecle 空心圆
- square 实心方形; disc 实心圆(默认的)
表格标签
| 标签 | 描述 |
|---|
- table:定义表格
- border:定义表格边框的宽度
- width:规定表格的宽度
- cellspacing:规定单元格之间的空白
- tr:定义行
- td:定义单元格
- rowspan:规定单元格可横跨的行数
- colspan:规定单元格可横跨的列数
布局标签
| 标签 | 描述 |
|---|
| 定义HTML文档中的一个区域部分 | | 用于组合行内 |
表单标签
- form:定义表单
- action:规定当提交表单时向何处发送表单数据,url
- method:规定用于发送表单数据的方式
- get: http://www.jd.com?username=&password=1234(默认方式)
- 不安全
- 有大小限制
- 只能传输字符数据,传输格式:url?name=value&user=value
- post:http://www.jd.com
- 安全
- 没有大小限制
- 可以传输任意数据
注:所有收集的数据必须放到form标签文本中
- input:表单项,通过type属性控制输入形式
- radio表示单选按钮,只能选择一个,通过name属性保证单选效果,要求name属性值必须一致
- checkbox表示多选框或复用框
- 如果单选框和复选框被选中,那么需要给input标签加checked属性
- hidden用户在页面看不到,其实在页面是存在的,场景就是:某种需求不需要给用户看,但是后台服务器需要数据,就可以将数据放到隐藏域的标签中

- select :下拉列表
- 需要结合子标签option一起使用,有几个下拉项就有几个option
- 提交到后台的数据是用户当前选择的下拉项的option的value的值
- option的属性selected表示当前下拉项被选中
- textarea:由行和列组成
查阅文档
- 百度:百度一下
- W3C:w3c
- MDN:mdn
CSS
介绍
Cascading Style Sheet:层叠样式表 是一门语言,控制网页表现
导入方式
- 内联样式:在内部使用style属性,属性值是css属性键值对

- 内部样式:定义

- 外部样式:定义link标签,引入外部的css文件
 2和3是在head标签中书写
选择器
- 元素选择器
- id选择器
- 类选择器
 在css文件中书写单位不能省略
属性
可以查阅https://www.w3school.com.cn/h.asp


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>titletitle>
head>
<body>
<div style="border:red solid 5px ;background-color: aqua">div1div>
<div style="display: none;">张三div>
<div style="display: block;">李四div>
<div style="display: inline;">王五div>
<span style="display: block;">哈哈span>
<span>呵呵span>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
相关阅读:
【编程之路】面试必刷TOP101:动态规划(67-71,Python实现)
QGIS下载在线地图(Google 卫星、esri 卫星)
Qt学习07 Qt中的坐标系统
文心一言 VS 讯飞星火 VS chatgpt (115)-- 算法导论10.2 8题
使用 Cloudflare 电子邮件路由轻松创建和路由电子邮件地址
【kubernetes】使用virtual-kubelet扩展k8s
解决问题的思路很重要,运维领域,结果对,过程就对!
Java中静态域和静态方法的一些梳理
LoongArch 指令集设计——单周期5条指令exp5
树结构处理,list和tree互转
原文地址:https://blog.csdn.net/m0_69266818/article/details/138170684
|