【html +CSS 学习之路】知识点总结笔记

最新推荐文章于 2023-04-10 17:25:53 发布

Tanzq-blog

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量247

点赞数

本文链接：https://blog.csdn.net/qq_46276931/article/details/115050400

版权

3.17

学习视频：「李南江」HTML+CSS 基础入门教程全套视频 | HTML5+CSS3基础+案例
编译器使用：webstorm。

类似于h1标签的作用
h1标签的作用是用来告诉浏览器，那些文字是标题，也就是h1标签是专门用于给制定的文字添加标题语义的
不是可用用来修改文字大小，并且可以给文字加粗的。
其他的html 属性类似。

3.18

storm 快捷键

组合键	功能
Ctrl + Alt + Insert	能快速的创建一个文件
Ctrl + Alt + D	能直接复制一行
Ctrl + Alt + X	能直接删除一行
Ctrl + Alt + T	能够生成一个双标签
`ul>li4>h1 + ul > li3` + tab	能快速生成标签格式（其他的类似）

<hr>

生成分割线
在这里插入图片描述

img

加载图片

<body>
<!-- src 加载图片-->
<img src="https://th.bing.com/th/id/R1fdf3a183158c62b91e690d8beee6ebe?rik=mHL6yEiXiMAK9Q&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10417.jpg&ehk=wzkrRqNZfU1InC6bUzefYssPjoFNJBZZ7qSj6P7WHPI%3d&risl=&pid=ImgRaw" alt="">
<!-- height width 输出指定大小的图片-->
<img height="500" width="100" src="https://th.bing.com/th/id/R1fdf3a183158c62b91e690d8beee6ebe?rik=mHL6yEiXiMAK9Q&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10417.jpg&ehk=wzkrRqNZfU1InC6bUzefYssPjoFNJBZZ7qSj6P7WHPI%3d&risl=&pid=ImgRaw" alt="" >
<!-- 输出指定宽度或者高度，系统会自动加载合适的高度或者宽度-->
<img src="https://th.bing.com/th/id/R1fdf3a183158c62b91e690d8beee6ebe?rik=mHL6yEiXiMAK9Q&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10417.jpg&ehk=wzkrRqNZfU1InC6bUzefYssPjoFNJBZZ7qSj6P7WHPI%3d&risl=&pid=ImgRaw" alt="" height="400" >
<!-- title 表示鼠标悬停时显示的内容 -->
<img title="这是一张图片，懂？" src="https://th.bing.com/th/id/R1fdf3a183158c62b91e690d8beee6ebe?rik=mHL6yEiXiMAK9Q&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10417.jpg&ehk=wzkrRqNZfU1InC6bUzefYssPjoFNJBZZ7qSj6P7WHPI%3d&risl=&pid=ImgRaw" alt="" height="400" >
<!-- alt 用于无法显示改图片时输出的东西-->
<img src="" alt="无法显示该图片">
</body>

在这里插入图片描述

br

换行功能

a 标签

跳转地址
target 属性 _self 跳转到当前页面， _blank 跳转到一个新的界面

base 标签

指定整个网站链接跳转的基本方式，需要在head标签中写。

假链接

有两种格式：

#
Javascript:

两者的区别： #的假链接会自动回到网页的顶部，（也就是一般网页中回到顶部的那个按钮的基本原理）， javascript的假链接不会自动回到网页顶部。

跳转到该页面的某一个位置

只需要给那个区域写一个id，链接标签地址写上#id名即可跳转，实现平常看到的目录功能。
如果要跳转到某一个链接界面的某一个位置，在链接的后面加上#id名即可。

<ul> 和 <li>

无序列表

<ol> 和 <li>

有序列表

<dl> 、 <dt> 、<dd>

定义列表
dt 做定义用的
作用： 1、做网站尾部的相关信息 2、做图文混排

表格标签

table 表示表格标签
tr 表示行， td 表示列。

宽度和高度可以给table 和 td 使用
水平对齐可以给table 、 tr 、td 标签使用 (align)
垂直对齐只能给tr td使用(valign)
td tr 有同样的对齐属性，会优先使用td
外边距（cellspacing 单元格和单元格之间的距离, 默认2px）和内边距（cellpadding 单元格边框和内容之间的间距,默认为1px）只能给table 标签使用

制作细线表格：
1、给table 标签设置 bgcolor
2、给tr 标签设置 bgcolor
3、给table 标签设置cellspacing = "1px"

