HTML5核心
创建HTML5文档
<!DOCTYPE html>
<!--得知自己要处理的内容是HTML-->
<html lang="en"><!--文档中HTML的开始-->
<head><!--提供有关文档内容和标记信息-->
<meta charset="UTF-8"><!--编码-->
<title>标题<title><!--标题-->
</head>
<body>
<!--里边的东西可以直接在网页上显示-->
</body>
</html>
超链接，字体处理的实现
<a href="www.baidu.com" target="blank"> 百度 </a>
<a href="www.baidu.com" target="_self"> 百度 </a>
<!--blank是新打开一个窗口 而_self是刷新界面-->
<b>里边是粗体</b>
<em>里边是斜体</em>
<u>下划线效果 </u>
<s>删除线效果</s>
<br><!--换行符-->
<!--u不推荐使用-->
表格的使用
<table border="1px">
<!-- border不建议使用-->
<tr>
<th>admin</th>
<th>admin</th>
<th>admin</th>
</tr>
<!--th表示表头 会居中显示-->
<tr>
<td>admin</td>
<td>admin</td>
<td>admin</td>
</tr>
<!--tr表示一行 下边表示第一行有三列 用-->
<tr>
<td>admin</td>
<td>admin</td>
<td>admin</td>
</tr>
<tfoot>
<td>admin</td>
<td>admin</td>
<td>admin</td>
</tfoot>
<!--tfoot表示表脚-->
</table>
<!--开头用tr 表头用th 表格单元用td-->
类似效果为
| admin | admin | admin |
|---|---|---|
| admin | admin | admin |
| admin | admin | admin |
| admin | admin | admin |
合并单元格
<table border="1px">
<tr>
<td colspan="2">admin</td>
<td>admin</td>
</tr>
<tr>
<td>admin</td>
<td>admin</td>
<td>admin</td>
</tr>
</table>
---------------------------------------
<table border="1px">
<tr>
<td rowspan="2">admin</td>
<td>admin</td>
<td>admin</td>
</tr>
<tr>
<td>admin</td>
<td>admin</td>
</tr>
<tr>
<td>admin</td>
<td>admin</td>
<td>admin</td>
</tr>
</table>
类似于
| admin | admin | |
| admin | admin | admin |
| admin | admin | admin |
| admin | admin | |
| admin | admin | admin |
HTML5列表元素
有序标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>vdfg</li>
<li>vddffg</li>
<li>vddsdfg</li>
</ol><!--有序列表1. 2. 3. -->
<ol reversed>
<li>vdfg</li>
<li>vddffg</li>
<li>vddsdfg</li>
</ol><!--有序列表（倒序列表）markdown不支持-->
<ol type="a" > <!--type的类型有a A 1 i I -->
<li>vdfg</li>
<li>vddffg</li>
<li>vddsdfg</li>
</ol><!--有序列表-->
</body>
</html>
类似于
- dfs
- dfsg
- sdfgs
- vdfg
- vddffg
- vddsdfg
无序标签
<ul>
<li>vdfg</li>
<li>vddffg</li>
<li>vddsdfg</li>
</ul>
表单
表单是HTML中获取用户输入的手段，对于web应用系统及其重要
<form>
<input type="text" value="123456">
<!--type="text" 意思是单行文本框 value是预先填充123456这一个字符串-->
<input placeholder="abcdef">
<!--不占文本框的位置 输入即消失-->
<input maxlength="8">
<!--最大能输入的字符-->
<input size="50">
<!--显示长度-->
<input value="123456" readonly>
<!--没有属性值的 不能修改内容123456-->
<input type="password" placeholder="密码">
<!--隐藏内容 -->
<textarea rows="20" cols="20"></textarea>
<!--多行文本框 rows行数 cols列数 -->
<input type="button" value="登录">
<button>按钮</button>
<!--与js合作并且作为规定事件的 应用范围更加广泛 -->
<input type="submit" value="提交">
<!--这三个看似一致其实有区别 -->
<input type="range" min="100" max="1000" value="0">
<!-- 可以拖动的条 value是起始值-->
<input type="number" min="100" max="1000" value="123">
<!--可以用作出生年月日-->
<input type="radio" name="a">
<input type="radio" name="a">
<input type="radio" name="a">
<!--name的作用是归类 这样选择一个 另一个其他就会被取消-->
你最喜欢的水果是哪个
<select>
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>
<!--强制三选一-->
<input type="text" list="1">
<datalist id="1">
<option>西瓜</option>
<option>苹果</option>
<option>香蕉</option>
</datalist>
<!--可以选择自动填充 也可以自己输入 datalist的id值需要与input匹配-->
<input type="email">
<input type="tel">
<input type="url">
<!--和普通文本框一致 但是会启用验证功能 但是只有email比较好用-->
<input type="date">
<!--年月日 Chrome和edge都会优化 但ie不会优化和普通文本框没有区别-->
<input type="color">
<!--获取颜色-->
<input type="search">
<!--听说输入后按回车有用？-->
<input type="hidden">
<!--提交隐藏域 不在页面上显示-->
<input type="image" src="" width="40px">
<!--图片按钮-->
<input type="file" multiple>
<input type="file" required>
<!--multiple是可以上传多个文件 require是只能上传一个文件-->
</form>
HTML5嵌入图片与创建分区响应图
<img src="" width="20" height="30" alt="下载按钮">
<!--src是路径 alt是如果图片加载不出来文字说明-->
---------------------------------------------------------
<a href="" target="_blank">
<img scr="">
</a>
<!--创建一个a标签 点击图片可以直接以新标签页的形式打开href的链接 即图片超链接形式-->
--------------------------------------------------------------------------------------------------
<img src="resizeApi.png" usemap="#map1">
<map name="map1">
<area href="123.html" shape="rect" coords="25,69,100,103">
</map>
<!--矩形区域是左上角坐标x1 y1 x2，y2-->
<img src="resizeApi.png" width="40px" usemap="#map1">
<map name="map1">
<area href="123.html" shape="circle" coords="20,20,10">
<!--圆形区域是圆心坐标x1 y1和半径-->
HTML5多媒体-视频播放
<video src="hh.mp4" height="500px" controls preload="auto" poster="resizeApi.png" >
<source scr="hhh.mp4" type="video/ogg">
</video>
<!--html5支持的格式只有 ogv mpeg4 和webM controls是加控制条 preload是设置预加载 post是视频没开始的时候封面图片 source是老版浏览器不支持源文件的格式时的替换选择-->
视频播放
<audio src="02.成名在望.wav" controls autoplay></audio>
<!--和video一样的属性详情见上方-->
CSS
CSS初步
<a style="font-size: 40px;color: #6cff77" >文本</a>
<!--这里设置了字体大小 和颜色 注意要用分号;隔开 元素内嵌样式表-->
---------------------------------------
<style>
a{
font-size: 40px;
color: #ff553e;
}
</style>
<a>显示文本</a>
<!--文档内嵌表和上边一样只是格式不同-->
--------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<a>显示文本</a>
</body>
</html>
a.css
a{
font-size: 40px;
color: #ff553e;
}
<!--使用外部样式表-->
<!--元素内嵌样式表>文档内嵌样式表外部文件样式表-->
CSS选择器
- 选择所有元素
- 根据类型选择元素
- 根据类选择元素
- 根据ID选择元素
- 根据属性选择元素
- 其他选择器
- 冒号选择器
- 选择所有元素
<style type="text/css" >
* {
color: #2e43ff;
font-size: 40px;
}
</style>
<a>显示文本</a>
<p>sdjlksjfalj</p>
<!--“显示文本”和“sdjlksjfalj”都是蓝色 字号为40px-->
- 根据类型选择元素
<style type="text/css" >
a {
color: #2e43ff;
font-size: 40px;
}
</style>
<a>显示文本</a>
<p>sdjlksjfalj</p>
<!--只有“显示文本”为蓝色 字号为40px-->
- 根据类选择元素
<style type="text/css" >
.class1{
color: #2e43ff;
font-size: 40px;
}
</style>
<a class="class1">显示文本</a>
<p class="class1">sdjlksjfalj</p>
<h1>jkldjajdlkj</h1>
<!--只有a和p中的文本为蓝色 字号为40px-->
- 根据ID来选择属性
<style type="text/css" >
#ID1{
color: #2e43ff;
font-size: 40px;
}
</style>
<a id="ID1">显示文本</a>
<p >sdjlksjfalj</p>
<h1>jkldjajdlkj</h1>
<!--只有a中的文本为蓝色 字号为40px id和class区别是id是个唯一标识
但是id设为一致可以和class一样 但不推荐使用-->
- 根据属性选择元素
<style type="text/css" >
[herf=1.html]]{
color: #2e43ff;
font-size: 40px;
}
</style>
<a href="1.html">显示文本</a>
<p href="2.html">sdjlksjfalj</p>
<h1>jkldjajdlkj</h1>
<!--只有a里的文本为蓝色 字号为40px -->
- 冒号选择器
<style type="text/css" >
a
{
color: #2e43ff;
font-size: 40px;
}
a:hover
{
color: #2e43ff;
font-size: 80px;
}
</style>
<a >显示文本</a>
<p >sdjlksjfalj</p>
<h1>jkldjajdlkj</h1>
<!--鼠标经过a时 字号会从40px变到80px-->
CSS控制边框和背景
控制边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
.class1{
border-width: 5px;
<!--边框宽度-->
border-color: #ff2843;
<!--边框颜色-->
border-style: solid;
<!--边框格式-->
border-top-color:#c6ffb3;
<!--边框上方的颜色-->
background: #6599ff;
<!--背景颜色-->
<!--border: 10px solid black可以更方便的设置宽度 样式 颜色-->
}
</style>
</head>
<body>
<a class="class1">显示文本</a>
<p >sdjlksjfalj</p>
<h1>jkldjajdlkj</h1>
</body>
</html>
<!--加入边框 -->
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
.class1{
width: 400px;
height: 400px;
border-style: 5px solid red;
background-image: url("下载.jpg");
background-repeat: no-repeat;
<!--不重复 指以一张图片填充 -->
background-size: cover ;
background-attachment:fixed
<!--背景图片不随下滑操作的进行而下滑 与fixed相对的是local-->;
}
/*cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。*/
</style>
</head>
<body class="class1">
<a>sjsjl</a>
<p>sdjlksjfalj</p>
<h1>jkldjajdlkj</h1>
</body>
</html>
CSS设置文本样式（上）
p{
width: 50px;
height: 50px;
border: 1px solid black;
background-color: antiquewhite;
border-radius: 10px/10px;
}
<!--主要介绍border-radius 前一个10px是指距离左右侧圆的半径 后一个10px是指垂直距离为10px 如果两者不一致就为椭圆-->
- 对齐文本 Text-align
- 文本方向 Direction
- 指定字母间距，单词间距，行高 letter-spacing word-spacing line-height
- 首行缩进 Text-indent
- 文本装饰 Text-decoration
- 文本大小写转换 Text-transform
<style type="text/css">
p{
text-align: center;
<!--居中显示 center right和left不用说了-->
direction: ltr;
<!--ltr 意思是left to right 和上边的left没有区别-->
letter-spacing: 10px;
<!--字间距为10px-->
line-height: 10px;
letter-spacing: 10px;
<!--行间距/行高为10px-->
text-indent: 50px;
<!--首行缩进-->
text-decoration: underline ;
<!--下划线underline overline上划线 line-through 删除线 还有很多-->
text-transform: capitalize;
<!--每个词的开头首字母大写 uppercase全大写 lowercase全小写-->
}
</style>
<p>sfasfdasf</p>
<!--居中显示 center right和left不用说了-->
CSS设置文本样式（下）
- 字体名称
- 字体大小
- 字体样式
- 指定字母是否以小型大小写字母显示
- 设置字体粗细
- 创建文本阴影
<style type="text/css">
p{
font-family: 宋体;
<!--设置字体样式-->
font-size:100px;
<!--设置字体大小-->
font-style: italic;
<!--italic 是斜体的意思 oblique也是斜体 但不如italic更斜 italic是将字体强行掰斜-->
font-variant: small-caps;
<!--小型大写 比一般默认的大写字母字号要小-->
font-weight: 900:
<!--加粗的程度 从100 到900逐渐加深-->
text-shadow: 10px 10px 10px yellow;
<!--向下向右偏移10px 10px 可以用负值 模糊程度为10px 值越大模糊程度越高-->
}
</style>
<p>sfasfdasf</p>
CSS使用过渡
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: purple;
}
p:hover{
width: 200px;
height: 200px;
background-color: pink;
transition-delay: 1s;
<!--transition-delay 是等鼠标放上去多少秒开始变换-->
transition-duration: 1s;
<!--transition-duration 是开始变换后动画的秒数-->
transition-property: background-color ;
<!--只有background-color平滑过渡 其他属性都是瞬间激发 -->
transition-timing-function: ease-in-out;
<!--贝塞尔曲线
ease 快慢快 ease-in 慢快 ease-out 快慢 liner 都是一个速度
与AE里边的速度曲线类似-->
/*-webkit-transition-duration: 1s;*/
/*-moz-transition-duration: 1s;*/
/*-o-transition-duration: 1s;*/
<!--webkit moz o 分别代表Chrome/safari ,火狐浏览器,欧朋浏览器这是为早期浏览器直接写transition-duration不兼容-->
}
</style>
<!--transition-delay 是等鼠标放上去多少秒开始变换-->
CSS使用动画
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: purple;
}
p:hover{
animation-duration: 500ms;
animation-delay: 200ms;
animation-name: name1;
animation-iteration-count: infinite;
<!--指动画的次数无限次-->
animation-direction: alternate;
<!--反方向就像气球充起来再放气 -->
}
@keyframes name1 {
from{
width: 150px;
height: 150px;
background-color: purple;
}
to{
width: 200px;
height:200px;
background-color: antiquewhite;
}
<!--这一行可以控制过程 -->
}
</style>
CSS使用变换
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: purple;
}
p:hover{
width: 100px;
height: 100px;
background-color:pink;
1. transform: rotate(45deg);
<!--旋转45角 默认锚点为图片中心-->
2. transform: scalex(1.5);
<!--放大x轴1.5倍 也可以scale(1.5)指的是中心放大-->
3. transform-origin: 20px 40px;
(设置锚点 两个值表示左边上边的距离)
}
</style>
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
