HTML + CSS + HTML5 + CSS3

My-Way.

于 2023-03-14 14:43:37 发布

阅读量5.3k

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/fivefiveopenway/article/details/129527453

版权

HTML

一、块元素 + 行内元素 + 行内块元素

1.块元素

display: block;

常见的块元素有：<h1> ~ <h6>、<p>、<div>、<ul>、<li>、<ol>等

特点：

1. 独占一行
2. 高度、宽度、外边距和内边距可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 里面可以放行内或者块级元素

2.行内元素

display: inline;

常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

特点：

1. 一行可以显示多个
2. 设置高宽都没有效果
3. 默认宽度就是它本身内容的宽度
4. 行内元素内只能写文本或者其他行内元素

3.行内块元素

display: inline-block;

<img />、<input />、<td>这些元素同时具有块元素和行内元素的特点。

特点：

1. 一行可以显示多个，不过中间有空白缝隙
2. 默认宽度就是它本身内容的宽度
3. 高度、行高、内外边距都可以进行控制

二、常用HTML元素

1.图像元素–img

<img srt='abc.jpg' alt='abc' title='abc' />

src：指定的是要显示的图像的 URL；

alt：指定当前无法显示图片的时候，要显示的替换文字；

title：指定将鼠标放到img上的时候，显示其名字。

2.超链接元素–a

<a href="https://www.baidu.com" target="_blank" title="baidu"> baidu</a>

href：指定要连接到的URL；当href的值是 #val 的时候，这个链接就是一个锚点链接，点击这个链接，就可以跳转到 id = val 的网页位置。

target：指定连接打开方式，例如"_blank"是在新窗口中打开链接，“_ self"是在当前窗口或标签页中打开链接（默认值),”_parent": 在当前窗口或标签页的父级窗口或框架中打开链接,“_top”：在当前窗口或标签页的顶层窗口中打开链接。

title：提示链接的信息，鼠标悬停的时候显示一条信息。

3.表单标签–input

<input type="text" name="username" placeholder="Enter your username">

type：指定输入控件的类型，type="password"：用于创建密码文本框。type="checkbox"：用于创建复选框。type="radio"：用于创建单选按钮。type="submit"：用于创建提交按钮。type="reset"：用于创建重置按钮。

name：指定输入控件的名称，复选框和单选按钮一般会设置同一个 name 值。

4.下拉列表–select

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

select 标签中通常包含 option标签，每个标签代码一个选择项。

value：属性指定了每一个选项的值，这些值将在提交给表单的时候同时发送到服务器。

name：指定下拉列表的名称，与表单数据一起发送到服务器。

size：指定下拉列表显示的行数。

multiple：指定是否允许用户选择多个选项。

5.多行文本框–textarea

<label for="comments">评论：</label>
<textarea id="comments" name="comments" rows="4" cols="50">请输入评论...</textarea>

id：指定了该文本框的标识符。

name：指定了该文本框的名称。

rows：指定文本框的行数。

cols：指定文本框的列数。

6.受控组件–label

<label for="username">Username:</label>
<input type="text" name="username" id="username">

<label>
  <input type="checkbox" name="remember_me">
  Remember me
</label>

for：当 for 指定了标签对应的表单控件的 ID。这使得用户在单击标签时候，可以聚焦到相应的表单控件。点击上面的Username就可以选中 id 为 username 的文本框。

当用 label 标签包裹整个表单的时候，例如上面的，当我点击 Remember me 就可以直接勾选到复选框。

7.表格标签–table

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

可以看上面的例子，

标签定义了一个表格，有两行和两列。 <tr> 标签定义了表格中的行，每行有两个单元格（列） <td>

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>2.99</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>1.99</td>
    </tr>
  </tbody>
</table>

表格中还可以包含表头（<th>）行，这些行通常位于表格的顶部。表头行的单元格通常用于描述表格中的数据列。另外可以使用<thead>和<tbody>分别包裹表格的表头和表格的数据部分，这样更加语义化。

8.列表标签

无序列表–ul li

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

