小惠珠哦

这个屌丝很懒，什么也没留下！

热门标签

html&css基础

作者：小惠珠哦 | 2024-07-13 21:00:04

踩

html&css基础

html

组成

<!--跟标签-->
<html>
	<!--头标签-->
	<head>
		<!--网页的标题标签-->
		<tltle>测试html</title>
	</head>
	<!--体标签-->
	<body>
		<font color="yellow" size="7">测试体</font>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

VSCODE

常用插件

open in brower:用浏览器快捷打开并预览html文件
path intellisense：路径自动补全与提示
npm intellisense：require 三方文件时路径与文件名提示补全
auto rename tag：修改html标签，修改一个另一个自动同步修改
css peek:按住ctrl+左键点击class类名可以快速定位到样式表位置，快速修改

使用vscode注意

设置vscode的文件自动保存
快捷键
alt+shift+向上/下键：复制一行代码
alt+向上/下键：移动
ctrl+d：删除

基础标签

标签	描述
h1-h6	定义标题
font	定义文本的字体、字体尺寸、字体颜色
b	定义粗体文本
i	定义斜体文字
u	定义文本下划线
center	定义文本居中
p	定义段落
br	定义换行
hr	定义水平线

特殊符号

<: &lt
>: &gt
@： &copy

图片、音频、视频标签

标签	描述
img	定义图片
audio	定义音频
video	定义视频

img：定义图片

src：规定显示图像的url
height:定义图像的高度
width：定义图像的宽度

aduio：定义音频，支持mp3，wav，ogg

src：规定音频的url
controls：显示播放控件

video:定义视频，支持mp4，webm，ogg

src：规定视频url
controls：显示播放控件

超链接标签

标签	描述
a	定义超链接，用于链接到另一个资源
href：指定访问资源的url
target：指定打开资源的方式

		_self：默认值，当前页面打开
		_blank:空白页面打开
1
2

列表标签

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项

ol和ul标签均有type属性

表格标签

标签	描述
table	定义表格
tr	定义行
td	定义单元格
th	定义表头单元格

table：定义表格

border：规定表格边框的宽度
width：规定表格的宽度
cellspacing：规定单元格之间的空白

tr：定义行

align：定义表格行的内容对齐方式

td：定义单元格

rowspan：规定单元格可横跨的行数
colspan：规定单元格可横跨的列数

布局标签

标签	描述
div	定义html文档中的一个区域部分，经常与css一起使用，用来布局网页
span	用于组合行内元素

表单标签

标签	描述
form	定义表单
input	定义表单项，通过type属性控制输入形式
label	为表单项定义标注
selcet	定义下拉列表
option	定义下拉列表的列表项
textarea	定义文本域

form表单标签常见属性：

action：将收集的数据提交到具体后台服务器地址
method：提交数据到后台的方式（get/post）

表单项

input表单项，通过type属性控制输入形式

type取值	描述
text	默认值，单行输入
password	密码
radio	单选按钮
checkbox	复选框
file	文件上传按钮
hidden	隐藏的输入字段
submit	提交按钮，把表单数据发送给服务器
reset	重置按钮
button	可点击按钮

select：下拉列表，option定义列表项
select下拉项需要结合子标签option一起使用，有几个下拉项就有几个option，提交到后台数据的是option中的value值，option的属性selected表示当前下拉选项被选中

textarea：文本域，由行和列组成

CSS

CSS导入html有三种方式

内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color:red">HELLO</div>
1

内部样式：定义style标签，在标签内部定义css样式

<style type="text/css">
	div{
		color:red;
	}
</style>
1
2
3
4
5

外部样式：定义link标签，引入外部css文件

link rel="stylesheet" href="demo.css">
1

css选择器

选择器是选取需设置样式的元素（标签）

分类：

元素选择器

元素名称{color:red;}
div{color:red;}
1
2

id选择器

#id属性值{color:red;}
#name{color:red;}
1
2

类选择器

.class属性值{color:red;}
.cls{color:red;}
1
2

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】