caption 专门给表格设置标题的一个标签, 需要写在table 标签中，与tr 同级。

标题单元格标签， th （与td同级），只要将当前列的标题储存在这个标签中就会自动居中 + 加粗文字

table 的完整结构应该具有这些信息：
1、caption 作用：指定表格的标题
2、 thead作用：指定表格的表头信息
3、 tbody作用：指定表格的主题信息
4、tfoot作用：指定表格的附加信息

注意点：
1、如果我们没有编写tbody ，系统会自动的给我们填上这个标签
2、如果指定了thead 和 tfoot，那么再修改整个表格的高度时， thead 和 tfoot 有自己默认的高度，不会随着表格的变化而变化。

3.21

textarea

在这里插入图片描述
默认情况下可以无限换行，有默认高度和宽度，可以手动将其大小变的更大。
可以通过cols和rows来指定输入框的宽度和高度。

个人简介： <textarea name="123" id="34" cols="30" rows="10"></textarea>

select

实现标签下拉。
在这里插入图片描述

 地区：<select id="city">
        <option value="">武汉</option>
        <option value="">长沙</option>
        <option value="">北京</option>
        <option value="" selected="selected">江苏</option>
    </select>

输入框绑定待选列表

在这里插入图片描述

<p>
        <input type="text" list="city">
    </p>
    
    <datalist id="city">
        <option value="武汉"></option>
        <option value="长沙"></option>
        <option value="北京"></option>
        <option value="江苏"></option>
    </datalist>

实现表单边框效果

在这里插入图片描述

<form action="">
    <fieldset>
        <legend>登录界面</legend>
        账号：<br>
        <input type="text" name="name" value="acount">
        <br>
        密码：<br>
        <input type="password" name="pwd" value="password">
        <br><br>
        <input type="submit" value="提交">
        <!-- 提交表单时， value 就代表了每个input具体的值 -->
    </fieldset>
</form>

vido标签

属性	功能
`src`	播放地址
`autoplay`	是否需要自动播放
`controls`	是否需要显示控制条
`poster`	没有播放前显示的图片
`loop`	是否需要循环播放
`preload`	预加载，与autoplay 冲突
`muted`	静音
`width height`	宽度高度，与img 属性相同

为了解决各大浏览器对视频格式不兼容的问题， H5推出了第二种写法。

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
</video>

只要符合其中一种格式的视频即可。

注意：需要浏览器只是H5标签，如果需要兼容所有的浏览器，需要学习一个JS框架HTML5media。

audio标签

和前面一个标签差不多，只是这个是播放声音，没有图片。 height 、 weight 、poster 不能用。

details标签

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>  <!-- 隐藏内容 -->
</details>

marquee标签

实现跑马灯效果。

属性	作用
direction	设置滚动方向 left 、right 、 up、 down
`scrollamount`	设置滚动属性，值越大越快
loop	设置滚动次数，默认值-1，无限滚动
behavior	设置滚动类型 slide 滚动到边界就停止， alternate 滚动到边界就弹回

HTML字符实体

HTML字符实体

CSS 文字相关属性

属性	取值	快捷键	意义
font- style	italic	fs	斜体
	normal	`fsn`	正常
font-weight		`fw`	字体粗细
	bold	`fwb`	字体变粗
	bolder	`fwbr`	字体变更粗
font-size		`fz`	字体大小
	30	`fz30`	字体大小为30像素
font-family		`ff`	字体的种类

想要使得英文和中文是两种不同的字体，那么再font-family属性中，首选英文字体，备选中文字体即可实现这个效果。

可以将字体直接写在一行中，遵循下面这种格式：
font: style weight size family
（缩写形式需要注意：空格，style weight 位置可交换， size family 不能缺少）

文本属性

属性	取值	快捷键	意义
text-decoration	none	td	无意义，主要用于去掉超链接的下划线
	underline	`tdu`	下划线
	line-through	`tdl`	删除线
	overline	`tdo`	上划线
text-align	left	ta	向左对齐
	right	`tar`	向右对齐
	center	`tac`	居中
text-indent		`ti`	缩进
	2em	`ti2e`	缩进两个文字的长度

后代选择器

后代之间必须用空格隔开
后代不仅仅是儿子，也包括孙子、重孙子……

标签1 标签2

子元素选择器

子元素选择器只会查找儿子，不会查找其他被嵌套的标签
子元素选择器之间需要用>号链接，并且旁边不能有空格
标签1>标签2

