(7)从零开始学前端(学习笔记)-JavaWeb-HTML-类、ID、块
本帖最后由 LHW 于 2022-3-28 15:13 编辑(7)从零开始学前端(学习笔记)-JavaWeb-HTML-类、ID、块
本人自学两年，想通过笔记来帮助一些刚入门的小白快速的了解前端知识，如果喜欢这个系列，可以点赞评论支持一下嘛，谢谢各位啦:$qqq
纯手打非复制，如有错误可以在评论区纠正，感谢支持{:1_893:}
--续借上集--
前言
今天的学习目标以块元素、内联元素、class属性、ID属性为主，学完此帖我们需要学会，如何给标签定义class属性和ID属性，块状元素和内联元素有什么区别？希望大家在学习完之后能够记录一下，以防笔记丢失,,,
类
1. 什么是类属性？
在HTML文件中有许多标签，当我们要用CSS美化页面的时候，不能够在同一个文件中进行内联样式设置，原因是文件的大小会影响文件编译速度。这个时候我们就需要设定一种属性可以选取我们想要的元素进行美化。
类属性存在意义就是让多种需要相同样式的标签拥有相同样式，减少样式代码重复性。
2.实例
文字1和文字2的样式属性都相同，因为他们绑定了同一个class属性
https://s1.ax1x.com/2022/03/28/qrpS0S.png
<!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>Document</title>
<style>
.i1 {
color: red;
background-color: rgb(255, 250, 205);
}
</style>
</head>
<body>
<ul>
<li class="i1">吾爱破解1</li>
<li class="i1">吾爱破解2</li>
</ul>
</body>
</html>
ID
1. 什么是id属性？
在HTML页面中，我们需要给页面里面的标签创建某些样式或者，绑定某些js事件，这个时候我们就需要给元素添加id属性，让css选择器或者js选择器选中此元素进行更改。
他与Class属性的区别就在于id属性查找速度更快且id是唯一的，不可在同一个页面中命名相同的id。
2.实例
给两个元素绑定不同的样式，用id属性，两个id的名称不相同，所以显示的样式不同
https://s1.ax1x.com/2022/03/28/qrAOLn.md.png
<!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>ID属性</title>
<style>
* {
margin: 0;
padding: 0;
}
.id1 {
width: 100%;
height: 300px;
color: rgb(255, 255, 255);
background-color: rgb(17, 0, 255);
}
.id2 {
width: 100%;
height: 200px;
background-color: rgb(0, 255, 13);
}
</style>
</head>
<body>
<div class="id1"> <!-- 给div1添加css属性 -->
</div>
<div class="id2"> <!-- 给div2添加css属性 -->
</div>
</body>
</html>
块元素与内联元素
1. 什么是块元素？
块级元素就是在浏览器显示时，会自动换行的，在新的一行显示内容。
2. 什么是内联元素？
内联元素就是在浏览器显示时，不会自动换行的，不会在新一行显示内容。
3.<div>元素与<span>元素
<div>元素是块级元素，<span>元素是内联元素，尽管他们没有什么特定含义，但是使用频率是非常高得。
<div>元素浏览器就会在前后显示进行拆分，与CSS进行配合可以对大内容进行设置样式属性。
<span>元素浏览器会在同行显示，跟CSS配合使用得时候，可以用于为部分文本，设置样式属性。
4.实例
给两个div元素绑定不一样的class属性，可以看到div元素具有换行显示的特性，而span元素不具有此特性，只能同行显示
https://s1.ax1x.com/2022/03/28/qrCcFg.png
<!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>块元素与内联元素</title>
<style>
.div1 {
color: rgb(255, 255, 255);
border: 1px solid rgb(17, 0, 255);
background-color: rgb(17, 0, 255);
}
.div2 {
border: 1px solid rgb(0, 255, 13);
background-color: rgb(0, 255, 13);
}
</style>
</head>
<body>
边界
<div class="div1"> <!-- 给div1添加css属性 -->
<span>内联元素1</span>
<span>内联元素2</span>
<span>内联元素3</span>
</div>
<div class="div2"> <!-- 给div2添加css属性 -->
<span>内联元素4</span>
<span>内联元素4</span>
<span>内联元素4</span>
</div>
边界
</body>
</html>
总结
本文参考：https://www.w3school.com.cn/html/html_blocks.asp
本文主要内容：HTML 内联元素、HTML 块级元素、HTML 类、HTML ID，后续也会推出续集。希望大家能持续关注{:1_921:}
{:1_893:}谢谢大家能够看到这里，如果觉得对你有帮助的话，可以点赞评论支持一下嘛谢谢各位啦:loveliness:
支持，支持~~~~~~~~~~~~~~~ 讲的真详情，对新人非常友好了 前端也不容易啊
页:
[1]