html_css

已于 2023-03-19 16:28:47 修改
阅读量79 收藏
点赞数
分类专栏： 前端 文章标签： 前端 java html
于 2023-03-19 16:00:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45907893/article/details/129490340
版权

HTML

html的书写规范

  • html文件是以.html或.htm结尾的文件
  • html文件是由浏览器解释运行
  • html代码的基本结构
    • html文件的第一行必须是，用来声明当前文档所遵循的html规范
    • 声明规范后，必须写上html文件的根目录
    • html标签中必须包含<head></head>、<body></body>
    • head标签用于配置当前页面
    • body标签的用于显示页面内容
  • 标记：也叫标签，都是预定义的
    • 单标签：只有开始标签，没有结束标签
 <br/>换行  <hr/> <input> <img>等
  • 双标签：由开始和结束标签组成，等等…

常用标签

用来显示页面内容

显示标签

1、标题标签h，h1~h6，自动加粗，块级(单独占一行)标签，双标签

<!-- 标题标签 h -->
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>

2、字体标签：font
属性：（不推荐）

  • size:大小，单位是像素(px)，取值范围1~7（从小到大）
  • color:颜色
    1、颜色单词
    2、#rrggbb
	<!--字体标签 font  -->
		<font size="1px" color="red">字体标签</font>
		<font size="2" color="#59E189">字体标签2</font>

推荐

<font style="color: blue;">你好</font>

3、图片标签img

属性：
1、src 图片地址
2、width 宽度
3、height 高度
4、alt 图片加载失败显示的提示内容
5、title 鼠标移动到图片上的提示内容

		<img src="https://iconfont.alicdn.com/p/illus_3d/preview_image/gOUqAFa0J5Zz/51bab137-ad27-4f11-b309-13552b504420.png" title="任万万...." width="50">
		<img src="img/fd14fdfaaf51f3de97ec743f83eef01f3a297915.jpg" alt="路径错误" title="任万万...." width="100">

4、段落标签：p ，块级标签
5、div标签：div，块级标签
6、span标签：span，行内标签
7、文本域标签，多行标签：textarea
属性：cols：列数、rows：行数

功能标签

1、超链接标签：a，行内标签

属性：
1、herf：指定跳转目标地址
2、target：新页面的打开方式，取值：_blank：空白页、_self：本页面
3、页面内的跳转：href="#"表示回到页面顶部，不写#也表示回到页面顶部
实现步骤：

1、在目标地，添加标签，增加id属性值
2、在起始地，使用超链接标签href的值为#id属性值

<h6><a href="#hh">六级标签</a></h6>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="hh">到这里</div>

2、下拉标签：select 需要配合子标签使用option

属性:
size：表示可见的数量
multiple：设置下拉菜单可以多选。注意：不需要赋值，写了就代表有这个属性

3、列表标签：ol(order)有序、ul无序，必须结合li(list item)子标签使用
属性：

1、type：

ol：取值：1、a、A、i、I
ul：取值：circle、square、disc（默认）

2、start：只有ol有，表示从几开始
3、嵌套标签：将列表作为另一个列表的列表项中的内容

<ol type="1">
		<li>秦
			<ul>
				<li>复苏</li>
				<li>子良</li>
				<li>小河</li>
			</ul>
		</li>
		<li>汉</li>
		<li>唐</li>
		<li>明</li>
	</ol>

有趣

<style>
			/* visibility=hidden    visibility: visible;  隐藏但是存在*/
			/* display=none  display=inline行级 / block块级*/
			.l > ul{
				display: none;
			}
			.l:hover > ul{
				display: block;
			}
		</style>
		
	<body>
		<ul>
			<li class="l">鞋子
				<ul>
					<li>运动鞋</li>
					<li>板鞋</li>
					<li>直筒鞋</li>
				</ul>
			</li>
			<li class="l">衣服
				<ul>
					<li>短袖</li>
					<li>卫衣</li>
					<li>外套</li>
					<li>比基尼</li>
				</ul>
			</li>
			<li class="l">裤子
				<ul>
					<li>连衣裙</li>
					<li>直通库</li>
					<li>休闲库</li>
					<li>工作库</li>
					<li>牛仔库</li>
				</ul>
			</li>
		</ul>
	</body>

