HTML学习笔记（一）

xieyaboXYB

已于 2023-08-14 17:16:06 修改

阅读量77

点赞数

分类专栏： # 前端基础文章标签： html 学习笔记 css

于 2023-08-14 17:10:00 首次发布

本文链接：https://blog.csdn.net/xieyaboXYB/article/details/132275787

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

版心宽不能超过1280px;

   路径:
       1.相对路径:一般指的是本地文件(项目文件夹里的文件)的引入
       引入方法:首先先找自己所在项目中的位置，接着找要引入文件的位置，然       后判断，你与要找文件之间的关系，如果是同级别关系，就直接写，如果       存在下一级，就添加/ ;如果存在上一级，就添加../

2.绝对路径:一般指的线上文件(以http://或者https ://开头的文件)的引入

5.加粗标签<b></b> <strong></strong>

6.倾斜标签 <i></i> <em></em>
7.强制换行 <br>
8.空格符  
上标 <sup></sup>
下标 <sub></sub>
9.无序列表
<ul>
<li></li>
</ul>
10.超链接标签 <a href="#" target="_blank"></a>

CSS样式

CSS（层叠样式表）

（布局属性：宽高、浮动）

（背景属性：背景颜色、背景图片、）

（文本属性：文字的颜色、大小、间隔）

1.宽度 width:200px;
2.高度 height:200px;
3. 背景颜色 background-color:#000;
4.浮动 flot:left/right/none;

浮动可以让非块元素偷偷变成块元素类型

（为了实现左右排列）破坏了标准文档流，大标签不再独占一行。

clear : left / right / both ;

清除浮动:清除浮动带来的影响----不占位置，父元素高度塌陷；

高度塌陷问题怎么解决？(6个)

       高度塌陷：子元素添加float,父元素或者祖先没有给高度的情况下，父元素       会出现高度为0的情况。
       1.给父元素添加height; 只适合高度固定的布局，比如导航
       2.给父元素添加overflow:hidden/auto/scroll; 遇到有定位的时候尽量不要用
       3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加           clear:both;此方法会造成代码的冗余
       4.万能清除法。取一个公共类名，将这个公共类名给到浮动元素的父元素添加即可；
       .clear::after{
           content:"";
           display:block;
           clear:both;
           height:0;
           overflow:hidden;
           visibility:hidden;
       }
       .clear{
           zoom:1;
       }
       5.给父元素添加float;会造成新的浮动问题，不推荐使用，做了解；
       6.给父元素添加display:table; 会造成未知bug,不推荐使用，做了解

5.外边距 margin-left/margin-right/margin-top/margin-bottom
实现一个有宽度且宽度生效的盒子做水平居中
width:200px;margin:0 auto;

6.鼠标经过时显示a标签的背景图片。
   a:hover{
   background: url(/images/1.png);
   }
（可以实现鼠标经过时切换背景图片）

(一)文本类型css

1.文字颜色 color:red/#000/rgb(0,0,0)/rgba(0,0,0,0.5);
2.字体大小 font-size:16px;
3.文本水平对齐方式 text-align:left/center/right/justify(两端对齐);
4.文本修饰 text-decoration:none/underline（下划线）/
line-through（删除线）/overline（上划线）;

5.行高 line-height 第一行文字的中线到第二行文字中线的距离。
作用:
+ 针对单行文本做垂直居中效果，比如说导航；
+ 针对多行文本之间的间距，ps测量：第一行文字的头部到第二行文字头部之间的距离。
6.加粗 font-weight:100-900/bold/bolder/normal(常规粗细,同等500);

一般、较细字体：lighter: 100-300 / 常规字体：normal: 400-500 /加粗字体： bold: 600-900

7.倾斜 font-style: italic/ oblique/ normal(正常字体);
8.首行缩进 text-indent:2em; 可以取负值
9.字体 font-family:"黑体"; 默认字体为微软雅黑字体
   10.当行文本超出显示省略号
       第一步：给宽度范围--width:200px;
       第二步：让文本一行显示，不换行--white-space:nowrap;
       第三步：让超出部分隐藏--overflow:hidden;
       第四步：添加省略号--text-overflow:ellipsis;

拓展：
1.字间距 letter-spacing
2.英文的大小写转换 text-transform:capitalize/uppercase/lowercase;
3.强制不换行 white-space:nowrap;
4.让文本跟预设的一样 white-space:pre;

11. 去掉超链接的下划线 text-decoration: none;
12. 设置a标签被鼠标点击时的字体颜色
ul>li>a:active{
color:orange;
}
13.设置每个li列表被鼠标滑过时的背景颜色
ul>li:hover{
background-color:#000;
}
14.把列表前面黑点去掉 list-style: none；

<pre>元素，当我们想要保留诗歌或者代码等等的格式的时候时，该标签可以避免我们去调试其格式，其会保留我们复制好的格式。

背景属性

+ 背景颜色 background-color:#000;
+ 背景图片 background-image:url(路径);
+ 背景平铺 background-repeat:no-repeat/repeat-x/repeat-y;
+ 背景定位 background-position:left/center/right/值 top/center/bottom/值;
背景定位取值可以取负值，正值水平是向右移动，负值向左移动;垂直正值向下移动，负值向上移动
+ 背景大小 background-size:cover; 覆盖，一般针对大的背景图做整个覆盖
+ 背景固定 background-attachment:fixed;不随着纵向滚动条而滚动

去掉背景 background:none;

使用CSS进行优化：通过CSS样式设置背景图的大小，使用background- size属性进行调整。可以使用cover属性将背景图等比例缩放并覆盖整个元素，或使用contain属性将背景图等比例缩放至完全适应元素。

边框 border

1.边框的粗细 border-width
2.边框的样式 border-style
常见样式：实线solid 虚线dashed 点线dotted 双线double
3.边框的颜色 border-color
透明：将边框的宽度设置为 1px，边框样式设置为 solid（实线），并将边框颜色设置为 transparent（透明）。

四个方向边框：border: 10px solid red;
左边框：border-left:10px solid red;
右边框：border-right:10px solid red;
上边框：border-top:10px solid red;
下边框：border-bottom:10px solid red;

   去掉边框： border:0;

*使用边框注意事项：当给元素添加边框之后，边框值会计算在元素原有的宽高之上，把盒子给撑大，所以如果想保持盒子的原本大小，就需要减去添加的边框值。

请用边框实现一个箭头朝下的三角形？
实现步骤：首先先写4个方向的边框，然后宽高设为0，再将其他三个方向边框颜色设为透明即可。

CSS边框属性用于指定元素边框的样式、宽度和颜色。可以使用border-style属性来指定边框的类型，可以设置为dotted（点线边框）、dashed（虚线边框）、solid（实线边框）、double（双边框）、none（无边框）或hidden（隐藏边框）[1][2]。border-width属性用于设置边框的宽度，可以设置为具体的大小（如px、pt、cm、em）或者使用预定义的值thin、medium或thick[1][3]。border-color属性用于设置边框的颜色[1]。另外，还可以使用border-top-style、border-right-style、border-bottom-style和border-left-style属性来分别设置上边框、右边框、下边框和左边框的样式[1]。如果想要为元素添加圆角边框，可以使用border-radius属性[2]。总结来说，CSS边框属性包括border-style、border-width、border-color、border-top-style、border-right-style、border-bottom-style、border-left-style和border-radius[1][2][3]。

圆形边框

要设置一个圆形边框，你可以使用 CSS 的 border-radius 属性。border-radius 属性用于设置元素的边框的圆角。

要创建一个圆形边框，你可以将 border-radius 属性的值设置为元素的宽度的一半。例如，如果你想要一个宽度为 100px 的元素具有圆形边框，你可以设置 border-radius: 50px;。

下面是一个示例代码：

.circle {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50px;
}
在这个例子中，我们创建了一个宽高都为 100px 的元素，并将 border-radius 设置为 50px，使其具有圆形边框。

表格

快速生成表格：

4行3列的表格：
table>tr*4>td{$}*3按Tab键

表格边框颜色： bordercolor="red"
表格背景颜色： bgcolor="#000"
表格边框： border="1"
去掉表格之间的间距： cellspacing="0"(只能对table使用)
去掉单元格的内边距： cellpadding="0"(只能对table使用)
水平对齐方式： align="center"
+想让所有td里面的内容都水平居中，就需要给所有的tr添加align="center"
＋想实现整个表格位于浏览器做水平居中，就需要给table添加align="center"

+ 单元格的合并
- 合并右边的单元格(合并列) colspan="合并个数"
- 合并下边的单元格(合并行) rowspan="合并个数"
单元格做了合并之后，一定要删除或者注释掉多余的格子

表单标签

1.表单标签，主要用来提交信息使用

提交方式有2种：method="get/post"
get/post区别：
+ get提交方式会在地址栏中看到用户提交的信息，相对不安全
+ post提交方式不会在地址栏中看到用户提交的信息，相对安全
验证成功跳转路径：action="路径"

2.输入框

2.1文本类型输入框 <input type="text" name="名字" value="值" placeholder="给用户提示的">
2.2密码类型输入框 <input type="password" name="名字" value="值" placeholder="给用户提示的">

3.按钮

3.1提交按钮 <input type="submit" value="注册">
3.2任意按钮 <button>登录</button>
3.3重置按钮 <input type="reset" value="">

4.去掉按钮和文本框点击后显示的默认框线：

outline:none;

搜索框布局：

搜索框样式：

.sousuo{
width:200px;
height: 26px;
border: 0;/*去掉边框*/
outline: none;/*去掉浏览器添加的外框线*/
padding-left: 14px;
background:#f1f1f1;
}
.sousuo button{
   display: block;
   float: left;
   width:30px;
   height: 26px;
   border: 0;
   background: url(img/sousuo_03.jpg）no-repeat center center;
   cursor: pointer; /*让鼠标变手型/

怎么实现搜索框：

1.在一个div块里放一个input文本框和一个button按钮;

   <div class="SSK">
   <input class="txt" type="text" placeholder="请输入...">
   <button class="an"></button>
   </div>
2.把input文本框和button按钮转变为块元素并添加浮动——在CSS样式里添加display: block; 和float: left;

3.给input文本框和button按钮添加宽和高，并去掉边框：border:0;

4.去掉浏览器添加的外框线（去掉按钮和文本框点击后显示的默认框线）：
outline: none;

5.给button按钮添加放大镜的背景图，不平铺，垂直和水平方向都居中：
       background: url(img/SSTB.png) no-repeat center center;
    background-size: 30px 30px;
    background-color: deepskyblue;

6.让鼠标放到按钮上变成手型： cursor: pointer;

css样式权重

css选择器对应的值，权重值越高，样式就生效
“0”不表示无意义
0. *（通配符）的权重值： 0
1.标签选择器权重值：1 div{} a{}
2.class选择器权重值：10 .box1{}
3.id选择器权重值：100 #a1{}
4.包含选择器(后代选择器从后往前找【先找子级，再找父级】)
（可以减少命名的次数）
所有选择器的权重之和 .ul1 li{} 11 #box a{} 101
5.群组选择器(一般用来做样式提取) 权重就是选择器各自自身的权重 .box,p,#a1{}
6.内联样式权重值：1000

*1.样式引入的方式有哪几种？

       1.内部样式 <style> /*在里面写css*/ </style>
       2.外部样式 <link rel="stylesheet" href="路径">
                   <style>
                       @import url(路径);
                   </style>
       3.内联样式 <div style="color:red;"></div>

盒模型：

W3C标准盒模型包含哪些内容？

       4个部分内容区content 内边距padding 边框border 外边距margin
       特点：给元素添加边框和内边距之后，元素大小会被撑大，所以需要做减法。

定位 position

   简介：
   1.绝对定位：position: absolute;
   2.相对定位：position: relative;
   3.固定定位：position: fixed;
   4.粘性定位：position: sticky; CSS3新增属性值
   5.默认值： position: static;

       定位的属性值有哪些？分别有什么特点？

       1.绝对定位 position:absolute;
           特点:
               1.文档流脱离文档流，不占位置了
               2.参照物
                   2.1默认情况下，参照浏览器的第一屏做位置移动；
                   2.2参考有定位设置(最好是相对定位)的父元素或者祖宗元素                   做位置移动。
               3.层级关系 z-index 值越大，元素就在最上层

           利用绝对定位水平垂直居中方法：
                   Left: 50%;/*向右移动父元素宽度的一半*/
                   margin-Left: -100px;/*向左移动自身宽度的一半*/
                   top: 50%;/*向下移动父元素高度的一半*/
                   margin-top: -100px;/*想上移动自身高度的一半*/

       2.相对定位 position:relative;
           特点:
               1.文档流没有脱离文档流，占位置在
               2.参照物参照自己原来的位置做移动
               3.层级关系 z-index 值越大，元素就在最上层

       3.固定定位 position:fixed;
           特点:
               1.文档流脱离文档流，不占位置了
               2.参照物参照整个浏览器的窗口
               3.层级关系 z-index 值越大，元素就在最上层

       4.粘性定位 position:sticky; 主要做吸顶效果
           特点:
               1.文档流没有脱离文档流，占位置在
               2.参照物参照整个浏览器的窗口
               3.层级关系 z-index 值越大，元素就在最上层

       5.默认值 position:static;

21.悬挂式布局（图文混排效果）

使用浮动做，将图片和文字浮动；

HTML标签嵌套问题

1.<a>标签最好不要嵌套块级元素，可以嵌套内联元素。但是不能嵌套<a>标签和<input>之类的标签！

2.ul和ol的子元素不能是别的元素，只能是li，不能是别的元素，比如<div>,但是 li中可以是div，要不然在ie6和7下回把非li解析到li的内部。这个切记没有办法修复！

3.p标签不能嵌套块级元素甚至不能嵌套p元素，只能嵌套内联元素，不然对p嵌套的块级元素设置css不起作用。

4…button里面不要嵌套a标签，不然在js里面会有两个事件，还有就是button里面放img要记得给图片添加alt属性.

5.dt标签里面不能嵌套块级元素，只能嵌套内联元素。但是dd可以嵌套块级元素。

overflow属性：

   .box1{
   background: red;
   overfLow: visible; / *overflow-x和overflow-y的简写*/
}
.box2{
   background: green;
   overfLow: hidden;/*超出部分隐藏*/
}
.box3{
   background: skyblue;
   overfLow: scroll;/*会出现横向和纵向滚动条，哪个方向超出哪个方向就先可以滚   动查看剩余内容*/
}
.box4{
   background:orange;
   overfLow: auto;/*哪个方向超出哪个方向就显示滚动条可以滚动查看剩余内容*/
}
.box5{
   background:green;
}