【html+css】学习笔记

最新推荐文章于 2024-10-02 17:15:49 发布

我还没秃我还能学！

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量475

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_43068329/article/details/107734135

版权

这篇博客详细介绍了HTML和CSS的基础知识，包括图片、超链接、表格、表单标签、背景图设置、边框样式、字体样式、CSS选择器、样式优先级等。还分享了浮动、定位、透明度等高级技巧，并提供了VSCode快捷键和代码格式化方法，以及下拉菜单和元素居中定位的实现方法。

摘要由CSDN通过智能技术生成

.css样式优先级：行内style > id 100 > class 10 > 标签 1 > *

.margin:auto左右居中

.标签分类：display

.隐藏：dispaly:none 不占空间的隐藏

.溢出隐藏：overflow: hidden/scroll/auto; overflow-x/y：针对x/y轴设置滚轮

.透明度：opacity:0; 0~1 不透明~透明标签里的所有内容都变透明

.鼠标移入光标样式小手:cursor: pointer;

.浮动： float:left/right; 清除浮动：clear:left/right/both 完美清除浮动：.clear::after{content:''; clear: both; display: block; }

.定位：position

定位实现下拉菜单：

定位实现元素居中：

圆角 border-radius: 5px;

vscode格式化代码的快捷键是Windows中Shift+ Alt+F
多光标操作快捷键：按住alt,用鼠标左键点击,可以出现多个光标,输入的代码可以在光标处同时增加。按住Ctrl + Alt,再按键盘上向上或者向下的键,可以使一列上出现多个光标。
transparent透明色
.初始化设置：

* {margin: 0;padding: 0;}
a {text-decoration: none;}
ul {list-style: none;}
img {display: block;}
.container{width: 980px;margin: 0 auto;position: relative;}
.container-fluid{width: 100%;}

.img：图片

.a：超链接

<a href="https://baidu.com" target="_blank(在其他页打开）_self(在当前页打开)" text-decoration: none;(去掉下划线)>百度</a>
<base target="_blank">在<head></head>里写设置全局超链接跳转为在新页面打开
一个网页内部跳转：通过锚点
<a href="#one">第一</a> <h2 id="one">第一</h2>

.列表 list-style:none;去掉前面的点

<ul>
<li type="disc">默认实心圆，不加type也是实心圆</li>
<li type="circle">设置空心圆</li>
<li type="square">设置实心方块</li>
</ul>

<ol>
<li type="A">第一</li>
<li type="i">第二</li>
<li type="I">第三</li>
</ol>

<dl>
<dt>标题</dt>
<dd>标题内容</dd>
<dt>标题</dt>
<dd>标题内容</dd>
</dl>

<ul>
<li>辽宁省
<ul>
<li>沈阳</li>
<li>丹东</li>
<li>大连</li>
</ul>
</li>
<li>xx省
<ul>
<li>x市</li>
<li>x市</li>
<li>x市</li>
</ul>
</li>
</ul>

.表格

colspan:合并行
rowspan:合并列
<table border="1px" cellspacing="10" cellpadding="30">
<caption>这是表格标题</caption>
<thead">
<tr align="center">
<th>这是表头第一行第一列</th>
<th>这是表头第一行第二列</th>
<th>这是表头第一行第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第二行第一列</td>
<td>第二行第三列</td>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">语义化标签</