HTML和CSS的总结

最新推荐文章于 2023-06-26 12:48:46 发布

狗都不写系列

最新推荐文章于 2023-06-26 12:48:46 发布

阅读量242

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_46631196/article/details/125339465

版权

本文介绍了HTML的基本框架元素如<head>, <title>, <body>等，强调了CSS的选择器、样式表类型、颜色设置、盒子模型和定位。新手指南涵盖了超链接、图片插入、文本格式和CSS基础概念。

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

对HTML和它的CSS的初次见面

这玩意vscode插件好多，偶然发现它还有Python，有次其他课的实验需要Python，可惜不会用这里的结合版。
html规定的元素好多，"<head>、<title>、<body>、<header>、<footer> "等等都是它的基本框架。

作为一句话的起止元素标签。<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
<p> <p>:这中间内容会在html网页中显示，但是这家伙就是用来注释的了。（输入Ctrl + /即可快捷的进行注释！）
这里还有一些嵌套的元素比如 “<sr>”等等。另外“ ”里的东西在浏览器也不会显现出来。标题<h>，后面的数字是几号标题。文本格式这里略过就行了，毕竟有专业的css。
超链接的语法：<a href="https://www.baidu.com/" target="_blank">百度一下</a>。这里herf就是要进入的地址，后面那个就是在新界面打开这个网址，在当前页面的是_self。锚点（意思和我玩的原神游戏里的一样）需要先用id属性生成锚点，然后后面如果用到了直接在id值前加个#即可。
照片插入：src属性为要显示图片文件的位置 URL，即图片文件的路径；alt属性当获取图片出现问题时显示的文字（占位符）。要记得分清绝对路径和相对路径。
想用特别格式的文本展示就使用pre标签。

css部分

了解class选择器，外部样式表就是将样式单独放入.css中，这样结构就比较清晰。内部样式表就是将样式放在html文件中，这种一般用的比较少，当然看自己习惯了。内联就是直接把样式规则直接写到要应用的元素中。
颜色去ColorDrop 或 LOL Corlors 挑选自己网站的配色。尺寸这里有正有负，比如

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}

这里将width改为-100%,它并不是消失了，而是在框外显示着。对齐以简单的设置text-align属性为left, center, right即可。
盒子模型这里就是讲的内、外边框。Border 边框，Margin 外边距。定位存在静态、相对、固定、绝对四种，静态就是正常位置默认位置，相对定位就是相对静态位置的修改偏移。固定就是你拖动页面它依然在你拖动后页面的同样位置。绝对这里要注意，是相对它的父元素进行偏移。
溢出没太理解，可能是那会在走神。浮动使用float属性，就是让它的元素和其他的元素合理的兼容。
用opacity对任何元素（不过常用于图片）设置不透明度。组合选择器？好陌生的词，难道又走神了。根据教材理解，这个应该就是将某个元素定义，后面div元素中引用前面这个元素。（这块与子选择器部分不太理解，可能走神了），子选择器应该就是在它的直属直系下才会引用定义的元素，主要看他的直接父元素是否更改。
伪类和伪元素，是用于定义元素的某个状态。它的语法;

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

总结

关于前面这两部分，对初学者的我来说，它并不难，只是东西很多很琐碎，如果不经常用它的话可能就掌握得较少。另外仍存在疑惑的部分是组合选择器，由于课下未及时复习和课上走神导致吧。对本门课的选择初衷其实是因为它的行业工资真的很香，但上了王老师的课后发现，吸引我的并不仅仅只有它的薪资（毕竟这是现实考虑的实际问题），而是老师真的想把知识带给每一个讲台下的我们。老师从第一节课就开始提起，每个人都有自己的兴趣与选择，而我的选择就是负责教会在课堂里的你们，所以你们来了就好好听，不要玩手机。当然，如果窗外的风景或者图书馆独属自己的世界更美，你们可以选择去做自己更感兴趣的事（个人听到的体会，并不是老师所说原话）。
最后，既然我选择了它，我会认真上完每一堂课。加油！