4、表格标签：table
快捷键：4行3列（table>tr4>td3）
不规则表格：colspan：跨列、rowspan：跨行

属性：
border：边框粗细
width：宽度
height：高度
cellspacing：单元格的距离
cellpadding：单元格的内边距

结合子标签tr、td使用

属性：
align：水平，取值：left、right、center
valign：垂直，取值：top、bottom、center

5、表单标签：form
用于接收用户数据并将内容提交到服务器中的标签
属性：

  • action：用来设置当前表单数据中的数据提交到哪里
  • method：设置当前表单的提交方式
get(默认)：提交的数据会拼接到请求的地址中，请求是可以缓存，请求页面后退时不产生影响
post：提交的数据不会拼接在地址，会放在请求体中，请求不可以缓存，post请求页面后退时会重新提交请求

子标签：input，表单标签要结合input标签接收用户输入的内容，再提交给服务器。
属性：

  • type：

取值：
text
password
radio（单元框）
checkbox（复选框）
button（普通按钮）
submit（提交按钮）
reset（重置按钮）

  • name和value（类似键值对）：name属性方便后端开发获取value值(getparameter/getparameterValues)

    1、在text和password中，value是输入框中用户输入的内容
    2、在radio和checkout中，name属性值和value属性值会形成键值对，此外，name属性在radio中，可以让多个radio归于一个组中，达到非此即彼的效果
    3、在button、reset、submit中，value属性值是按钮中的文字

  • placeholder：框中的提示内容
  • maxlength：框中内容的最大字符数
  • checked：单选、复选框的默认选中状态，注意：不需要赋值，写了就代表有这个属性

补充：

1、关联效果（id-for)，点击“女”可以选中框

<form>
			<input type="radio" name="sex"/>男
			<input type="radio" name="sex" id="a"/><label for="a">女</label>
			<input type="radio" name="sex">其他
</form>

2、button在表单外是普通按钮，在表单中是提交按钮

注意: border（边框）、padding（内边距）、margin（外边距）

CSS

用来美化页面，统一所有标签的样式设置方式

语法

内联样式： 将样式属性写在标签中

<img src="..." style="样式名:样式值;样式名:样式值;样式名:样式值;">
<a href="..." style="样式名:样式值;样式名:样式值;样式名:样式值;"></a>

内部样式表：在head中写style标签，在style中通过选择器找到指定的标签对样式进行设置

<head>
		<meta charset="utf-8" />
		<title>常用标签</title>
		<style>
			选择器{
				width: 80px;
				...
			}
		</style>
	</head>

外部样式表：

创建css文件，在css文件中定义标签的样式，再将这个css文件引入需要使用这些样式的html页面中
外部样式表中css语法与内部样式表一模一样link

<head>
		<meta charset="utf-8" />
		<title>常用标签</title>
		<link rel="stylesheet" href="..."/>
		<style>...</style>
	</head>

三种写法的优先级：就近原则

选择器

用于定位到指定的标签
1、元素(标签)选择器

		标签名{
			样式名:样式值;
			样式名:样式值;
			...
		}

2、类选择器
为指定的标签添加class属性值

		.class值{
			样式名:样式值;
			样式名:样式值;
			...
			}

3、id选择器
为指定的标签添加id属性值

		#id值{
			样式名:样式值;
			样式名:样式值;
			...
			}

4、通配符选择器（页面全部）
作用：清除内外边距、字体设置、查看页面布局(通过设置边框，另border有三个值：颜色 虚实线 粗细，不分先后)

	*{
			样式名:样式值;
			样式名:样式值;
			...
		}

5、子代、后代选择器
子代：

选择器1 > 选择器2 >...{
	样式名:样式值;
	样式名:样式值;
	...
	}

后代：

选择器1 选择器2{
	样式名:样式值;
	样式名:样式值;
	...
}

<head>
		<style>
			/* 子代 */
			div > p{
				color: red;
			}
			/* 后代 */
			#d  li{
				font-size: 10px;
			}
		</style>
	</head>
	<body>
		<div id="d">
			<ul>
				<li>曹贼</li>
				<li>孙权</li>
			</ul>
		</div>
		<div>
			<input type="text" value="子代">
			<p>Lorem, ipsum.</p>
		</div>
	</body>