有序列表–ol li
```
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>
```
list—style-type：可以修改有序列表的序号形式，取值例如：decimal（默认值）：十进制数字（1，2，3…）；lower-roman：小写罗马数字（i，ii，iii…）；lower-roman：小写罗马数字（i，ii，iii…）；lower-alpha：小写字母（a，b，c…）；upper-alpha：大写字母（A，B，C…）；none：不显示序号。

list-style-position：可以修改有序列表的序号位置，取值例如：inside：序号在列表项内部（默认值）；outside：序号在列表项外部。

自定义列表 dl dt dd

<dl>
  <dt>HTML</dt>
  <dd>用于创建网页的标记语言</dd>
  
  <dt>CSS</dt>
  <dd>用于设置网页的样式</dd>
  
  <dt>JavaScript</dt>
  <dd>用于为网页添加交互和动态效果的脚本语言</dd>
</dl>

每一个术语使用<dt>标签定义，对应的定义用<dd>标签定义。

CSS

一、选择器和优先级

1.选择器

标签选择器：直接书写标签名称。

类选择器：标签上可以设置 class 属性，在选择这个元素的时候，可以使用类选择器，就是利用 .classname。

id选择器：标签上可以设置 id 属性，在选择这个元素的时候，可以使用id选择器，就是利用 #id。

**通配符选择器：**利用 * 选择全部元素。

**后代选择器：**使用 “ ” 空格来连接两种非复合选择器。例如 div p{}；用空格选择的子元素 p 会选中 div 元素中所有的子元素 p。但是使用 “>” 来连接，例如 div > p{} 就是选择 div 元素内部的所有子元素 p 元素。

**属性选择器：**使用 [title] 选择所有具有 “title” 属性的元素。

**伪类选择器：**选择元素特有的特殊状态。例如 “:hover、:active、:focus、:visited、:nth-child()（根据元素在父元素中的位置来选择元素，可以根据指定的规则选取特定的元素）、:first-child、:last-child、:nth-of-type()（根据元素在父元素中的类型和位置来选择元素，可以选择特定类型的子元素）、:not()（选择不满足指定条件的元素）”

**相邻兄弟选择器：**使用 “+” 例如 div + p 选择与 div 元素相邻的第一个段落元素。

2.CSS引入方式

**内部样式表：**使用标签进行包裹的 css 代码。

**行内样式表：**直接写在标签上的 css 代码。利用 style = “”。

**外部样式表：**存在 css 文件。利用标签引入进来。

3.优先级

从高到低是：

!important声明 > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通用选择器

复合选择器的时候采用四元式：

[行内样式：ID选择器：类选择器、属性选择器、伪类选择器：元素选择器]。

行内样式的权重值是1000
每个 ID 选择器的权重值为 100。
每个类选择器、属性选择器、伪类选择器的权重值为 10。
每个元素选择器的权重值为 1。
通配符选择器、组合选择器和子选择器的权重值都是 0。
!important 声明的权重是无穷大。
又父元素继承得来的属性，权重值为 0。

二、常见 CSS 属性

1.字体属性–font

font-size：字体大小
font-family：字体类型，一般都是写多个，当写在靠前的字体用户没有的时候，会向后一个一个寻找。
font-weight：字体加粗
font-style：字体样式。italic 是斜体，normal不是斜体。
font：字体样式连写 font: italic bold 20px/1.5 ‘宋体’,‘黑体’,sans-serif;

2.文本属性–text

text-align：设置文本对齐方式，left、right、center、justify（两端对齐）
text-decoration：设置文本修饰效果，包括 underline（下划线）、overline（上划线）、line-through（删除线）和 none（无修饰）等。
text-indent：设置首行缩进，可以使用像素值、百分比或 em 值等单位。
text-transform：设置文本转换效果，包括 uppercase（大写）、lowercase（小写）和 capitalize（首字母大写）等。
line-height：设置行高，可以使用像素值、百分比或无单位的数字值。
letter-spacing：设置字符间距，可以使用像素值、百分比或 em 值等单位。
word-spacing：设置单词间距，可以使用像素值、百分比或 em 值等单位。
white-space：控制空白符的处理方式，包括 normal（合并连续的空白符）、pre（保留所有空白符）和 nowrap（不换行）等。
text-shadow：设置文本阴影效果，包括阴影颜色、水平偏移、垂直偏移和模糊半径等。
color：设置文本颜色。

