前端学习^ ^

1. HTML

1.1 HTML常用标签

1. 标题
2. 段落
3. 图片
4. 链接
5. 有序表
6. 无序表
7. 表格
8. 表单

• tip:使用小写标签
• 更多标签：HTML标签列表

1.2 HTML元素

• 起始标签 + 元素内容 + 结束标签
• 空元素：没有内容的HTML元素（应在开始标签中关闭）

1.3 HTML属性

• HTML元素可以设置属性
• 描述于开始标签
• 以键值对的形式出现，属性值被双引号包括
  {name="zhang san}"
• 常用属性：HTML属性列表

2. CSS

2.1 引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	写在style标签中	当前页面	小案例
外联式	写在单独的css文件中，通过link标签引入	多个页面	项目
行内式	写在标签的style属性中	当前标签	配合js使用

2.2 选择器

选择器	结构	作用	注意点
标签	标签名{css属性名：属性值}	当前所有标签	①选择器选择的是一类标签
类	.类名{css属性名：属性值}	所有含class属性的标签	①需要定义和使用才能生效 ②一个标签可有多个类名，类名以空格隔开
id	#id属性值{css属性名：属性值}	带有该id属性值的标签	①一个标签只能有一个id属性值
通配符	*{css属性名：属性值}	所有标签	①极少使用
后代	选择器1 选择器2{css}	选择器1找到的标签的后代（儿子、孙子……）	选择器间用"空格"隔开
子代	选择器1>选择器2{css}	选择器1找到的标签的子代（儿子）	选择器间用">"隔开
并集	选择器1,选择器2{css}	多个选择器选中的标签	选择器间用","隔开
交集	选择器1选择器2{css}	同时满足多个选择器的标签	①选择器间紧挨着 ②标签选择器必须写在最前面
伪类	选择器:hover{css}	任何标签

2.3 文字/文本样式

属性名	属性值	样式
font-size	数字+px	字体大小
font-weight	normal（正常）/bold（加粗）	字体粗细
font-style	normal（正常）/italic（倾斜）	字体倾斜
font-family	相应字体	设置字体（网页中是非衬线字体）
text-indent	数字+em(和字体大小一样)	文本缩进
text-align	cente/left/right	文本对齐
text-decoration	underline/line-through/overline/none	文本修饰
line-height	倍数（当前字体大小的倍数）	行高

font复合属性
font：倾斜 粗细 大小 字体（前两个可省略）

2.4 背景

背景复合属性
background：颜色 图片 平铺 位置

2.5 三大特性

1. 继承性
2. 层叠性
3. 优先级

2.6 元素显示模式

元素显示模式	特点	代表标签
块级	①换行 ②可设置宽高	div、p
行内	①不换行 ②不可设置宽高 ③尺寸和内容大小相同	a、span
行内块	①不换行 ②可设置宽高	img、button、input

显示模式转换

属性	效果
display:block	转换成块级元素
display:inline-block	转换成行内块元素
display:inline	转换成行内元素

嵌套规范

1. 块级元素作为大容器，可以嵌套文本、块级元素、行内元素。（p标签中不要嵌套div、p、h）
2. a标签内部可以嵌套任意元素，但不能嵌套a

2.7 盒子模型

组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

组成	属性	常见取值
内容	height、width	数字+px
边框	（复合属性）border：size style color	style：solid（实线）、dashed（虚线）、dotted（点）
	（单方向设置）border-left / right/ top/ bottom
内边距	（可单独设置某个方向的页边距 padding：四值（上 右 下 左）	数字+px
	padding:三值（上 左右 下）
	padding:二值（上下 左右）
外边距	（与padding相同）margin:四值、三值、二值

盒子尺寸 = width / height + border + padding
CSS3盒子模型——添加border和padding后不需要手动做减法

	盒模型	CSS3盒子模型
特点	需要手动内减	自动内减
实现方式		给盒子设置属性bos-sizing:border-box

3.每日学习成果

8.12 学习了html基础，并制作了一个包含常见html元素的简单页面
8.13 学习了css基础，并对页面进行一些简单的渲染美化
8.14 学习了盒子模型，并利用盒子模型制作了学习列表
8.15 学习了CSS浮动，并制作了双列新闻列表
8.16 学习了CSS定位和响应式布局，并分别制作了两个新闻首页