html5和css学习,001_RN_HTML5和CSS学习

一、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属性中书写。

例如：

页内样式：在本网页的style标签中书写。

例如：

body {

color: red;

}

外部样式：单独的CSS文件中书写，然后在网页中用link标签引用

例如：

CSS两大重点

1.属性

通过对标签的使用可以添加一些属性，通过属性的复杂叠加才能做出漂亮的网页。

2.选择器

选择器的作用：可以选择对应的标签，为之添加样式。

标签选择器(如：根据标签名找到标签)

标签选择器

类选择器(如：根据类名找到标签)

类选择器

id选择器

id选择器

并列选择器 (如：根据逗号分隔所有div标签和所有叫high类名的标签来找。逻辑或)

并列选择器

复合选择器 (如：只查找div标签里面的叫high类的标签。逻辑与)

复合选择器

后代选择器(如：查找div标签里面的p标签，包括子，孙标签。)

后代选择器

直接后代选择器(如：查找div标签里面的p标签，只包括子标签。)

直接后代选择器

相邻兄弟选择器(如：查找与div标签相邻的p标签，只看向下相邻的标签。)

相邻兄弟选择器

属性选择器(如：查找与div标签里面相关属性的标签。)

属性选择器1

属性选择器2

属性选择器3

CSS选择器-伪类-伪元素

伪类

伪元素

例1：

/* 伪类 :focus属性 */

input:focus{

/* 通过点击input标签输入框焦点时候输入款的边框颜色去掉 */

outline: none;

}

例2：

我是div1

/* 伪类 : hover属性 */

.ccName:hover{

/* 当鼠标悬浮在div这个类名叫ccName标签上方是，设置背景为红色*/

background-color: red;

}

例3：

我是段落哈哈哈

/* 伪元素 : 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：让标签变为 行内-块级标签 ( 内联-块级标签 )