3.背景样式–background

background-color：该属性设置元素的背景颜色。您可以指定颜色名称、十六进制值、RGB 值或 HSL 值。
background-image：该属性设置元素的背景图像。您可以指定图像文件的 URL，并可选择指定 background-repeat、background-position 和 background-size 属性。
background-repeat：该属性设置背景图像的重复方式。您可以指定值为 repeat、repeat-x、repeat-y 或 no-repeat。
background-position：该属性设置背景图像的位置。您可以指定值为 top left、center center 或 bottom right 等。
background-size：该属性设置背景图像的大小。您可以指定值为 auto、cover 或 contain 等。

三、盒子模型

1.组成

盒子由 content（内容） + padding（内边距） + border（边框） + margin（外边距）构成。

+-------------------------------------------+
|                       margin-top           |
|               +---------------------------+
|               |          border-top       |
|               |   +-------------------+   |
|               |   |       padding-top |   |
|               |   |   +---------------+   |
|               |   |   |     content   |   |
|               |   |   |               |   |
|               |   |   |               |   |
|               |   |   +---------------+   |
|               |   |       padding-bottom  |
|               |   +-----------------------+
|               |             border-bottom  |
|               +---------------------------+
|                       margin-bottom        |
+-------------------------------------------+

重点：

box-sizing 属性用来指定 css 盒子模型的模式。

当 box-sizing：content-box 此时是默认的取值，叫做标准盒。此时的盒子的宽度和高度只包括content，而不包括border、padding、margin。假设设置一个盒子的宽度为100px，此时border为2px，padding为10px，则该元素的实际宽度将为 124px （100px + 10px + 10px + 2px +2 px）

当 box-sizing：border-box 此时叫做怪异盒模型（弹性盒模型）。此时的盒子的宽度盒高度包括content、border、padding。而不包括 margin 。假设设置一个盒子的宽度为100px，此时border为2px，padding为10px，则该元素的实际宽度将为 10px

2.边框合并：

border-collapse: collapse;

3.外边距合并：

外边距合并发生在两个相邻的块级元素中间，只有垂直方向会发生外边距合并，（最终他们之间的外边距取它们之间的最大值为准）。不光会发生在相邻元素之间，父子元素之间也会发生，不过也是在垂直方向上发生。

4.避免外边距合并：

- 给相邻元素之间添加边框、填充或内容；
- 将其中一个元素设置为浮动或绝对定位；
- 将其中一个元素设置为 inline-block 或 inline 元素。

5.盒子阴影：

第一个参数：阴影的水平偏移量，可以为负值，必需。

第二个参数：阴影的垂直偏移量，可以为负值，必需。

第三个参数：阴影的模糊程度，可以为0，可选。

第四个参数：阴影的扩散程度，可以为0，可选。

第五个参数：阴影的颜色，可以为透明色，可选。

div {
  box-shadow: 2px 2px 4px 1px black;
}

当在所有参数去前面加入 inset 就可以给盒子加入内阴影。

div {
  box-shadow: inset 2px 2px 4px 1px black;
}

四、浮动

一般来说网页的常规布局有三种。常规流、浮动、定位。

一个浮动元素会脱离普通文档流。简称脱标。

通常会有左浮动和右浮动。

.box1 {
  float: left;
}

.box2 {
  float: right;
}

当一个元素浮动时，其宽度默认会自适应其内容，但是如果限制浮动元素的宽度，可以给它设置 width 属性来实现。

浮动会导致父元素高度坍塌

所以要清除浮动：

使用 clear: both 属性，将一个空元素插入到浮动元素的下方，并给该空元素设置 clear: both 属性。

<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="clear"></div>
</div>

.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}
.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}

使用伪元素 ::after，在父元素的最后一个子元素后面插入一个伪元素，并给该伪元素设置 clear: both 属性。例如：

<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