6、相邻兄弟选择器
(往后查找)

选择器1+选择器2{
	样式名:样式值;
	样式名:样式值;
	...
}

<head>
		<style>
			#d+p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>Lorem, ipsum.</p>
		<div id="d">
			<span>你好</span>
		</div>
		<p>Lorem ipsum dolor sit amet.</p>
	</body>

7、分组选择器
可以将多个选择器结合在一起

选择器1,选择器2,选择器3,...{
	样式名:样式值;
	样式名:样式值;
	...
}

<head>
		<style>
			div,span,input{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>哈哈哈</div>
		<p>嘻嘻嘻</p>
		<span>Lorem, ipsum.</span>
		<br >
		<input type="text" value="最后一个">
	</body>

8、属性选择器
选择指定属性或者指定属性值的标签

选择器[属性名]{
	样式名:样式值;
	样式名:样式值;
	...
}

选择器[属性名='属性值']{
	样式名:样式值;
	样式名:样式值;
	...
}

选择器[属性名][属性名='属性值'][属性名='属性值']{
	样式名:样式值;
	样式名:样式值;
	...
}

9、伪类选择器

选择器:模式{
	样式名:样式值;
	样式名:样式值;
	...
}

模式:
1、link:超链接的默认状态
2、visited:超链接被访问过的状态
3、hover:鼠标悬浮在标签上的状态
4、active:鼠标按住标签的状态

<style>
			a:link{
				color: yellow;
			}
			a:visited{
				color: red;
			}
			a:hover{
				color: blue;
			}
			a:active{
				color: pink;
			}
				
			p:hover{
				color: blue;
			}
			p:active{
				color: pink;
			}
			
		</style>
		
	<body>
		<p>哈哈哈</p>
		<a href="#">点我</a>
	</body>

10、nth-of-type(An+B) 选择器（了解）

A表示每隔(A-1)个开始变化 B表示从第几行开始 正负表示从上到下(+)还是从下到上(-)
An和B的顺序不能变化

<head>
		<style>
			li{
				background: lightgray;
				border: 1px solid red;
				height: 50px;
			}
			li:nth-of-type(-2n+8){
				/* nth-of-type(An+B) */
				/* A表示每隔(A-1)个开始变化  B表示从第几行开始 正负表示从上到下(+)还是从下到上(-)*/
				background: red;
			}
		</style>
	</head>
	<body>
		<ol>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</body>

盒子模型

1、内边距
指边框和边框内容之间的距离padding

padding:npx：指四周内边距都为n像素
padding-left/right/top/bottom :表指定方向的内边距是n像素
padding:apx bpx:上下内边距为a像素，左右内边距为b像素
padding:apx bpx cpx dpx:上右下左的像素

注意

  • 内边距会影响整个标签的大小

2、外边距
指标签与标签之间的距离margin

margin:npx：指四周外边距都为n像素
margin-left/right/top/bottom :表指定方向的外边距是n像素
margin:apx bpx:上下内边距为a像素，左右外边距为b像素
margin:apx bpx cpx dpx:上右下左的像素

注意

  • 上下外边距取最大值
  • 左右外边距取两者之和

3、边框border
颜色、粗细、样式（顺序任意）
样式取值：solid实线、dashed虚线、double双实线、dot点划线

<head>
		<style>
			#q{
				width: 100px;
				height: 100px;
				border: solid red 1px;
			}
			#a{
				width: 20px;
				height: 20px;
				border: dashed blue 1px;
				margin-left: 40px;
				margin-top: 40px;
			}
		</style>
	</head>
	<body>
		<div id="q">
			<div id="a">
			</div>
		</div>
	</body>

定位

属性：position
结合属性：left、right、top、bottom
取值：

1、statis：默认定位
2、absolute：绝对定位，相对于body
3、relative：相对定位，相对于默认位置
4、fixed：固定定位

<head>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#p2{
				/* position: static;
				top: 10px; */
				/* position: absolute;
				top: 10px; */
				position: relative;
				top: 10px;
			}
			#d{
				width: 100px;
				height: 100px;
				background: pink;
				position: fixed;
				right: 0;
				top: 200px;
			}
		</style>
	</head>
	<body>
		<p id="p1">Lorem ipsum dolor sit amet.</p>
		<p id="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
		<div id="d"></div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<p>1</p>
	</body>
