html笔记2

2022-06-06 00:32:49 作者：互联网
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head>
<body>
	<!-- 
		display:block;
		display  翻译：显示；作用：规定盒子显示的样子
		block  翻译：块；作用：块盒子，既占上级盒子一行
		baxkground:red;
		baxkground  翻译：背景；作用：设置标签盒子的背景
		red  翻译：红色；作用：此处意思是背景颜色为红色
		width  翻译：宽度；作用：设置盒子的宽度，单位px(像素)
		height  翻译：高度；作用：设置盒子的高度
		margin  翻译：边距，也叫外边距；作用：设置盒子和其他盒子之间的距离
		border  翻译：边框；作用：设置盒子边框，默认透明，具体使用自行搜索
		padding  翻译：填充，也叫内边距；作用：设置盒子边框和内容之间的距离
	 -->
	<div style="
		background-color: #f1f1f1;
		text-align: center;
		padding: 40px;
	">
		<img src="https://i1.hdslb.com/bfs/garb/item/13fd84dfc347e99f42cc91f4aee9d5c28c51a289.png@144w_144h.webp"
			alt="康文昌" width="80px" height="80px">
		<!-- 
			alt:图片错误时显示的替代文字
			src：来源；资源
		-->
	</div>
	<!-- 
		max		最大
		width	宽度
		margin	外边距
		auto	自动
		line	行
		height	高度
		1.7		这里指的是高度
	 -->
	<div style="
		max-width: 760px;
		margin: 30px auto;
		padding: 15px;
		line-height: 1.7;
	">
		<p>1.HTML数据作为参数传给浏览器函数处理后成为网页画面；</p>
		<p>2.浏览器渲染原理就是找到HTML标签，分成小盒子，再找到小盒子的样式，然后把它们画出来；</p>
		<p>3.组合不同标签，使用不同样式，像玩俄罗斯方块一样做出各种网页；</p>
	</div>
	<div style="
		background-color: #f1f1f1;
		text-align: center;
		padding: 40px;
		font-size: 12px;
	">
		<p>版权所有：kangwenchang.con</p>
		<a href="www.bilibili.com">哔哩哔哩首页</a>
	</div>
</body>
</html>
标签：浏览器,标签,html,小盒子,HTML,笔记,哔哩,网页
来源： https://www.cnblogs.com/aknote/p/16345730.html