HTML5基础
HTML5简介
是一种超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML不是一种编程语言
基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
显示框LOGO
< link rel=“icon” type=" image/x-ico" href=" ./img/2.ico" />
标签
- 块级标签：会自动换行，可以设置宽高 display：inline（p div h1-h6）
- 行级标签：不会自动换行，不能设置宽高，是自身宽高 display：block（span b i mark）
- 行内块：不会自动换行，可以设置宽高 display：inline-block（img video）
display决定了标签的块级或行级特点
基础标签
| 标签 | 作用 |
|---|---|
| b | 加粗 |
| i | 倾斜 |
| h1-h6 | 标题从大到小 |
| p | 段落 |
| br | 换行 |
| hr | 分割线/水平线 |
| sub、sup | 下标、上标 |
| del | 删除线 |
| ins | 下划线 |
| abbr title | 缩写 |
| mark | 标记 |
| span | 文本 |
| font | 字体 |
常用标签
| 标签 | 属性 |
|---|---|
| < img>图片 | src 引用图片地址；alt 替换文本；title 提示信息；width 宽；height 高 |
| < a href=“”>链接 | href 地址；target 目标位置；target_blank(new) 新窗口打开； target_top 顶级窗口打开 |
| < marquee>滚动 | direction：方向；behavior：方式(scroll、slide、alternate)；scrollamount：速度； scrolldelay：时间；οnmοuseοver=“stop()” ：鼠标悬浮停止移动；οnmοuseοut=“start()”：鼠标离开开始移动 |
| < hr />水平线/分割线 | width：长度；align：水平位置(left、center、right)；color：颜色；size：粗细(px) |
| div块 |
HTML媒体
- 音频：audio
< audio src=“寻水的鱼%20许飞.mp3” controls>歌曲< /audio>
- 视频：video
< video src=“./薛之谦%20-%20彩券.mp4” controls>< /video>
标签实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签</title>
<link rel="icon" type=" image/x-ico" href=" ./img/2.ico" />
</head>
<body>
<!--回到顶部-->
<a id="top">
<!--基础标签-->
<b>加粗</b><br />
<i>倾斜</i>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>无论哪一行，都需要职业的技能。天才总应该伴随着那种导向一个目标的有头脑的不间断的练习，没有这一点，甚至连最幸运的才能，也会无影无踪地消失。 -- 德拉克罗瓦</p>
<hr width="500px" size="8" color="aqua" align="left"/>
log<sub>n</sub> = x<sup>2</sup>+1<br />
<del>删除线</del><br />
<ins>下划线</ins><br />
<mark>标记</mark><br />
<abbr title="部门">欣知十九部</abbr><br />
<!--常用标签-->
<img src="./img/2.png" alt="前端" width="300px" height="200px" /><br />
<a href="http://www.baidu.com">百度一下</a><br />
<a href="http://www.baidu.com" target=" _blank">百度一下</a><br />
<a href="./class.html">打开另一个页面</a><br />
<a href="./img/2.png">打开图片</a><br />
<a href="javascript:alert('111111')">提示框</a><br>
<a href="#top">回到顶部</a>
<marquee behavior="alternate" direction="left" scrollamount="20px" scrolldelay="50">范树琛大聪明</marquee>
<!--媒体-->
<audio src="寻水的鱼%20许飞.mp3" controls>歌曲</audio>
<video src="./薛之谦%20-%20彩券.mp4" controls></video>
</body>
</html>
表
列表
HTML 支持有序、无序和定义列表
有序列表
< ol type=“序号类型” start=“起始序号” reversed（倒序）>
< li>内容</ li>
< /ol>
无序列表
< ul type:序号样式(disc 实心圆 circle心圆 square实心方框)>
< li>内容< /li>
< /ul>
自定义列表
< dl>
< dt>主内容< /dt>
< dd> 分内容</ dd>
</ dl>
表格
< table border=“1px”>
< tr>
< td>< td>
< tr>
</ table>
表标题：< caption>
表头：< th>< /th>
跨行：< th rowspan=“2”>
跨列：< th colspan=“2”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" style="width: 800px; height: 900px;" align="center">
<tr>
<td colspan="2">
<a href="gerenjieshao.html">个人介绍</a>
<a href="https://toutiao.china.com/s_lenovo/lxtbtj/13004463/20230801/45246607.html">新闻资讯</a>
<a href="">就业团队</a>
<a href="">技术支持</a>
<a href="">专业售后</a>
<a href="">线上客服</a>
</td>
</tr>
<tr>
<td style=" background-size:100% 100%; background-image: url(img/小黄人1.png);" width="500px" height="250px"></td>
<td>
<form action="">
<br />
<lable for="user">邮箱:</lable><input type="text" name="" id="user"/><br />
<lable for="paw">密码:</lable><input type="password" name="" id="paw"><br />
<br />
性别：<input type="radio" name="1" id=""/>女
<input type="radio" name="1" id="">男 <br>
爱好：<input type="checkbox" name="hobby" id="">敲代码
<input type="checkbox" name="hobby" id="">读书
<input type="checkbox" name="hobby" id="">打游戏 <br>
<br />
所在部门：<select name="" id="">
<option value="">开发十九部</option>
<option value="">开发二十部</option>
<option value="">开发二十一部</option>
</select><br />
<br />
<button>重置</button>
<input type="submit" value="发送" />
<br />
</td>
</tr>
<tr>
<td colspan="2">
<span>1、html的定义
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
2、html的特点：
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</span>
</td>
</tr>
<tr>
<td colspan="2" style="background-image: url(img/小黄人2.png);" width="200" height="300"></td>
</tr>
<tr>
<td>版权信息：本网站归欣知大数据所有 团队: 前端开发19部 <br />联系方式: 123456789</td>
<td style="background-size:50% 100%; background-repeat: no-repeat; background-image: url(img/dcaa1d90640a81626d2814ceefa3b9e.jpg);" width="200" height="100"></td>
</tr>
</table>
</body>
</html>
表单
< from>里面是表单元素< from>
单选
<input type="radio" name="1" id=""/>女
<input type="radio" name="1" id="">男 <br>
复选
<input type="checkbox" name="hobby" id="">敲代码
<input type="checkbox" name="hobby" id="">读书
<input type="checkbox" name="hobby" id="">打游戏
按钮
<button>重置</button>
<input type="submit" value="发送" />
下拉选框
所在部门：<select name="" id="">
<option value="">开发十九部</option>
<option value="">开发二十部</option>
<option value="">开发二十一部</option>
</select>
框架
整合框架
< frameset>< /frameset>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset cols="30%,*">
<frame src="0801(2).html" /></frame>
<frame src="0801(4).html" /></frame>
</frameset>
<body>
</body>
</html>
内联框架
< iframe>< /iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe width="1200" height="1000" name="myhtml"></iframe>
</body>
</html>
CSS基础
CSS层叠样式表
- 写法一 内联样式 Style（样式）
- 写法二 内部样式 Style（标签）
- 写法三 外部样式
< link rel=“stylesheet” href=" ">
@import url(’ ');
- 引用外部样式表的方法Link和@import的区别
| @import | Link | |
|---|---|---|
| 从属关系区别 | 是CSS提供的语法规则，只有带入样式表的作用 | 是HTML提供的标签，不仅可以加载CSS文件，还可以定义链接属性 |
| 加载顺序区别 | 加载页面时，@import引入的样式表在页面加载完毕后被加载 | 同时加载 |
优先级
- 就近原则
- 内部样式与外部样式优先级相同，设置同样样式，后写的样式优先级更高
- 单一样式优先级 style>id>class>tag>*>继承
层叠 冲突 继承
- 层叠：同一个元素使用了不同的样式表，所有的样式进行叠加
- 冲突：同一元素设置相同的属性会造成冲突，遵循就近原则选择属性值
- 继承：在子父关系中，文本样式可以被继承，布局样式不可以被继承（块及元素继承父的宽，行级不可以）
颜色表示
- 英文单词
- 十六进制
- rgb (0-255,0-255,0-255)
- rgba(0-255,0-255,0-255,0-1)
选择器
全局选择器
{
margin: 0;
padding: 0;
}
标签选择器
< p>< b>
类选择器
.class
id选择器
#id
群组选择器
a,b
层次选择器
- 后代选择器（空格）
- 子代选择器（>）
ps:父子关系必须是上下级关系紧挨在一起
- 相邻兄弟（+）
- 通用兄弟（~）
伪类选择器
- link 默认
- visited 被访问之后的状态
- hover 鼠标浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 全局选择器 */
/* *{
margin: 0;
padding: 0;
} */
/* class选择器 */
/* .q{background-color: pink;} */
/* id */
/* #q{background-color: skyblue;} */
/* 群组选择器 */
/* a,b{ background-color: red;} */
/* 子代选择器 */
/* ul>li{background-color: chocolate;} */
/* 后代选择器 */
/* .cc li{list-style: url(img/1688.PNG)} */
/* 相邻兄弟 */
/* .ff+b{background-color: darkmagenta;} */
/* 通用兄弟 */
/* .cc>li~a{background-color: darkgreen;} */
/* 伪类 */
b+a:link{ background-color: aqua; }
b+a:visited{ background-color: red;}
b+a:hover{background-color: blueviolet;}
b+a:active{background-color: orange;}
/* 结构伪类 */
ul li:nth-child(2){background-color: chartreuse;}
a:nth-child(3){background-color: deeppink;}
</style>
</head>
<body>
<b>欣知大数据</b>
<a href="">333</a>
<a href="#">开发十九部</a>
<ul class="cc">
<li>
<ul>
<li>000000</li>
</ul>
</li>
<li class="q">1</li>
<li>1</li>
<li class="q">1</li>
<li>1</li>
<li>1</li>
<li id="q">1</li>
<a href="">欣知数据1111</a>
<p>77777777</p>
</ul>
</body>
< /html>
CSS样式
文字样式
- font-size: 30px; 文字大小
- font-weight: bold;文字加粗
- font-style: italic; 文字倾斜
- font-family: “宋体”; 字体
- font-variant: small-caps;小型大写字母
- @font-varient；自定义引入字体
@font-face {
font-family: sun;
src: url(./Wesley__.ttf);
}
文本样式
- text-shadow（水平方向位移，竖直方向上位移，模糊度，颜色）；文本阴影
- color:red; 设置文本颜色
- text-decoration: none; 去线
- text-decoration:underline line-through;叠加线
- text-transform: capitalize;首字母大写
- text-indent: 2em; 文本缩进2个字符 应用于p段落标签上
- text-align: center; 文本居中
- line-height: 100px; 文本行高，一般用来做竖直位置上剧中效果
- word-wrap: break-word; 文本换行
- white-space: nowrap; 文本不换行
背景样式
- background-color: aquamarine; 背景颜色
- background-image: url(路径);背景照片
- background-repeat: no-repeat;背景不重复
- background-position:center;背景定位
- background-size: cover/100%; 背景覆盖完全，照片可能不完全展示。
contain照片宽或高一边完全覆盖，图片展示完全。 - background-attachment: fixed;背景固定
- background-origin:content-box; 背景盒模型定位默认从padding开始定位。
- background-clip: content-box; 背景裁剪
边框样式
border：线宽，线样式，颜色;
信纸效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./class0803.css" />
</head>
<body>
<div class="a">
<p>
爱因斯坦说，兴趣是最好的老师。莎士比亚也说学问必须合乎自己的兴趣，方可得益，这些都在强调兴趣在学生学习中的重要性。
很多学生对写作没有兴趣，写作时东拼西凑，导致内容空洞、词语堆砌，难以写出好的作文来。激发和培养学生的写作兴趣，
是提高学生写作水平的关键。学生只有产生了浓厚的兴趣，才能真正走进写作的世界，才能写出优秀的作文来。
要让学生认识到写作不能凭空想象，而要与现实生活紧密相连。叶圣陶先生曾说过: “作文这件事离不开生活，
生活充实到什么程度，才会作出什么样的文字，否则就会陷入不切实际的唯技巧论，对认真练习写作是有妨碍的。”
写作不竭的源泉就是来自生活，在平时的教学中要我们要让学生认识到写作来源于生活，只有细心观察生活，作生活的有心人，
留心观察身边的人或物，认识到写作就是表述自己内心的真情实感。
</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.a{
width: 600px;
height: 800px;
border: 20px ridge rgba(255,70,0,0.5);
background-image: url(img/sc16.png),url(img/sc17.png),url(img/sc5.png),url(img/sc18.png);
background-repeat: no-repeat,no-repeat,repeat,repeat;
background-position:left top ,bottom right,center,center;
background-size: 30%,25%,35%,100%;
background-origin: border-box,border-box,padding-box,border-box;
padding: 35px;
background-clip: border-box,border-box,content-box,border-box;
}
p{
font-size: 18px;
padding: 3em;
line-height: 34px;
text-indent: 2em;
}
效果图
CSS模型与浮动
CSS模型
- 元素尺寸
- height：元素高度
- width：宽度
- padding:元素页边距
- border：元素边框
- margin：元素外边框
- 外边距的合并
- 怪异盒子模型
- 盒子的宽度=内容的宽+border+padding
box-sizing: border-box;
1个参数代表上下左右的数据
2个参数 第一个代表上下，第二个代表左右
3个参数 第一个代表上 第二个代表左右 第三个参数代表下的数据
4个参数 代表上–右–下–左
CSS其他属性
- opacity
<style>
/*设置div背景颜色和宽度*/
width: 700px;
height: 50px;
background-color: lightblue;
text-align: center;
/*p的字体颜色设置不透明度*/
.box0 p {
color: black;
width:800px;
height: 40px;
line-height:40px;
opacity: 0.3;
/opacity 属性能够设置0.0~1.0*/
< /style>
</ head>
< body>
< div class="box0">
< p>真是漂亮他妈给漂亮开门，请接下一句?< /p>< /div>
< /body>
display
- display-none：隐藏
- display-blank：前面有隐藏变为显示
- cursor：pointer：鼠标移动到指定位置发生改变
溢出
- overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。
- hiden：溢出隐藏
- croll：溢出滚动
- auto：溢出自动加滚动
浮动
- 文档流：代表元素的布局宽高背景颜色等等
- 文本流：包含文字元素内容
浮动有两种 - 左浮float：left；不脱离文本流脱离文档流
- 右浮float：right；完全脱离
定位
三种定位机制
- 普通流（上左右下）
- 浮动
- 绝对定位
默认定位
static
相对定位
position:static
既不脱离文档流，也不脱离文本流
- 无偏移量时，原来位置不变
- 根据原来自身位置定位
绝对定位
position:absolute
既脱离文档流，也脱离文本流
- 绝对定位父级没定位根据窗口定位
- 绝对定位父级有定位根据父级定位
固定定位
position:fixed
既脱离文档流，也脱离文本流
固定定位永远根据窗口定位
粘性定位
position:sticky
当没达到偏移量时是相对定位，达到偏移量时是固定定位
使用条件：
- 父元素不能 overflow:hidden 或者 overflow:auto 属性。
- 必须指定 top、bottom、left、right4 个值之一，否则只会处于相对定位
- 父元素的高度不能低于 sticky 元素的高度
- sticky 元素仅在其父元素内生效
z-index可以设置元素的堆叠顺序
渐变、动画
渐变
线性渐变
- background-image()：linear-gradient（颜色1，颜色2）
- 渐变方向默认从上到下
- 改变渐变方向从左到右：to right
- 左上到右下：to right bottom
- 改变角度：数值deg
- 重复性渐变：background：radial-gradiend
径向渐变
- background：radial-gradient
- background: radial-gradient
- background: radial-gradient(circle,red ,blue, orange）（正圆）
- background: radial-gradient( circle at top,red ,blue,orange)（圆心在顶部）
- background: repeatingfradial-gradient( circle 50px,red ,orange（重复）
动画 2D变形
- 移动：transform-translate
- 过渡：transition
- 缩放：transform：scale
- 旋转：transform：rotate
transform：origin（改变基点） - 倾斜：transform：skew
动画效果-关键帧
CSS3 动画届性
@keyframes 设定动画规则
可以近似理解为动画的剧本
name 必需:
定义动画的名称
0-100%/from…to… 必需
动画时长的百分比
需要变化的 CSS 样式属性。
布局 弹性布局
表格布局
display：table-ceil
浮动
对自身的影响：脱离文档流，使元素独立起来并可以设置宽高
对兄弟元素的影响：改变兄弟布局
对父容器：造成坍塌
定位
固定布局：使用标准px单位
流式布局：使用百分比%
多列布局
弹性布局
- display：flex
默认主轴方向是x轴，起始线是左边
- flex-direction
改变主轴方向，row x为主轴，colum y为主轴
flex-direction：row-reverse x为主轴，起始线从右开始
flex-direction：colum-reverse y为主轴，起始线从下开始
- flex-wap:wap
默认nowap不换行，子元素在父元素中换行
- flex-flow
以上两种的综合属性
- justify-content
设置子元素在父容器中主轴的排列位置
justify-content：space-between 两端对齐，有空余分配给每个子元素空间
justify-content：space-around将剩余空间分为元素2倍，分别在元素左右分配
justify-content：space-evenly：平均分配剩余空间
- anlign-items：center
设置侧轴上居中
- align-self：flex-end
设置元素在侧轴的位置
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