.float-left {
  float: left;
  width: 50%;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

使用 overflow: hidden 属性，给父元素设置 overflow: hidden 属性，使得父元素成为一个包含块。这种方法的缺点是，如果父元素的内容超出了父元素的高度，会被裁剪掉。例如：
```
<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

.float-left {
  float: left;
  width: 50%;
}

.parent {
  overflow: hidden;
}
```

五、定位

CSS 提供了四种基本的定位方式：static、relative、absolute 和 fixed。

position: static;：默认值，元素在文档中按照其在 HTML 中的位置进行排列。
position: relative;：相对定位，元素在文档中仍然占据原有的空间，但可以通过设置 top、right、bottom、left 等属性来调整元素的位置，元素位置的调整不影响其他元素的布局。
position: absolute;：绝对定位，元素在文档中不再占据原有的空间，而是相对于最近的已定位（非 position:static）的父元素或者文档的边界进行定位。可以通过设置 top、right、bottom、left 等属性来调整元素的位置，元素位置的调整会影响其他元素的布局。
position: fixed;：固定定位，元素相对于浏览器窗口进行定位，当页面滚动时，元素的位置不变。可以通过设置 top、right、bottom、left 等属性来调整元素的位置。

六、元素的显示与隐藏

1.display

display: none;

这个元素直接把其位置让出来了。不占用当前的位置了。

2.visibility

这个属性是用来控制元素在页面上的可见性，参考值：

“visible”：元素可见，默认值。
“hidden”：元素不可见，但仍然占据文档布局中的空间。
“collapse”：用于表格元素的行和列，表示它们不可见，且不占用空间。

3. overflow

这个属性用来控制元素内容部分的溢出处理，参考值：

“visible”: 默认值，内容可以溢出元素框之外。
“hidden”: 溢出内容将被裁剪掉，不可见。
“scroll”: 溢出内容将出现滚动条，可以通过滚动条查看隐藏的内容。
“auto”: 如果内容溢出，将出现滚动条，否则不会。

“overflow” 属性通常用于包含一些具有固定高度和宽度的元素，当内部内容超过元素的高度和宽度时，可以通过设置 “overflow” 属性来控制如何处理溢出的内容，以确保页面布局的稳定和一致性。

七、精灵图

通过设置 background-position 属性来设置图像的位置，并且设置 background-size 来设置显示大小（此处也可以使用 width 和 height 来设置图像宽度和大小）。

<div class="bird"></div>

.bird {
  width: 50px;
  height: 50px;
  background-image: url('bird_spritesheet.png');
  background-position: -50px 0;
}

HTML5

一、新增的标签

<header>：定义页面或区域的页眉。
<nav>：定义页面或区域的导航链接。
<section>：定义页面或区域的主要内容区域。
<article>：定义页面或区域的独立文章或内容块。
<aside>：定义页面或区域的侧边栏或附属内容。
<footer>：定义页面或区域的页脚。
<video>：定义视频。
<audio>：定义音频。
<canvas>：定义绘图区域。
<progress>：定义任务进度条。
<meter>：定义度量衡，比如温度、距离等。
<datalist>：定义输入框的预设值列表。
<output>：定义计算结果的输出值。
<details>：定义可折叠的细节内容。
<summary>：定义细节内容的摘要。
<mark>：定义需要高亮显示的文本。

二、音频标签–video

<video src="example.mp4" width="320" height="240" controls>
  Your browser does not support the video tag.
</video>

属性值：

src：指定视频文件的 URL。
width 和 height：设置视频的宽高。
controls：显示播放控件。
autoplay：自动播放视频。
loop：循环播放视频。
preload：指定浏览器在加载视频时的预处理方式，例如 “auto” 表示自动预处理，“none” 表示不预处理，等等。
当浏览器不支持 video 的时候，就会显示标签中间的文字。

三、视频标签–audio

<audio src="example.mp3" controls>
  Your browser does not support the audio tag.
</audio>

属性值：

src：指定音频文件的 URL。
controls：显示音频的播放控件。
autoplay：自动播放音频。
loop：循环播放音频。
preload：指定浏览器在加载音频时的预处理方式，例如 “auto” 表示自动预处理，“none” 表示不预处理，等等。
当浏览器不支持 audio 的时候，就会显示标签中间的文字。

四、HTML5 新增的 input 类型

color：用于选择颜色。
date：用于选择日期。
datetime-local：用于选择本地日期和时间。
email：用于输入电子邮件地址。
month：用于选择月份。
number：用于输入数字。
range：用于选择数值范围。
search：用于输入搜索关键词。
tel：用于输入电话号码。
time：用于选择时间。
url：用于输入 URL。
week：用于选择周数。

五、HTML5 新增的表单属性

autocomplete：用于开启或关闭表单自动完成功能。
autofocus：用于设置表单元素自动获取焦点。
form：用于指定表单元素所属的表单。
list：用于绑定一个输入框的预设选项列表。
min 和 max：用于设置输入框的最小值和最大值。
step：用于设置输入框的步进值。
placeholder：用于设置输入框的占位符。
required：用于设置表单元素为必填项。
pattern：用于设置表单元素的输入格式，可以是正则表达式。
multiple：用于允许用户选择多个文件，只适用于 <input type="file"> 类型的元素。

CSS3

一、CSS3 新增的属性选择器

[attribute]：选取带有指定属性的元素。
[attribute=value]：选取指定属性且属性值等于指定值的元素。
[attribute~=value]：选取指定属性且属性值包含指定词汇的元素。
[attribute^=value]：选取指定属性且属性值以指定值开头的元素。
[attribute$=value]：选取指定属性且属性值以指定值结尾的元素。
[attribute*=value]：选取指定属性且属性值包含指定值的元素。
[attribute| =value]：选取指定属性且属性值为指定值或以指定值开头且后面跟着一个连字符的元素。

二、CSS3 新增的选择器见上面 CSS 部分

三、CSS3 的盒子模型见上面 CSS 部分

四、CSS3 盒子模糊化处理（加滤镜）

.box{
	filter:blur(5px);
}

五、CSS3 过渡效果–transition

transition-property：指定需要过渡的 CSS 属性的名称，多个属性可以用逗号分隔。
transition-duration：指定过渡的持续时间，可以使用单位来表示，例如秒（s）或毫秒（ms）。
transition-timing-function：指定过渡的时间函数，可以控制变化速度，常用的函数有 linear、ease-in、ease-out 和 ease-in-out 等。
transition-delay：指定过渡的延迟时间，可以使用单位来表示，例如秒（s）或毫秒（ms）。

<div class="box">Hello World!</div>

.box {
  background-color: #ccc;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.box:hover {
  background-color: #f00;
}

将上述属性进行速写：

transition。它能够同时设置 transition-property、transition-duration、transition-timing-function 和 transition-delay 这几个属性。

.box {
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

六、媒体查询

媒体查询通常以 @media 规则的形式使用：

/* 当设备的宽度小于等于 768 像素时应用这些样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 当设备的宽度大于 768 像素时应用这些样式 */
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
}

七、flex 布局

display

定义一个 Flex 容器，使用 display: flex 可以使元素成为一个 Flex 容器，其中子元素会按照 Flex 布局排列。
```
.container {
  display: flex;
}
```

flex-direction

定义主轴方向。可选值有：row、row-reverse、column、column-reverse。

.container {
  flex-direction: row; /* 水平方向 */
  flex-direction: row-reverse; /* 水平方向反向 */
  flex-direction: column; /* 垂直方向 */
  flex-direction: column-reverse; /* 垂直方向反向 */
}

justify-content

定义主轴对齐方式。可选值有：flex-start、flex-end、center、space-between、space-around、space-evenly。

.container {
  justify-content: flex-start; /* 左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around; /* 每个项目两侧的间隔相等 */
  justify-content: space-evenly; /* 每个项目两侧的间隔和项目之间的间隔都相等 */
}

align-items

定义交叉轴对齐方式。可选值有：stretch、flex-start、flex-end、center和 baseline。

.container {
  align-items: stretch; /* 拉伸 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: center; /* 居中对齐 */
  align-items: baseline; /* 基线对齐 */
}