不忌嘴的tom猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html_css_material
03-04
html_css_material
HTML_CSS
03-14
HTML_CSS
html_css_material-master.zip
11-22
免费下载，对应博客的教学进程
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 464
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
前端面试题日常练-day05 【面试题】
qq_44640575的博客
05-11 386
解释：在CSS中，使用`.`作为类选择器，可以选择所有具有指定class名称的元素。例如，如果想选择所有class为"my-class"的元素，可以使用`.my-class`选择器来实现。这样的选择器可以为元素添加特定的样式或者在JavaScript中进行处理。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 364
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
前端页面 贴边拖拽 盒子
m0_46512929的博客
05-13 218
vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客
Java Web开篇
2403_82385265的博客
05-13 169
这是前端和后端组成的系统的框架结构。
JavaScript基础(六)
2401_82863547的博客
05-11 508
console.log('对折了'+i+'次，高度达到了'+paper+'超过了珠峰');当你不知道循环执行多少次，可以写个死循环，然后在循环体内判断，满足条件后break终止即可。依次输入三个弹窗，第一个输入数字，第二个输入运算符，第三个输入数字，然后给出结果。score = prompt('请输入第'+i+'局的成绩')var num2 = prompt('请输入运算符+-*/');但是，这种写法不好，用变量接收输出的写法是最好的，更好维护。或满足一边就行，用ΙΙ对不对，那同时满足用&&，复习一下。
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
Dnn01的博客
05-14 265
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
【UniApp踩坑记录】在subNvue页面中使用Map，添加marker后不显示
Alan_Walker688的博客
05-11 1104
uniapp subNvue页面中使用 map 后发现 marker 不显示的问题及解决
前端之电力系统SVG图低代码
weixin_38233449的博客
05-14 251
有了线，当然需要面，这时候一个polygon类就可以解决，唯一和polyline不同的是，path最后一个点需要Z闭合。两点一线，只要知道两个点的坐标就可以，但是基础图元可以旋转，也可以闪烁，所以这些属性都需要动态计算。其实所有的图形都是由点，线，面组成的。ployline也是用path就可以了，但是中间的点需要连起来，样式的计算需要循环拼接字符串。两点可以组成线，多点可以组成折线，这就需要一个polyline类去解析每个折线。svg里面的渲染最有难度的大圆弧和小圆弧，需要用到三角函数。
【IC前端虚拟项目】验证环境env与base_teat思路与编写
moon9999的博客
05-11 109
分析以下哈，各个agent我都放在env里了，其实我觉得考虑到向上集成的情况，放在base_test里或许更合适一些。base_test里平级放着三个东西：env、ral_model和axi_ram_model，axi_ram_model上一篇文章已经说明，ral_model的例化下一篇中会简要说明下不做重点。上一篇里解决了最难搞的axi_ram_model，接下来呢就会简单又常规一些了，比如这一篇要说的env和base_test的搭建。
Vue 项目中使用防抖与节流
码海扬帆：前端探索之旅的博客
05-13 218
在上述代码中，handleSearch函数使用了防抖函数debounce，在输入框的@input事件中触发搜索操作。handleScroll函数使用了节流函数throttle，在滚动事件中触发滚动处理逻辑。在某个事件触发后，间隔一段时间执行函数，如果在这段时间内再次触发该事件，则忽略该事件。常见的应用场景是滚动事件，当用户滚动页面时，只在一定时间间隔内执行滚动处理函数。在某个事件触发后，延迟一段时间执行函数，如果在这段时间内再次触发该事件，则重新计时。），然后在需要使用的组件中引入并使用它们。
vue+springboot富文本编辑
最新发布
m0_74924621的博客
05-16 230
【代码】vue+springboot富文本编辑。
微前端无界方案
michael的博客
05-13 836
微前端无界方案一文收录
css3蒲公英飘动效果_css3 云朵飘动效果动画_html/css_WEB-ITnose
06-09
那么，您想了解如何实现 CSS3 蒲公英飘动效果和云朵飘动效果动画。 对于蒲公英飘动效果，可以使用 CSS3 的动画和 transform 属性，具体实现步骤如下： 1.先在 HTML 中添加需要飘动的元素，比如 div。 2.使用 CSS3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值