1.网页由三部分组成：
- HTML:网页的具体内容和结构
- CSS：网页的样式
- JavaScript: 网页的交互效果
推荐学习网址
2.HTML常见标签：
2.1.标题：h1、h2、h3、h4、h5....
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
2.2.分割线标签 hr
<hr>
2.3.换行标签 br
<br>
2.4.列表标签: ul li ol
<!--无序列表-->
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<!--有序列表-->
<ol type="I">
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
2.5.容器标签：div span 容纳其他标签
<div>我是容器标签</div>
<span>我是行内容器标签</span>
2.6.超链接标签 a
// _blank表示在空白页面打开
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
- href和src区别
href是引用,相当于iOS中的import,不是必需的.(比如<link>,<a>,...)
src是引入,是必需的,没有这个资源,标签就用不起来.(比如<img>,<audio>,<video>,...)
2.7.表单标签 input
<input placeholder="我是占位文字"><br><br><br><br>
<input value="我是默认的文字"><br>
<input type="date"><br>
<input type="file"><br>
<input type="color"><br>
<input type="radio"><br>
<input type="checkbox"><br>
屏幕快照 2017-10-04 上午7.51.47.png
2.8.段落标签 p
<p>我是段落标签</p>2.9.图片标签
// 相对路径: 资源在当前的项目中 ./ ../ ././
// 绝对路径: 资源不在当前的项目中，在网络上: http:// https:// ftp://
<img src="img/share.png">
<img src="http://ages/cms/si09/index_06.jpg" alt="这是一张图片" width="20%"/>
3.HTML5新增标签
1.article 标记文章主体内容
2.header 标记文章头部内容
3.footer 标记文章结尾内容
4.section 标记文章章节内容
5.nav 菜单导航，连接导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个papi酱，老总讲了又讲，丽人丽妆咋这么急？</title>
</head>
<body>
<!--文章-->
<article>
<!--头部-->
<header>
<h2>一个papi酱，老总讲了又讲，丽人丽妆咋这么急？</h2>
<h4>分类 :互联网</h4>
<img src="img/share.png">
</header>
<!--主要内容-->
<img src="http://g.hiphotos.baidu.com/news/crop%3D0%2C1%2C415%2C249%3Bw%3D638/sign=b11ea766412309f7f320f7524f3e20c2/e61190ef76c6a7ef304f1ad4fafaaf51f2de66d3.jpg" width="80%">
<section>
<h3>丽人丽妆快炒过头了</h3>
<p>看它借助PAPI酱炒作用心，除了这类人物具有爆款价值外，可能还有借机传播公司价值、后续融资、IPO的用意。当然，阻击对手的用心似乎也在流露。</p>
<p>当初嫁接PAPI酱被质疑是个内部循环、营销噱头，罗振宇、黄韬、阿里的关系，确实容易引发外界质疑。不过，如果丽人丽妆最后真金白银地掏了，那也是不错的品牌传播案。声量上来，无所谓好坏。</p>
</section>
<section>
<h3>丽人丽妆这家公司风格，确实本不像今日</h3>
<p>它的商业模式有些看点，但也谈不上特别出奇。它从化妆品代运营模式走出来，走向所谓真零售，自采自销，与许多国内外化妆品品牌建立了授权合作，崇尚的是所谓“网上专柜”。</p>
</section>
<!--尾部-->
<footer>
<h3>版权声明</h3>
<div>本文仅代表作者观点，不代表百度立场。</div>
<div>本文系作者授权百度百家发表，未经许可，不得转载</div>
</footer>
</article>
</body>
</html>
2.6.meter 特定范围内数值
<meter value="30" max="100" min="0">浏览器兼容</meter>
屏幕快照 2017-11-27 上午11.00.57.png
3.7.progress 进度条
<progress value="40" max="100"></progress>
屏幕快照 2017-11-27 上午11.01.37.png
3.8.video 视频
<video src="source/BigBuck.m4v" controls="controls"></video>
3.9.audio 音频
<audio src="source/music.m4a" controls="controls"></audio>
4.HTML标签类型
-
块级标签: div、p、h1、h2、ul、li
- 独占一行
- 可设置宽高
-
行内标签: span、a、label
- 与其他行内标签共占一行
- 宽高取决于内容
-
行内块级标签: input、button
- 与其他行内块级标签共占一行
- 可设置宽高
-
4.1.修改标签类型 display
none：隐藏标签
block：变为块级标签
inline：变为行内标签
inline-block：变为行内-块级标签
// CSS文件中设置
div{
background-color: red;
width: 200px;
height: 80px;
/*隐藏标签*/
/*display: none;*/
/*改变标签的类型: 块级--->行内标签*/
/*display: inline;*/
/*改变标签的类型: 块级--->行内-块级标签*/
display: inline-block;
}
// HTML文件中修改
<div class="dom" style="display: block"></div>
