001_RN_HTML5和CSS学习
2018-05-29 本文已影响0人
a浮生若梦a
一、HTML
- HTML的全程是HyperText Markup Language,超文本标记语言。它就是一个文本，由浏览器负责解析成具体的网页内容。
- HTML是由N个标签（节点、元素、标记）组成。
- HTML语法比较松散，目前最新版是5.0，也就是HTML5。
常见HTML标签
* 标题：h1、h2、h3、h4、h5...
* 段落：p
* 换行：br
* 容器：div 、span（用来容纳其他标签）
* 列表：ul、ol、li
* 图片：img
* 表单：input
* 链接：a
* 表格：table、tr、td
......等等
HTML5新增了27个标签元素，废弃了16个标签元素，主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签：负责Web上下文结构的定义，确保HTML文档。
包括：
- article 文章主题内容（一篇博客、一篇论坛、一段用户评论等）
- header 标记头部区域内容
- footer 标记脚部区域内容
- section 区域章节表述
- nav 菜单导航，链接导航
2.块级性标签：完成Web页面区域的划分，确保内容的有效分隔。
包括：
- aside 注记，贴上，侧栏，摘要，插入的引用作为补充主体的内容
- figure 对多个元素组合并展示的元素，常与figcaption联合使用
- code 表示一段代码块
- dialog 人与人之间对话，包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.行内语义性标签：完成Web页面具体内容的引用和表述，丰富展示内容，
包括：
- meter 特定范围内的数值，如工资、数量、百分比
- time 时间值
- progress 进度条 可用max、min、step进行控制，完成对进度的表示和监听
- video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
- audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签：功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础
包括：
- details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
- datagrid 控制客户端数据与显示，可用于动态脚本及时更新
- menu 用于交互菜单
- command 用来处理命令按钮
具体一些标签和属性等可参考这个文档查看
二、CSS
CSS的全称是Cascading Style Sheets，层叠样式表
用来控制HTML标签的样式，在美化网页中起到非常重要的作用。
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="这里写入引用文件路径">
CSS两大重点
1.属性
通过对标签的使用可以添加一些属性，通过属性的复杂叠加才能做出漂亮的网页。
2.选择器
选择器的作用：可以选择对应的标签，为之添加样式。
-
标签选择器（如：根据标签名找到标签）
标签选择器
-
类选择器（如：根据类名找到标签）
类选择器
-
id选择器
id选择器
-
并列选择器 （如：根据逗号分隔所有div标签和所有叫high类名的标签来找。逻辑或）
并列选择器
-
复合选择器 （如：只查找div标签里面的叫high类的标签。逻辑与）
复合选择器
-
后代选择器（如：查找div标签里面的p标签，包括子，孙标签。）
后代选择器
-
直接后代选择器（如：查找div标签里面的p标签，只包括子标签。）
直接后代选择器
-
相邻兄弟选择器（如：查找与div标签相邻的p标签，只看向下相邻的标签。）
相邻兄弟选择器
-
属性选择器（如：查找与div标签里面相关属性的标签。）
属性选择器1
属性选择器2
属性选择器3
CSS选择器-伪类-伪元素
伪类
伪元素
例1：
<!--有一个输入框-->
<input placeholder="请输入...">
/* 伪类 :focus属性 */
input:focus{
/* 通过点击input标签输入框焦点时候输入款的边框颜色去掉 */
outline: none;
}
例2：
<!--有一个div标签-->
<div class="ccName">我是div1</div>
/* 伪类 : hover属性 */
.ccName:hover{
/* 当鼠标悬浮在div这个类名叫ccName标签上方是，设置背景为红色*/
background-color: red;
}
例3：
<p>我是段落哈哈哈</p>
/* 伪元素 : first-letter属性 */
p:first-letter{
/* 把p标签里面的第一个文字颜色设为蓝色*/
color: blue;
}
伪元素趋向于每个标签里面的内容和元素的设置。伪类是对整个的标签的设置。
选择器优先级
选择器的针对性越强，它的优先级就越高
选择器的权值：
通配选择符（*）：0
标签：1
类、属性、伪类、伪元素：10
id：100
important：1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先；
CSS样式遵守的规则：
1.相同类型的选择器遵守：a.就近原则 b.叠加原则
2.不同类型的选择器遵守： important > 内联 > id选择器 > 类选择器 > 标签选择器
HTML标签类型
HTML有N多标签，根据显示的类型主要分3大类：
-
块级标签：独占一行的标签，能随时设置宽高（比如div、p、h1、ul、li等）
-
行内标签（内联标签）：多行标签能同时显示在一行，高度和宽度决定内容尺寸（比如span、a、label等）
-
行内-块级标签（内联-块级标签）：多个行内-块级标签可以显示在同一行，能随时设置宽度高度（比如input、button等）
修改标签的显示类型
CSS中有个 display 属性，能修改标签的显示类型：
- none：隐藏标签
- block：让标签变为 块级标签
- inline：让标签变为 行内标签
- inline-block：让标签变为 行内-块级标签 （ 内联-块级标签 ）
