HTML+CSS 入门学习

鹤入云霄

已于 2024-01-12 10:20:50 修改

阅读量84

点赞数

分类专栏：网络爬虫文章标签： html css

于 2023-03-12 23:39:51 首次发布

本文链接：https://blog.csdn.net/y2770169045/article/details/129482022

版权

网络爬虫专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了VSCode的开发工具快捷键，如生成文件骨架、代码格式化。接着讲解了HTML的基本标签，包括标题、段落、图片、超链接、文本样式和列表。此外，还涵盖了表格、表单元素以及块级和行内元素的概念。CSS方面，提到了选择器、样式优先级、字体属性和背景属性。最后讨论了CSS动画、媒体查询和新特性，如CSS3的圆角和阴影。

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

1.vscode开发者工具快捷键

！+ 回车     生成浏览器文件基础骨架

Shift + Alt + F    代码格式化

Alt + up 或 down    向上或向下移动一行

Shift + Alt + up 或 down    快速复制一行

Ctrl + H    快速替换

2.标题标签

<h1>一级标题最大</h1> 到 <h6>六级标题最小</h6>

h$*6    快速生成一到六级标签

HTML标签只用于标题
不要仅仅为了生成粗体或大号文本而使用标题
正确使用标题有益于SEO（排名，不充钱的）
根据内容去定义级别，<h1>用作主标题（最重要），其后<h2>（次重要），再其次<h3>

3.段落、换行、水平线标签

<p>段落</p>
<br>换行</br>    在不产生新的段落的情况下换行
<hr>水平线</hr>

4.图片标签

<img src='', alt='', tittle='', width='宽', height='高'></img>

<img>是单标签不需要闭合操作
src：路径（父子，网址，绝对，相对）
alt：图像的替代文本
tittle：鼠标悬停在上时给予提示
图片大小常规定义时只定义宽度，会自动比例缩放高度，而不定义高度

5.标签之超文本链接

<a href='url'>字符，图片</a>

默认属性：

未访问的链接
访问过的链接
点击时为链接
默认当前页面跳转，target="_blank" 打开新页面

可以通过css修改掉这些效果

6.标签之文本标签

<em>着重字</enm>
<b>粗体字</b>
<i>斜体字</i>
<strong>加重语气</strong>
<del>定义删除字</del>
<span>没有特定含义</span>

注：段落代表一段文本，文本标签一般表示文本词汇

7.列表标签之有序列表、无序列表

有序：

<ol>列表
    <li>列表项</li>
</ol>

type属性：1，a，A，i，I

无序：

<ul>
    <li></li>
</ul>

type属性：

disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

应用场景：1.无序的列表效果 2.导航效果

快速生成 ul+li 布局的快捷键：ul>li*3

8.标签之表格

<table>表格
    <tr>行
        <td>单元格（列）</td>
    </tr>
</table>

快速生成表格结构：table>tr*2>td{内容}

属性：

border：边框
width：宽
height：高

单元格合并：

水平合并：colspan 保留左边，删除右边
垂直合并：rowspan 保留上边，删除下边

9. form表单（让网站具有交互性）

表单是由容器和控件组成的，输入框、按钮叫做控件，表单就是容器

<form action='url', method='get|post', name='表单名称'></form>

属性：

action：服务器地址
get 与post 的区别：

1.数据提交方式，get提交的数据url可以看到，而post看不到

2.get一般用于提交少量数据，post用来提交大量数据

一个完整的表单元素包含三个基本组成部分：

表单标签
表单域
表单按钮

<form>
    <input type='text'>
    <input type='submit'>    
</form>

表单元素：

<form>
    <input type='text'>  文本框
    <input type='password'>  密码框
    <input type='submit', value='按钮中的文本'>  按钮
</form>

10.块元素与行内元素（内联元素）

块级元素：

在页面中独占一行（自上向下垂直排列）
可以设置宽、高属性
一般块级元素可以包含行内元素和其他块级元素

