HTML5标签和CSS3属性分为两个阶段:先是文字总结,再是代码展示(提示:本文内容较多)
一.基础
1.标题标签: h1-h6
2.段落标签: <p></p>
3.强制换行标签: <br>
4.水平线标签: <hr>
5.文本格式化标签: ①加粗:<strong> ②倾斜<em>
6.图像标签: <img src="路径" alt="图片的替换文本" title="提示文本">
7.超链接: <a href="需要跳转的地址">链接的名字</a>
8.音频标签: <audio src="音频的地址"></audio>
9.视频标签: <video src="视频的地址"></video>
<head>
<!-- 1.标题标签: h1-h6 -->
<h1>标题</h1>
<h4>标题</h4>
<!-- 2.段落标签: <p></p> -->
<p>段落</p>
<!-- 3.强制换行标签: <br> -->
<br>
<!-- 4.水平线标签: <hr> -->
<hr>
<!-- 5.文本格式化标签: ①加粗:<strong> ②倾斜<em>-->
<p><strong>段落加粗</strong></p>
<p><em>段落倾斜</em></p>
<!-- 6.图像标签: <img src="路径" alt="图片的替换文本" title="提示文本"> -->
<img src="../cyj_picture/1.jpg" src="课本" title="提示这是课本">
<!-- 7.超链接: <a href="需要跳转的地址">链接的名字</a> -->
<a href="地址">超链接点击可以跳转</a>
<!-- 8.音频标签: <audio src="音频的地址"></audio> -->
<audio src="地址">播放音频</audio>
<!-- 9.视频标签: <video src="视频的地址"></video> -->
<video src="地址">播放视频</video>
</head>二.进阶
(一)列表、表格、表单、下拉菜单、文本域
1.无序列表: <ul>
<li>第一</li>
<li>第二</li>
</ul>
2.有序列表: <ol>
<li>第一</li>
<li>第二</li>
</ol>
3.定义列表:<dl>
<dt>列表的标题</dt>
<dd>列表的内容详情</dd>
</dl>
4.表格: <table>
<tr>
<th>表头:姓名</th>
<th>表头:职业</th>
</tr>
<tr>
<td>数据:张三</td>
<td>数据:程序员</td>
</tr>
</table>
5.表单 : <input type="不同的属性值代表不同的功能">
①文本框: <input type="text" placeholder="提示信息">
②密码框: <input type="password" placeholder="提示信息">
③单选框: <input type="radio" name="gender" checked> 男
<input type="radio" name="gender" checked> 女
④多选框: <input type="checkbox" checked>
⑤ 上传文件: <input type="file">
6.下拉菜单: <select>
<option>北京</option>
<option>上海</option>
<option selected>张家口</option>
</select>
7.文本域: <textarea>默认提示文字</textarea>
<!--1.无序列表: ul标签中只能包裹li标签,li标签里边可以包裹任何的内容-->
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<!--2.有序列表:-->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<!--3.定义列表: dl是定义列表,使用dt定义列表的标题,dd定义列表的数据-->
<dl>
<dt>列表标题</dt>
<dd>列表数据</dd>
</dl>
<!--4.表格:-->
<table>
<tr>
<th>职业</th>
<th>地址</th>
</tr>
<tr>
<td>学生</td>
<td>张家口</td>
</tr>
</table>
<!--5.表单 :-->
<!--①文本框: 添加 placeholder属性实现 输入框内有提示信息 -->
文本框: <input type="text" placeholder="请输入账号">
<!--②密码框: 添加 placeholder属性实现 密码框内有提示信息 -->
密码框: <input type="password" placeholder="请输入密码">
<!--③单选框: 添加name="gender" 实现两个单选框只能选择一个 ,使用checked默认选择一个,使用label可以实现扩大点击范围-->
单选框: <label><input type="radio" name="gender" checked> 男</label>
<input type="radio" name="gender"> 女
<!--④多选框:-->
多选框: <input type="checkbox">
<!--⑤ 上传文件: 默认是上传一个文件,加上multiple实现可以选择多个文件-->
上传文件: <input type="file" multiple>
<!--6.下拉菜单: 使用selected默认选中-->
地址:<select>
<option>北京</option>
<option>天津</option>
<option selected>张家口</option>
</select>
<!--7.文本域:-->
<textarea>默认提示文字:请输入您的想法</textarea>(二)文字控制属性、背景属性、显示模式
1.文字控制属性
文字大小: font-size
字体粗细: font-weight
行高: line-height
文本缩进: text-indent
文本对齐: text-align
文本修饰线: text-decoration
2.背景属性
背景色: background-color
背景图: background-image
背景图平铺方式: background-repeat
背景图位置: background-position
背景图缩放: background-size
背景图固定: background-attachment
背景复合属性: background
3.显示模式
①.块级元素: display:block
块级元素常用的标签:
<div>- 通用的容器元素，用于分组其他元素。<p>- 段落元素。<h1>至<h6>- 标题元素，从最重要的标题<h1>到最次要的标题<h6>。<ul>和<ol>- 无序列表和有序列表的容器。<li>- 列表项，通常作为<ul>或<ol>的子元素使用。<table>- 表格容器。<tr>- 表格中的行。<th>和<td>- 表格中的表头单元格和数据单元格。<form>- 表单容器。<fieldset>- 分组表单控件。<legend>- 为<fieldset>提供标题。<address>- 定义联系信息。<article>- 文章或独立的内容块。<aside>- 与主内容相关的辅助信息。<footer>- 页面或区块的底部信息。<header>- 页面或区块的顶部信息。<nav>- 导航链接的容器。<section>- 文档中的章节或主题区域。<main>- 文档的主要内容。<figure>- 图片或其他媒体内容的容器。<figcaption>- 描述<figure>中的内容。<blockquote>- 较长的引用内容。<pre>- 预格式化文本，保持空格和换行。<hr>- 水平线，虽然<hr>是一个空元素，但在某些浏览器中会默认显示为块级元素。<dl>- 定义列表容器。<dt>和<dd>- 定义列表中的术语和描述项
②.行内元素: display:inline
行内元素常用的标签:
<a>- 用于创建超链接。<span>- 通用的内联容器元素，用于对文本的一部分应用样式或脚本。<img>- 图像元素。<input>- 表单输入字段。<label>- 与<input>元素关联的标签。<button>- 表单按钮。<select>- 下拉列表。<textarea>- 多行文本输入字段。<abbr>- 缩写词。<b>- 加粗文本。<small>- 减小文本大小。<cite>- 引用作品的名称。<q>- 短引用。<dfn>- 定义术语。<kbd>- 用户输入（键盘输入）。<code>- 计算机代码片段。<samp>- 输出样本。<var>- 变量名。<pre>- 预格式化文本，虽然<pre>是一个块级元素，但它的内容通常是内联的。<br>- 行内换行。<map>- 与<area>元素结合使用的图像映射。<object>- 嵌入对象。<param>- 与<object>元素一起使用，定义参数。<sub>- 下标。<sup>- 上标。<strong>- 强调文本的重要性。<em>- 强调文本的意义。<del>- 删除的文本。<ins>- 插入的文本。<mark>- 标记或高亮文本。<ruby>- 用于注音，如拼音或假名读音。<rt>- 与<ruby>元素结合使用，表示注音。<rp>- 与<ruby>元素结合使用，表示注音的括号。<u>- 下划线文本。<time>- 表示日期和/或时间。<data>- 与数据相关的文本。<bdo>- 控制文本的方向。<wbr>- 可选的换行机会。
③.行内块元素: display:inline-block
<style>
/* 1.文字控制属性*/
.box p{
/*文字大小: font-size 谷歌浏览器默认字号是16px*/
font-size: 19px;
/*字体粗细: font-weight 正常的数据是400,加粗的属性是700*/
font-weight: 700;
/*行高: line-height*/
line-height: 19px;
/*文本缩进: text-indent 属性值有两种,除了初数字+px,还可以使用数字+em,1em=一个字号的大小*/
/*text-indent: 20px;*/
text-indent: 2em;
/*文本对齐: text-align
居中: center ,左对齐(默认): left, 右对齐: right*/
text-align:center;
/*文本修饰线: text-decoration:
属性值 无线:none,下划线:underline,删除线: line-through*/
text-decoration: underline;
}
.backgroundBox{
width: 200px;
height: 200px;
/*1.背景色: background-color*/
background-color: #608dd9;
/*2.背景图: background-image 默认的有平铺的效果*/
background-image: url("图片的地址");
/*3.背景图平铺方式: background-repeat
属性值-> 不平铺:no-repeat,平铺(默认): repeat,水平方向平铺:repeat-x,垂直方向平铺:repeat-y*/
background-repeat: no-repeat;
/*4.背景图位置: background-position
属性值-> 居中:center,左侧:left,右侧:right,顶部:top,底部:bottom
如果只写一个方向,另一个方向默认是 居中的*/
background-position: 50px center;
/*5.背景图缩放: background-size
属性值-> cover: 等比例缩放图片以完全覆盖背景区,图片一部分可能看不见
contain: 等比例缩放图片让图片完全装入背景区,但是可能会出现部分空白页面
百分比：根据盒子尺寸计算图片大小*/
background-size: cover;
/*6.背景图固定: background-attachment 实现背景不会随着内容滚动*/
background-attachment: fixed;
/*7.背景复合属性: background
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）*/
/*background: pink url(图片地址) no-repeat right center/cover;*/
}
/*转换显示模式*/
/*1.块级: 使元素以块级元素的方式显示，每个块级元素独占一行*/
.block {
display: block;
}
/*2.行内: 使元素以内联元素的方式显示，多个内联元素可以在同一行显示。*/
.inline {
display: inline;
}
/*3.行内块: 类似于 inline，但允许设置宽度和高度。*/
.inline-block {
display: inline-block;
}
</style>
<body>
<div class="box">
<p>测试数据,测试数据,测试数据1</p>
<p>测试数据,测试数据,测试数据2</p>
</div>
<div class="backgroundBox">
<p>111</p>
</div>
</body>(三)选择器、盒子模型
1.选择器
①基础选择器
1-1.标签选择器: 使用标签名作为选择器,所有这类标签都会是一个样式
p{
color:red;
}
则所有的p标签的颜色都是红色
1-2.类选择器:查找标签,差异化设置标签的效果
类名可以自定义
.box{
background-color:red;
}
使用类选择器是:class="类名",使用上边的例子就是<div class="box"></div>
1-3.id选择器:也是自定义ID名
#redBox{
color:red;
}
使用id选择器: id="id名",使用上边的例子就是<div id="red">
注意:用一个ID选择器在一个页面上只能使用一次!
1-4.通配符选择器:查询页面所有的标签,全部设置相同的属性
使用:
*{
color:red;
}
开发一般使用通配符选择器用来清除所有标签的默认样式!
*{
margin: 0;
padding: 0;
}
2.盒子模型(重要)
盒子模型-内容区域:width & height
①盒子模型-边框线: border(内容与盒子之间)
属性值: 边框线粗细 线条样式 颜色
常用的线条样式: solid 实线,dashed 虚线,dotted 点线
div{
border: 5px solid brown
}
因为一个盒子有四条边,所以也可以设置单方向的边框线
属性名: 边框线粗细 线条样式 颜色
div{
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orande;
}
②盒子模型-内边距: padding
属性名: padding /padding-方向名词
如何只设置一个方向,则四个方向的内边距一致,也可以设置单个方向的内边距
div{
padding: 30px
设置 单个方向的
padding-top: 10px;
padding-right: 20px;
padding-height: 30px;
padding-bottom: 40px;
}
③盒子模型-外边距: margin(盒子外边)
作用: 拉开两个盒子之间的距离
属性名: margin
与padding 属性值的写法一样,含义也是一样的
可以实现版心居中的效果:
div{
/*上下边距是0,左右为 auto*/
margin: 0 auto;
}
④盒子模型-元素溢出
作用:控制溢出元素内容的显示方式
属性名: overfiow
属性值: hidden 把溢出的内容隐藏
scroll 溢出的内容滚动,无论是否溢出都会出现滚动条
auto 溢出的内容滚动,但是只有内容溢出的时候才会有滚动条
div{
overfiow: hidden;
overfiow: scroll;
overfiow: auto;
}
⑤盒子模型-圆角
作用:设置元素的外边距为圆角
属性名: border-radius
属性值: 数字+px / 百分比
提示: 属性值是圆角半径
div{
border-radius: 10px;
}
⑥盒子模型-阴影
作用:给元素设置阴影效果
属性名: box-shadow
属性值: x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
div{
box-shadow: 2px 5px 10px 0 rgba(0,0,0,0.5) inset
}
注意: 默认是外阴影,内阴影就是添加了 inset
<!--盒子模型-->
<style>
.box {
/*1.设置边框线 宽度5px,实线,红色*/
border: 5px solid brown;
width: 200px;
height: 200px;
background-color: #5a7bc5;
}
.boxPadding{
/*2.设置内边距*/
padding: 30px;
width: 200px;
height: 200px;
background-color: #5a7bc5;
}
.boxMargin{
/*3.设置外边距 向下5px,并实现版心居中的效果*/
margin: 5px auto;
width: 200px;
height: 200px;
background-color: #5a7bc5;
}
.boxStyle{
/*4.设置圆角 为正圆的形状 就是设置宽高的一半 /或者直接写50%*/
/*border-radius: 100px;*/
/*border-radius: 50%;*/
/*.设置圆角 为胶囊的形状 属性值就写 盒子高度的一半*/
border-radius: 50px;
/*5.设置阴影*/
box-shadow: 2px 5px 10px 0 rgba(0,0,0,0.5) inset;
width: 200px;
height: 100px;
background-color: #5a7bc5;
}
</style>
</head>
<body>
<div class="box">盒子边框线</div>
<div class="boxPadding">盒子内边距</div>
<div class="boxMargin">盒子外边距</div>
<div class="boxStyle">盒子圆角和阴影</div>
</body>(四)标准流、浮动、Flex布局
1.标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则 ，例如：块元素独占一行，行内元素可以一行显示多个。 作用: 可以让元素按照文档的顺序排序,不用使用原来的规则常用的技术就是浮动和 Flex 改变原来的布局
2.浮动(了解)
作用: 让块级元素水平排列
属性名: float
属性值: left 左对齐, right 右对齐,none 默认元素不浮动
特点:
• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标，不占用标准流的位置
div{
flaot: left;
}
3.Flex布局(重要)
介绍: Flex布局是浏览器提倡的布局的方式,不会产生浮动布局中投标的现象!
使用:设置为FLex布局: 给父级元素设置 display: flex,子元素就可以自由的拉伸
组成部分: 弹性容器,弹性盒子,主轴,侧轴
fiex布局:
①创建flex布局: display: flex;
②主轴对齐方式: justify-content
属性值: justify-content: flex-start; 默认值,弹性盒子从起点开发依次排列
justify-content: flex-end; 弹性盒子从中终点开始依次排列
justify-content: center; 弹性盒子沿着主轴居中排序
justify-content: space-bettween; 在主轴均匀排序,空白间距均分在盒子之间
justify-content: space-around; 在主轴均匀排序,空白间距均分在盒子两侧
justify-content: space-evenly; 在主轴均匀排序,弹性盒子和容器之间间距相等
③侧轴对齐方式: align-items 对所有的弹性盒子侧轴生效(给弹性容器设置)
属性值: align-items: stretch; 沿着侧轴拉伸破满整个容器
align-items: center; 沿着侧轴居中排序
align-items: flex-start; 从起点开发排序
align-items: flex-end; 从终点开发排序
④使用algin-self 可以单独控制某个盒子的侧轴对齐方式(给弹性盒子设置)
⑤修改主轴的方向:
主轴默认的话就是在x轴上,水平方向,侧轴默认是y轴在垂直的方向
属性名:flex-direction
常用属性值: flex-direction:column 垂直方向,从上向下
⑥弹性伸缩比: flex
作用:控制弹性盒子的主轴方向的尺寸
⑦弹性盒子换行:flex-wrap
作用: 弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性值:wrap 换行,nowrap默认不换行
⑧行对齐方式
属性名:align-content
属性名:align-content: flex-start; 默认值,弹性盒子从起点开始依次排序
align-content: flex-end; 从终点开发依次排序
align-content: center; 居中排序
align-content: spance-between; 弹性盒子在主轴均匀排序,空白间距均分在盒子之间
align-content: spance-around; 弹性盒子在主轴均匀排序,空白间距均分在盒子两侧
align-content: spance-evenly; 弹性盒子在主轴均匀排序, 弹性盒子和容器之间间距相等
(五)总结 Flex布局
1.Flexbox 的基本概念：
- Flex 容器（Flex Container）：启用 Flexbox 布局的父元素。
- Flex 项目（Flex Items）：Flex 容器内的子元素。
2.Flexbox 的主要属性：
Flex 容器的属性：
display: flex;或display: inline-flex;：定义一个 Flex 容器。flex-direction：定义主轴的方向。justify-content：定义主轴上的项目对齐方式。align-items：定义交叉轴上的项目对齐方式。align-content：定义多行 Flex 容器的对齐方式。flex-wrap：定义项目是否应该换行。
Flex 项目的属性：
order：定义项目的排序顺序。flex-grow：定义项目在主轴上的扩展比例。flex-shrink：定义项目在主轴上的收缩比例。flex-basis：定义项目的初始大小。flex：组合flex-grow,flex-shrink和flex-basis的简写形式。align-self：定义单个项目在交叉轴上的对齐方式。
实例代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 示例</title>
<style>
.container {
display: flex; /* 启用 Flexbox 布局 */
justify-content: space-between; /* 主轴上均匀分布项目 */
align-items: center; /* 交叉轴上居中对齐项目 */
background-color: #f0f0f0;
padding: 10px;
height: 200px; /* 固定高度 */
}
.item {
width: 100px;
height: 50px;
background-color: #c0c0c0;
margin: 5px;
flex: 1 1 auto; /* 简写形式，定义项目的扩展、收缩和初始大小 */
}
.item-first {
order: 3; /* 改变项目的排序顺序 */
}
.item-second {
flex-grow: 2; /* 扩展比例 */
align-self: flex-start; /* 单独改变交叉轴对齐方式 */
}
.item-third {
flex-shrink: 2; /* 收缩比例 */
align-self: flex-end; /* 单独改变交叉轴对齐方式 */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-first"></div>
<div class="item item-second"></div>
<div class="item item-third"></div>
</div>
</body>
</html>有问题请大家直接评论指出,谢谢!