并集选择器

具有并集的两个元素中间不需要使用空格，名字连在一起即为连接。
标签1标签2

交集选择器

使用 ,来连接。
标签1,标签2

3.22

P75

相邻兄弟选择器

通过+号连接，只能选中紧跟后面的那个标签，不能选中被隔开的选择器。

标签1+标签2

通用兄弟选择器

标签1~ 标签2，使用 ~ 号连接, 选中的标签可以是标签1后面的所有标签，无论有没有被隔开都可以。

序选择器

选择器	意义
标签1:first-child	选中同级别中的第一个且标签为标签1
:last-child	选中同级别中的最后一个且标签为标签1
:nth-child(n)	选中同级别中的第n个且标签为标签1,可填odd, even(选中所有奇数\偶数)，可填xn+y
:nth-last-child(n)	选中同级别中的倒数第n个且标签为标签1,可填odd, even(选中所有奇数\偶数)，可填xn+y
:only-child	选中所有父元素中只有一个子元素的子元素
:first-of-type	选中同级别同类型的第一个标签
:last-of-type	选中同级别同类型的最后一个标签
:nth-of-type(n)	选中同级别同类型的第n个标签,可填odd, even(选中所有奇数\偶数)，可填xn+y
:nth-last-of-type(n)	选中同级别同类型的倒数第n个标签,可填odd, even(选中所有奇数\偶数)，可填xn+y
:only-of-type	选中父元素中有且仅有同类型数量为1的标签

属性选择器

最常见的使用场景为input。

<input type="text">
<input type="password">

选择属性进行装饰
形式：input[type] 或者 input[type=text]

属性取值是以value开头的
[attribute^=value]
属性取值是以value结尾的
[attribute$=value]
属性取值是包含value的
[attribute*=value]

通配符选择器

*选择当前界面所有的标签，当标签过多的时候，性能就会比较差。
企业中一般不会用。

继承性

并不是所有属性都可以继承，只有以color、font-、text-、line开头的属性才可以继承
在CSS继承中，只要是后代都会继承该属性。
a标签的文字颜色、下划线不会继承父类
h标签的文字大小不会继承的父类

优先级

id > 类 > 标签 > 通配符 > 继承 > 浏览器默认

!important 可以将指定的属性优先级直接设置为最高

权重计算规则

id数量 > 类数量 > 先后顺序（即层叠性）

CSS 元素的显示模式

属性	取值	快捷键	意义
display	block	`db`	块级
	inline	`di`	行内
	inline-block	`dib`	行内块级

设置背景图片

加载背景图片
background-image:url()

属性	取值	快捷键	意义
background-repeat	no-repeat	`bgr`	不平铺图片
	repeat		默认，在水平和垂直都需要平铺
	repeat-x		只在水平方向平铺
	repeat-y		只在垂直方向平铺

如果图片的大小没有标签的大小打，那么会自动在水平和垂直方向平铺和填充。
如果网站用到了图片，那么会再次申请获取图片（第一次获取页面信息）

如果图片较大的话，那么加载图片的过程就会慢，所以可以通过加载一张小图片，然后平铺来实现整个图片的效果。

设置背景图片的位置
background-position: 水平方向垂直方向 快捷键：bp
可以是具体的像素（记得要加上px，可以是负数），也可以是具体的方位名词：left、center、right。

可以使用center center 属性取值来使得很长的图片居中显示，小的分辨率网站上图片显示中间重要的部分，大的分辨率网站上可以全部显示。

背景图片的关联方式

background-attachment 快捷键：bga
scroll 默认值，会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动

背景图片的缩写方式：
background: 背景颜色背景图片平铺方式关联方式定位方式（任何一个属性都可以省略）
快捷键： bg+

CSS精灵图

图像合成技术，将多个图片合成到一个图片中，然后通过他的位置（background-position）来获取图片，减少网站请求次数。

边框属性

连写：一次变化四个边框
border: 边框的宽度边框的样式边框的颜色 快捷键： bd+

颜色属性可以省略，省略之后默认就是黑色。
样式不能省略，省略之后就看不到边框。
宽度可以省略，省略之后可以看到边框。

属性	快捷键
border-top	`bt`
border-bottom	`bb`
border-left	`bl`
border-right	`br`

取值一样。

连写方式（分别设置四条边的边框）

这个取值遵循上右下左（逆时针，省略规则，上与下相同，左与右相同，省略左，左默认为右的性质，省略下，默认为上的性质。）