行内元素：

只占自身的大小
宽、高属性无效
一般内联元素包含内联元素不包含块级元素

常见块级元素：

div、form、h1-h6、hr、p、table、ul 等

常见行内元素：

a、b、em、i、span、strong 等

行内块级元素（不换行，能够识别宽高）：

button、img、input 等

11.HTML5新增标签

容器元素

<div> 实现：

<div id='header'></div>    标题
<div id='nav'></div>     导航
<div class='article'></div>     内容
    <div class='section'></div>     内容
<div id='sidebar'></div>     侧边栏
<div id='footer'></div>     底部

H5新标签实现：

<header>标题</header>    
<nav>导航</nav>
<article>    代表一个完整的、独立的相关内容块
    <section></section>    定义文档中的节，如章节、页眉、页脚
</article>
<aside>侧边栏</aside>
<footer>底部</footer>

旧的浏览器（如IE8）不能使用H5新标签

12.CSS（简称样式表）

语法：

引入方式：

内联样式（行内样式）：在相关的标签内使用（style）属性
内部样式：使用<style>标签在文档头部定义内部样式表
外部样式表：页面使用<link>标签链接到样式表，<link>标签在文档的头部

<link rel="stylesheet" type='text|css'href="xxx.css">

选择器：

全局选择器：可以与任何元素匹配，优先级最低，一般做样式初始化

}

元素选择器： ul、li、label、input、div 等

span{

}

类选择器：用圆点 . 来定义，针对想要的所有标签使用

<h2 class="oneclass"></h2>
<!-- 定义类选择器 -->
.oneclass{
    width:100px
}

class属性特点：

类名不能以数字开头
同一个标签可以使用多个类选择器，用空格隔开

<h1 class="oneclass twoclass"></h1>

ID 选择器：针对某一个特定的标签来使用，以 # 来定义

特点：id 是唯一的，不能以数字开头

合并选择器：提取共同的样式，减少重复代码

.header, .footer{
    height='300px';
}

选择器的优先级：

元素选择器的权重为：1

class选择器的权重为：10

id选择器的权重为：100

内联样式的权重为：1000

优先级从高到低：内联样式 > id选择器 > class选择器 > 元素选择器

13.字体属性

color：

规定文本的颜色

font-size：

设置文本的大小

单位：px

chrome浏览器接受的最小字体是12px

font-weight：

设置文本的粗细

bold：粗体
bold：更粗
lighter：更细
100 ~ 900：由细到粗，默认为400，700等同于bold

font-style：

字体样式

normal：默认
italic：斜体

font-family：

字体

宋体
微软雅黑
····很多很多

14.背景属性

background-color：设置元素背景颜色

background-image：设置元素背景图像

图片会默认放置在元素左上角，代码举例如下

background-repeat：设置属性如何平铺背景图像

repeat-x：只向水平方向平铺
repeat-y：只向垂直方向平铺
no-repeat：不平铺

background-size：设置背景图像的大小

length：背景图片的宽和高，两个值单位为px，若只设置第一个，第二个值auto
percentage：背景图片的宽和高，两个值单位百分比，若只设置第一个，第二个值auto
cover：保持图片纵横比例并将其完全覆盖容器（可能有裁剪）
contain：保持图片纵横比例并将其缩放成适合容器里的最大大小（可不占满容器）

background-position：设置背景图像的起始位置，默认值为0%，0%

left top	left center	left bottom
左上角	左中	左下
right top	right center	right bottom
右上角	右中	右下
center top	center center	center bottom
中上	中中	中下

x% y% 水平与垂直，默认0% 0%，左上角是0% 0%，右下角是100% 100%，若指定了一个值，其他值就默认为50%

xpos ypos 用具体的像素表示，单位是像素（使用率低）

15.文本属性

text-align：

left
center
right

text-decoration：

