语法
html由各种元素组成，一个元素通常包含开始标签，结束标签，内容在开始标签中可以添加属性
<div class="content" id="one">
<span>hello world</span>
</div>
语义
属性
1.核心属性：id、title、style、class绝大多数元素都具备的属性
2.特有属性：某些元素中特有的属性
a：href、target
img：src、 width 、height
标签
块级别标签
作用：搭建网页的结构
特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
<div>
<ul>
<li></li>
</ul>
</div>
div 【容器】无意义的块元素（无招胜有招）
h1~h6 标题
p 段落
ul>li 【容器】列表
ol>li 【容器】列表
dl>dd,dt 【容器】列表
行级别标签
作用：填充网页
特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本
span 无意义的行内元素
a 超链接
img 图片
strong 加粗
...
<span>hello</span>
<a href="">百度一下</a>
css简单入门
三要素:
一.html (网页骨架) 块 ，行 （table/form）
二.css（页面装饰，布局，动画过渡效果）原则：对于动画效果能用css实现的绝对不用js
三.Javascript（树莓派）动态DOM,类似于jstl,数据交互
如何在html中使用css(3种方式)
一.嵌入在标签内部 将css代码写在了html中，较为混乱 复用性较低
好处：优先级高，简单直接（修改别人代码的时候，weex rn）
二.集中嵌入在style标签中
三.将css独立写在外部的css文件中，并且通过link导入进来
适用于企业级开发
CSS选择器
核心选择器
用法：选择较大范围
-
标签（元素）选择器
div {} h1 {} -
id选择器
#one {} <div id="one">one</div> <div id="two">two</div> -
class选择器
.first {} <div id="one" class="first">one</div> <div id="two" class="first">two</div> <div id="three" class="first">one</div> <div id="four" class="second">two</div> <p id="five" class="first">p</div> -
并且选择器
div.first {} p#five {} -
或者选择器
div,.first {} -
普遍选择器
*
层次选择器【一般不超过5层】
-
子代选择器
.top_nav > ul > li
选中class为top_nav的元素的直接后代ul元素的直接后代li元素
-
后代选择器
.top_nav li -
下一个兄弟选择器
.top_nav li + * -
之后所有兄弟选择器
.top_nav li ~ *
过滤器
对已经选择到的元素进行过滤
-
属性过滤器
selector[name] 已选择到的元素具有name属性 selector[name=v] 已选择到的元素具有name属性，并且name属性的值为v selector[name^=v] 已选择到的元素具有name属性，并且name属性的值以'v'开头 selector[name$=v] 已选择到的元素具有name属性，并且name属性的值以'v'结尾 selector[name*=v] 已选择到的元素具有name属性，并且name属性的值中包含了'v' -
伪类过滤器
以:开头的
selector:first-child 过滤出已选择元素中的是第一个孩子的元素
selector:last-child
selector:nth-child(2)
selector:nth-child(even)
selector:nth-child(odd)
selector:nth-child(3n+1)
selector:only-child
selector:not(selector)
...
selector:hover
selector:active
selector:visited
selector:focus
- 伪元素过滤器
可以产生出来一个虚拟元素（行内元素） 以::开头的
div::before {
}
div::after {
}
<div>
::before
<p>one</p>
<p>two</p>
::after
</div>
