HTML和CSS初学日记

HTML笔记

1. 块级别标签
   作用：搭建网页的结构
   特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义

    	div 			【容器】无意义的块元素（无招胜有招）
    	h1~h6 		标题
    	p 				段落
    	ul>li 		【容器】列表
    	ol>li 		【容器】列表
    	dl>dd,dt 	【容器】列表
    	
   
    2) 行级别标签
    	作用：填充网页
    	特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本
   
    	span 			无意义的行内元素
    	a 				超链接
    	href 
    	target
    	img 			图片
    	src
    	alt 	当图片找不到的时候的文本替代
    	<span>hello</span>
    	<a href="">百度一下</a>
   

CSS

如何在html中使用css(3种方式)

		1) 嵌入在标签内部
				将css代码写在了html中，较为混乱
				复用性较低
				
				好处：优先级高，简单直接（修改别人代码的时候，weex rn）
		2) 集中嵌入在style标签中
				
		3) 将css独立写在外部的css文件中，并且通过link导入进来
			适用于企业级开发
	css语法
		选择器 {
			/*规则*/
			color:#ffffff;
			background-color:pink;
		}

css选择器 (jQuery选择器)

	1) 核心选择器
		用法：选择较大范围
		1. 标签（元素）选择器
			div {}
			h1 {}
		2. id选择器
			#one {}
			<div id="one">one</div>
			<div id="two">two</div>
			
		3. 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>
			这样很容易      **词穷！！！**
			
		4. 并且选择器
			div.first {}
			p#five {}
			
		5. 或者选择器
			div,.first {}
			
		6. 普遍选择器
			* 	
	2) 层次选择器【一般不超过5层】
		1. 子代选择器
			.top_nav > ul > li
			选中class为top_nav的元素的直接后代ul元素的直接后代li元素
			
		2. 后代选择器
			.top_nav li				
			
		3. 下一个兄弟选择器
			.top_nav li + *
			
		4. 之后所有兄弟选择器
			.top_nav li ~ *
			
	3) 过滤器
	
		对已经选择到的元素进行过滤
		1. 属性过滤器
			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'
		2. 伪类过滤器
			以:开头的
			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
		3. 伪元素过滤器
			可以产生出来一个虚拟元素（行内元素）
			以::开头的
			div::before {

			}
			div::after {

			}
			<div>
				::before
				<p>one</p>
				<p>two</p>
				::after
			</div>

后续更新。。。。