underline
overline
line-through 删除线

text-transform：

captialize 每个单词开头大写
uppercase 字母全部大写
lowercase 字母全部小写

text-indent：首行缩进，允许负值

16.表格属性

表格边框：

table, td{
    border:1px solid black;        #solid（实线）
}

折叠边框：border-collaspe

宽高：weight，height

文字对齐：text-align

表格填充：padding

表格颜色：background-color（背景颜色），color（文本颜色）

17.关系选择器

后代选择器：

选择所有被 E元素包含的 F元素，中间用空格隔开

E F{}

子代选择器：

选择所有作为 E元素的直接子元素F，对更深一层的元素不起作用，用 > 表示

E > F{}

相邻兄弟选择器：

选择紧跟 E元素后的第一个F元素，用 + 表示，只能向下选择

E + F{}

通用兄弟选择器：

选择E元素之后的所有兄弟元素F，作用于多个元素，用 ~ 隔开，只能向下选择

E~F{}

18.css盒子模型（box model）

所有 html 元素可以看作盒子，css盒子模型本质上是一个盒子，封装周围的html元素，包括

margin（外边距）浏览器默认上左边距有8px
border（边框）
padding（内边距）两个值：1上下 2左右
content（实际内容）

如果把这个盒子模型看作是一个生活中的快递，那么content等同于你买的实物，padding等同于快递盒子中的泡沫，border等同于快递盒子，margin等同于两个快递盒子之间的距离

19.弹性盒子模型

由弹性容器（Flex container）和弹性子元素（Flex item）组成

弹性容器通过设置display属性值为flex开启弹性盒

弹性盒子只定义了弹性子元素如何在其内布局

父元素上的属性：

display：flex 开启弹性盒，设置后子元素默认水平排列

flex-direction：row （水平摆放）| row-reverse | column（垂直摆放） | column-reverse

flex-direction为column时：

justify-content（垂直方向）： flex-start（居上） | flex-end （居下）| center（居中）

align-items（水平方向）：flex-start（居左） | flex-end （居右）| center（居中）

flex-direction为row时：

justify-content（水平方向）： flex-start（居上） | flex-end （居下）| center（居中）

align-items（垂直方向）：flex-start（居左） | flex-end （居右）| center（居中）

子元素上的属性：

flex（权重）：根据弹性盒子元素所设置的拓展因子作为比率来分配剩余空间，此时前面宽度失效

20.文档流问题（标准流）

高矮不齐，底边对齐
空格折叠
元素间隙

脱离文档流的方法：

浮动
固定定位
绝对定位

浮动：

float：left | right 浮动只有左右（横向摆放），没有上下，浮动后使元素脱离了文档流

当容器不足以横向摆放内容时，会在下一行摆放

浮动引出的问题：

会造成父元素高度塌陷
后续元素会受到影响

解决办法：

父元素设置高度
受影响的元素增加 clear 属性
overflow：hidden ，子元素还会出问题，所有需要子元素加clear
1. 父元素高度不固定时使用
2. ```
.container{
    overflow：hidden;
    clear：both;
}
```

伪对象方式

.container::after{
    content：'';
    display：block；
    clear：both
}                            # 三个都要加

这种情况下，父元素不能设置高度

定位：

position：

relative 相对定位
absolute 绝对定位设置n个就会多出n层
fixed 固定定位页面滚动，它不滚动

absolute 和 fixed 会脱离文档流，设置定位后可以使用四个属性进行调整：left | right | top | button

注意：设置定位之后，absolute 和 fixed 是相对于具有定位的父级元素进行位置调整，若父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

z-index：

它的值决定谁覆盖谁（大盖小）

21.动画

@keyframes

动画：@keyframes name{
    from | 0%{
        css样式
    }

    percent{
        css 样式
    }
    to | 100%{
        css 样式
    }
}


name 为动画名
可以添加多个百分号值

执行动画 animation