HTML第一天学习笔记
2017-12-22 本文已影响12人
Zz7777777
HTML第一天学习笔记
1.常见的HTML标签
- 标题：h1、h2、h3、h4、h5....
- 段落：p
- 换行：br
- 容器：div、span（用来容纳其他标签）
- 表格：table、tr 、td
- 列表：ul（注意的是ul大多数跟li进行搭配）、ol、li
- 图片:img
- 表单：input
- 链接：a
2.标签结构分类
-
-结构性标签(负责Web上下文结构的定义，确保HTML文档)- article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
- header 标记头部区域内容
- footer 标记脚部区域内容
- section 区域章节表述
- nav 菜单导航,链接导航
Here is the code:
<body>
<!--文章-->
<article>
<!--文章的头部-->
<header>
<!--标题-->
<h1>群雄混战VR市场 大家会采用何种商业模式？</h1>
<h4>虚拟现实 商业模式 VR 分类 :互联网</h4>
<img src="images/share.png" width="20%">
</header>
<!--文章的主要内容-->
<div>
<section>
<!--<img src="http://c.hiphotos.baidu.com/news/w%3D638/sign=1a998c7753e736d158138f0ba3514ffc/5fdf8db1cb134954abb42acf514e9258d0094af7.jpg" width="50%">-->
<h3>1.应用内购买可能是主流商业模式 硬件售卖收入在初期占比最高</h3>
<p>这几个盈利的商业模式可能在虚拟现实市场的不同时期体现，也可能同时在市场存在。目前，第一个实现的就是硬件售卖收入，Facebook的股价在Oculus Rift发售后上涨，就是市场期望Facebook可以复制苹果在智能手机市场上的成功。苹果公司自2007年发布iPhone以来，在移动硬件市场上攫取了大部分的利润，并且近几年绝大多数时间是全球市值最高的公司，苹果公司抓住了智能手机对手机制造商的颠覆机会，Facebook和其他公司既然有先例可以学习，人人都明白硬件占领标准和需求高地的重要性。</p>
<p>虚拟现实市场目前处于设备普及前期，有市场调查公司预计2020年虚拟现实设备将达到17%的普及率，市场也会像智能手机市场一样存在高端到低端，甚至免费的产品，预计虚拟现实硬件产品的收入将占到整个市场收入的40%。</p>
</section>
<section>
<h3>2.首发百度百家</h3>
<p>Netflix、亚马逊、Spotify、中国的视频网站正在流媒体播放上拼杀，不过这些公司的流量和收入可能暂时都无法抵得过Pornhub等网站的虚拟成人内容，Pornhub等网站一直是高新技术的热衷者，在虚拟现实的浪潮中，他们不会缺席。也因为Pornhub等网站用户数众多，他们已经开设相应的频道，在免费和付费的服务上他们有独特的经验。</p>
</section>
</div>
<!--文章的尾部-->
<footer>
<h3>版权声明</h3>
<p>本文仅代表作者观点，不代表百度立场。</p>
<p>本文系作者授权百度百家发表，未经许可，不得转载。</p>
</footer>
</article>
</body>
<font color=#A52A2A>代码运行结果:</font>
283F134F-1241-4293-BD8C-A7945B45107E.png
-
-块级性标签(完成Web页面区域的划分，确保内容的有效分隔)- aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
- figure 对多个元素组合并展示的元素,常与figcaption联合使用
- code 表示一段代码块
- dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示 说话者、dd用于表示说话者的内容）
-
-行内语义性标签(完成Web页面区域的划分，确保内容的有效分隔)- meter 特定范围内的数值，如工资、数量、百分比
- time 时间值
- progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
- video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
-
-交互性标签(功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础)- details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
- datagrid 控制客户端数据与显示，可用于动态脚本及时更新
- menu 用于交互菜单
- command 用来处理命令按钮
2.0 CSS的基本语法
CSS的编写格式是键值对形式的
color: red; background-color: blue; font-size: 20px;CSS存在3种书写形式
*行内样式：（内联样式）直接在标签的style属性中书写 <body style="color: red;"> *页内样式：在本网页的style标签中书写<style> body { color: red; } </style> *外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用 <link rel="stylesheet" href="index.css"> ```
2.1 CSS选择器
-
-标签选择器(1.选择对应的标签，为之添加样式 2.根据标签名找到标签)- 标签选择器
- 类选择器
- id选择器
- 并列选择器
- 复合选择器
- 后代选择器
- 直接后代选择器
- 相邻兄弟选择器
- 属性选择器
- 伪类
Here is the code:
<head>
<meta charset="UTF-8">
<title>CSS的常见选择器</title>
<style>
/* 标签选择器 */
div{
color: red;
}
p{
color: blue;
}
/* 类选择器 */
.test1{
color: green;
}
/*id选择器*/
#main{
font-size: 40px;
}
/*并列选择器*/
#main, .test1{
border: 1px solid rosybrown;
}
/*复合选择器*/
p.test1{
background-color: yellow;
}
/*后代选择器*/
div a{
color: red;
}
/*直接后代选择器*/
div.test1>a{
color: green;
}
/*伪类*/
input:focus{
/*去除外线条*/
outline: none;
/*改变宽度和高度*/
width: 500px;
height: 50px;
/*改变文字的大小*/
font-size: 20px;
}
/*当鼠标移动上来*/
#main:hover{
width: 300px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="main">我是div标签</div>
<!--<div id="main">我是div标签</div>-->
<div>我是div标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p class="test1">我是段落标签</p>
<div class="test1">
我是div标签
<a href="#">我是超链接</a>
<div>
<a href="#">我是二级链接</a>
</div>
</div>
<br><br><br><br>
<input placeholder="我是输入框">
</body>
2.2 CSS 选择器优先级
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
3.0HTML标签类型
-
HTML有N多标签，根据显示的类型，主要可以分为3大类
-
-块级标签: 独占一行的标签,能随时设置宽度和高度（比如div、p、h1、h2、ul、li） -
-行内标签（内联标签）:多个行内标签能同时显示在一行,宽度和高度取决于内容的尺寸（比如span、a、label） -
-行内-块级标签（内联-块级标签）多个行内-块级标签可以显示在同一行，能随时设置宽度和高度（比如input、button）
-
3.1HTML标签类型
-
CSS中有个display属性，能修改标签的显示类型
-
-none: 隐藏标签 -
-block:让标签变为块级标签 -
-inline:让标签变为行内标签 -
-inline-block:让标签变为行内-块级标签（内联-块级标签）
-
后面持续更新....
