HTML基础、get和post的区别、css层叠样式表、选择器、盒子模型（web,day01）

最新推荐文章于 2025-06-03 13:51:29 发布

hyj_123

最新推荐文章于 2025-06-03 13:51:29 发布

阅读量337

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/hyj_123/article/details/108025744

版权

本文详细介绍了HTML和CSS的基本用法，包括标签的使用、样式表的内嵌与外部引入方式，以及选择器的种类和应用。同时，还探讨了块级元素与行内元素的区别，以及文本样式和盒子模型的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html：不区分大小写
html:显示数据

<html>
	<head>	
		<title></title>
		<style></style>
	</head>
	<body>
		hello!
	</body>
</html>

< h>设置标题 h1-h6
< img>设置图片
< a> 超链接
< table>
< tr>
< td> < th>
列表
自定义：dl,dt,dd
有序 ol li
无序 ul li
表单
action 表示提交之后的后台处理程序的名称
method:get,post,
method="post"才可post，其它以及默认为get
**

get和post区别

get请求，数据在url上传递
不安全
数据量小
post请求：数据通过体传递
安全，数据量大

< form action="" method=“get”>< /form>

CSS：层叠样式表
作用：美化页面（网站）
内嵌：
< p style=“color:red” >短路1

优先级高
style：
< style type=“text/css”>
p{color:blue;}
< /style>
优先级较高
引入外部的文件
test1.css
p{color:green;}
html
< link rel=“stylesheet” href=“css/test1.css” >
优先级低

选择器

1、元素选择器
选择器的名称是html的标签名{
样式的集合；}
div{
color:red;
font-size:12px;
}
使用：匹配html的元素
2、类选择器（重复使用）
.类名{
}
使用：< p class=“类名”>
3、id选择器（使用一次）
#id值{
}
使用：< p id=“id值”>
4、后代选择器（子孙选择器）
.div1 p{
font-size:30px;
color:#0000ff;
}
div1 下所有p
5、子选择器
.div1>p{
font-size:30px;
color:#0000ff;
}
div1 下一级p
6、分组选择器
.div1,p{
font-size:30px;
color:#0000ff;
}
所有div和p（及子）下
7、div + p
div的下一个兄弟p
8、div ~ p
div的后边所有的兄弟p

盒子模型

内容+内边框padding+边距border+margin
块级元素和行内元素
块级元素特点：
独立一行，可设置宽高，内外边距的上下左右边距
< div>< p>< li>
行内元素特点：
可以在一行显示多个元素，
可设置宽高但没意义(input与img除外)，
外边距的上下不起作用
< a>< span>< input>< img>
文本样式
背景颜色
浮动
文档流：按顺序显示组件
脱离文档流：飘起来
文字不会被覆盖