属性	快捷键
border-width	`bw`
border-style	`bst`
border-color	`bocolor`

可以设置分开的属性，例：border-left-width 设置左边的宽度，其他的性质类似。

内边距

内边距也会有背景颜色。

属性	快捷键
padding-top	`pt`
padding-bottom	`pb`
padding-left	`pl`
padding-right	`pr`
padding	`p`

padding的取值遵循上右下左，其性质与上面。

快捷键

span.box${123141}*3
<span class="box1">123141</span><span class="box2">123141</span><span class="box3">123141</span>

3.23

外边距

外边距没有背景颜色。

属性	快捷键
margin-top	`mt`
margin-bottom	`mb`
margin-left	`ml`
margin-right	`mr`
margin	`m`

margin的取值遵循上右下左，其性质与上面。

设置一个（块在上边）设置下外边距，一个（块在下边）设置上外边距，那么他们的距离不会是两个边距之和，而是取大的那个作为距离。

box-sizing 属性

可以解决外加padding 或者 border 盒子变大的问题。
取值：
content-box : 元素的宽高 = 边框 + 内边距 + 内容宽高
border-box ：元素的宽高 = width

两个盒子是嵌套关系，如果里面的盒子是外边距，那么外面的盒子就会一起被顶下来，解决方法：给外面的盒子增加边框属性。

在企业开发过程中，一般情况下如果需要控制嵌套盒子之间的距离，首先考虑padding（父与子之间的关系），其次考虑margin（兄弟之间的关系）。

在嵌套关系的盒子中，我们可以利用margin : 0 auto ; 的方式使得里面的盒子水平居中（只对水平方向有效）。

居中属性关系

text-align : center 作用：设置盒子中储存的文字、图片水平居中。
margin: 0 auto 作用：让盒子自己水平居中。

清空默认边距

使用通配符选择器会降低网页性能，所以企业中一般使用下面这个代码清空默认边距。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0; padding:0}

line-height 行高

文字在行高中默认是垂直居中的。
想要一行文字在盒子高度中是居中的，那么只需设置文字的行高等于盒子高度即可。
如果文字有多行，那么需要使用padding来使文字居中。

在企业开发过程中，如果一个盒子储存的是文字，那么一般情况下，我们会以盒子左边的内边距为基准，因为右边的内边距有误差。
顶部的内边距并不是边框到文字顶部的距离，而是，边框到行高的距离。

网页的布局方式

标准排版方式就是之前学到的排版方式，块级，行级，行内块级。

浮动流排版方式（float）：
是一种“半脱离标准流”的排版方式，它只有一种排版方式——水平排版，它只能左对齐或者右对齐，在浮动流中是不可以使用 margin: 0 auto;
浮动流中不区分块级，行级，行内块级元素。

相同方向上的浮动元素，先浮动的显示在前面，后浮动的元素显示在后面。
不同方向上的浮动元素，左浮动找左浮动排序，右浮动找右浮动排序。
浮动元素浮动之后的位置，由浮动元素在浮动之前在标准流中的位置来确定。

Tanzq-blog

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【html +CSS 学习之路】知识点总结笔记

【html +CSS 学习之路】知识点总结笔记
复制链接

扫一扫

【html +CSS 学习之路】 知识点总结笔记

3.17

3.18

storm 快捷键

<hr>

img

br

a 标签

base 标签

假链接

跳转到该页面的某一个位置

<ul> 和 <li>

<ol> 和 <li>

<dl> 、 <dt> 、<dd>

表格标签

3.21

textarea

select

输入框绑定待选列表

实现表单边框效果

vido标签

audio标签

details标签

marquee标签

HTML字符实体

CSS 文字相关属性

文本属性

后代选择器

子元素选择器

并集选择器

交集选择器

3.22

相邻兄弟选择器

通用兄弟选择器

序选择器

属性选择器

通配符选择器

继承性

优先级

权重计算规则

CSS 元素的显示模式

设置背景图片

边框属性

内边距

3.23

外边距

box-sizing 属性

居中属性关系

清空默认边距

line-height 行高

网页的布局方式

“相关推荐”对你有帮助么？

【html +CSS 学习之路】知识点总结笔记

`<hr>`

`img`

`br`

`a` 标签

`base` 标签

`<ul>` 和 `<li>`

`<ol>` 和 `<li>`

`<dl>` 、 `<dt>` 、`<dd>`

`textarea`