HTML+CSS 个人学习时的笔记，粗略参考【HTML】

HTML基础

学习html和css做多详细多漂亮的笔记都没用，多查表，多敲多练才能学得扎实。自学的时候便做好了笔记，一直放着，想着这里好久没写了，拿出来修整了一下发篇博客，粗略分享🤷‍♀️

0. <!DOCTYPE>结构

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

lang 语言种类

用来定义当前文档显示的语言。

1. en定义语言为英语
2. zh-CN定义语言为中文

这个属性对浏览器和搜索引擎还是有用处的，比如自动弹出是否翻译。

字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内，可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset=" UTF-8" />

1. 块元素、行内元素、行内块元素

块元素

常见 <h1~h6>、<p>、<div>、<ul>、<ol>、<li>

<div>是最典型的块元素

特点：

• 自己独占一行
• 框尺寸可调
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面放行内或块级元素

PS： 文字类的元素（<p>、<h1~h6>）不能使用块级元素

行内元素

常见 <a>、<strong>、<b>、<em>、<i>、<u>

<span>是最典型的行内元素

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高宽直接设置无效
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

元素显示模式总结

元素样式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器里可以包含任务标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	内容本身撑起	容纳文本或者其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	内容本身撑起

转换

在css里面

转换为块元素 ： display: block;

转换为行内元素： display: inline;

转换为行内块：display: inline-block;

2. 图片

插入图片

<img src="" alt="">

alt属性

用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

背景图片

在style里面加：

div {
   
    width: 900px;
    height: 900px;
    background-image: url("..");
    background-repeat: 
}

background-repeat 设置图片在盒子内平铺的方向

值	描述
repeat