CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)
web学习笔记-html-html新增
1.html基本发展
2.h5新增的功能
2.1 新增的结构化标签
2.2 canvas画布
2.3 离线地图
2.4 文件存储
3.新增的具体的结构化标签
3.1 header标签
01 用于设置页面的标题部分
02 放在网页的头部
更加具有语义化：用法和div一样，div表示分割，但没有任何语义，用Header一下看出它的含义
3.2 footer 页脚标签
01 用来设置一个网页的底部区域
3.3 article 文章
01 用于定义一个独立的内容区块，如一篇文章、博客、帖子等
02 可以嵌套自己的头部 主体 页脚
3.4 section 章节
01 用于定义文章的章节
02 内容之间相互关联 可以用于定义文档的主体部分
3.5 aside
01 用于设置侧边栏
02 用于定义article之外的内容
3.6 nav
用于定义目录 导航栏 超链接
addtess、meter等具体见下代码：
###F型结构图（参考淘宝页面）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 1000px;
height: 130px;
border: 5px solid red;
margin: 10px auto;
}
nav{
width: 1000px;
height: 40px;
border: 5px solid yellow;
margin: 10px auto;
}
nav li{
float: left;
width: 100px;
height: 40px;
background-color: lightgrey;
}
.main{
width: 1000px;
height: 800px;
border: 3px solid blue;
margin: 10px auto;
}
.main aside{
width: 220px;
height: 800px;
background-color: purple;
float: left;
}
.main article{
float: right;
width: 770px;
height: 800px;
background-color: lightcyan;
}
footer{
width: 1000px;
height: 50px;
border:5px solid pink;
margin: 0 auto;
}
hgroup{
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<header>头部 header标签</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</nav>
<div class="main">
<aside>
<!--进度条-->
<progress max="100" value="80"></progress>
<!--用来测试密码的强度：绿色的表示安全-->
<meter min="0" max="100" low="30" high="80" value="90"></meter>
<meter min="0" max="100" low="30" high="80" value="20"></meter>
<meter min="0" max="100" low="30" high="80" value="80"></meter>
</aside>
<article>
<h1>放暑假去哪里嗨！</h1>
<section>
<h2>我要去网红城市 重庆</h2>
<!--mark:标记-->
<!--ins:起到强调的作用，方式是加下划线-->
<p>那里很好玩<mark>那里很好玩</mark>那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩
那里很好玩 <ins>那里很好玩</ins> 那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩
那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩
那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩</p>
</section>
<section>
<h2>我要去网红城市 重庆</h2>
<p>那里很好玩<mark>那里很好玩</mark>那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩
那里很好玩 那里很好玩 那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩
那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩
那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩那里很好玩</p>
<!--将图片放到figure里面-->
<figcaption>我的图片</figcaption>
<figure>
<img src="../img/blue.png" alt="">
</figure>
</section>
<section>
<hgroup>
<h1>今天下雨了</h1>
<h2>今天下雪了</h2>
<h3>双木非林 田下有心</h3>
</hgroup>
</section>
</article>
</div>
<footer>
<!--address默认斜体-->
<address>
作者，xxx，地址：上海市静安区xx街道xx路
<!--pubdate：文章发表的时间-->
发表时间：<time pubdate = "2018-07-09">2018-07-09</time>
</address>
</footer>
</body>
</html><hgroup>
<h1>今天下雨了</h1>
<h2>今天下雪了</h2>
<h3>双木非林 田下有心</h3>
</hgroup>4. h5新增表单元素
color、file等具体见下代码
form:action、post、get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频标签</title>
<style>
textarea{
/*让文本域大小不可更改*/
resize: none;
}
</style>
</head>
<body>
<form action="#" method="get" target="_blank">
<!--post安全显示-->
<!--get在网址中显示-->
<!--target:_blank:在新的页面显示-->
<!--target: _parent:在当前页面显示-->
<p>
<!--input：表示输入的一个部件-->
<!--type:表示表单类型-->
<!--text：表示文本框-->
<!--将用户名与方框联系起来，也就是点击文字时也能在框里输入-->
<!--for:指向谁-->
<label for="username">用户名：</label>
<!--name属性：能够获得该属性值-->
<!--autocomplete:自动记忆功能，将之前输入过的保存下来-->
<input type="text" placeholder="请设置用户名" id="username" name="username" maxlength="4" autocomplete="off" autofocus required>
</p>
<!--html5新增表单元素-->
<!--number:表示输入的数值-->
<p>数量：<input type="number" min="10" max="30"></p>
<p><input type="hidden" name="job" value="职业杀手"></p>
<p>
请选择颜色：<input type="color">
</p>
<p>
时间：<input type="time">
时间：<input type="date">
时间：<input type="week">
时间：<input type="month">
时间：<input type="datetime">
时间：<input type="datetime-local">
</p>
<p>
<!--multiple代表多选-->
请选择文件：<input type="file" accept="image/png" multiple>
</p>
<p><input type="range"></p>
<!--新的下拉列表-->
<!--本身不会显示，要加一个<input type="text" list="mydata">才能显示-->
<p><input type="text" list="mydata"></p>
<datalist id="mydata">
<option value="">thml</option>
<option value="">css</option>
<option value="">h5</option>
<option value="">css3</option>
<option value="">js</option>
</datalist>
<p>
<!--按钮-->
<input type="button" value="我是一个普通按钮">
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset">
<!--提交按钮-->
<button>按钮</button>
<!--图片提交格式-->
<input type="image" src="../img/blue.png">
</p>
</form>
</body>
</html>
音频标签
textarea{
/让文本域大小不可更改/
resize: none;
}
数量：
请选择颜色：
时间： 时间： 时间： 时间： 时间： 时间：
请选择文件：
thml css h5 css3 js按钮