➷HTML+CSS前端笔记(基础篇-第一部分)-CFANZ编程社区

★ 学习目标：

根据.psd文件/图片，用html+css布局出静态网页；

！DAY❶ 认识Web及常用标签

认识网页

组成元素：文字，图片，链接，音视频等；
网页构造原理：网页元素用html标签描述出来，然后通过浏览器解析后展示给用户；

浏览器内核
排版/解释/渲染引擎；读取网页内容，计算显示方式显示页面；
Android手机使用率最高的是webkit内核;
国产浏览器大部分是基于webkit的二次开发；

浏览器	内核
IE	Trident
Safari	Webkit
Chrome	Chromium/blink

Web标准的三层组成：
结构——网页元素(html)；
表现——外观样式(css)；
行为——交互(javascript)；
html骨架标签
Sublime中：html:5或！(自动生成骨架标签)；
html lang=“en”(英语)/zh-CN(中文)
meta charset=UTF-8(编码/存储方式)

`<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>`

HTML常用标签
- 排版标签
  <h1> </h1> 🏷标题标签
  <p> </p> 🏷段落标签
  <hr/> ——水平线
  <br/> ——换行
  <div> </div> 一行只能放一个
  <span> </span>一行很多个
- 文本格式化标签
  <b> </b> 加粗
  ★ <strong> </strong> 加粗,强调！
  <i> </i> 倾斜
  ★ <em> </em> 倾斜，强调！
  <s> </s> 添加删除线
  ★ <del> </del> 加删除线，强调！
  <u> </u>添加下划线
  ★ <ins> </ins> 添加下划线，强调！
- 图像标签属性
  <img src="图像路径"> 图像标签 (图像标签必有路径)
- 链接🔗标签属性
  <a href = "图像路径" > 链接文字 </a>
- 注释标签
  
  ★ 注释快捷键：ctrl+/
- 路径
  同级/下一级/上一级…/

img属性
src	图像路径
alt	图像不能显示时的替换文本
title	鼠标悬停时的内容
width/height	图像宽度/高度

a链接属性
href	链接指向的url地址；(href="#") 空链接
target	页面打开方式:_self默认/_target新窗口
width/height	图像宽度/高度

拓展
- 锚点链接
  在跳转目标添加id，如id=tree
  点击跳转位置添加链接 href="#tree";
- base标签 ★
  在<head> </head>之间，添加<base target="_blank" />设置所有链接打开在新窗口显示；
- 预格式化文本标签
  <pre> </pre>
  按写出来的代码格式显示，换行和空格也显示；

！DAY❷ 表格/表单/列表

表格——显示数据
- 表格结构
  <caption> 表格标题，跟随表格移动；
  <th> 表头单元格，默认格式加粗并居中；

<table> 
	<caption> 个人简介 </caption>
	<tr> 
		<th> 姓名 </th> <th> 年龄 </th> 
	</tr>
	<tr>
		<td> 伍佰 </td> <td> 500</td> 
 	</tr>
</table>

表格属性

表格属性	值
border(表格边框)	px(像素)
width/height(宽/高)	px
align(表格在网页水平对齐方式)	center/ left/ right
cellspacing(单元格边框间的空白间距)	px (默认2px)
cellpadding(单元格边框与里面内容的距离)	px (默认1px)

合并单元格
rowspan = 合并的单元格个数
colspan = 合并的单元格个数
表格在网页中划分结构
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
列表——页面布局，与表格类似但自由度更高
- 无序列表
  <ul type="disc(默认实心●/circle空心○/square方块■)">可以设置列表项目符号；

<ul>
 	<li> 香蕉 </li>
	<li> 苹果 </li>
	<li>容器:放啥都可以</li>
</ul>

有序列表（使用较少）
项目符号 <ol type="1/A/a/Ⅰ/ⅰ" >

<ol>
<li>中国</li>
<li>俄罗斯</li>
</ol>

自定义列表

	<dl>
		<dt>北京</dt>
		<dd>昌平区</dd>
		<dd>海淀区</dd>
	</dl>

表单——收集用户信息
- 表单标签——<input />

表单属性	值
Type	text/password/radio单选/checkbox复选/button普通按钮/submit提交按钮/reset重置按钮/image(图片按钮)/file(上传文件按钮)
value(提示内容)
name(表单的名字)
checked(默认选中项）	checked

label标签——绑定表单，点击相应范围光标会自动跳到输入位置；
label直接包含输入框：
<label> <input /> <label>
通过for 和id来控制：
<label for="abc"> <label>
<input id="abc"/>
文本域(通常用来写留言板)
<textarea> </textarea>
下拉列表——select
(一般不用select,在不同浏览器中显示不一致,且默认样式不方便修改)；

	<select>
		<option> 北京 </option>
		<option selected="selected"> 广州 </option>
		<option> 上海 </option>
		...
	</select>

表单域——<form> </form>中的信息会被提交给服务器
<form action="url地址" method=" " >

表单域属性	值
action	接收/处理表单数据的服务器url
method	表单提交方式get/post
name	区分页面中不同表单

！DAY❸ 引入CSS

CSS主要作用/目的：设置版面布局和外观样式

3种样式表引入方式
- 行内样式——内联样式
  <h1 style="属性1:值;属性2:值"> </h1>
- 内部样式表——内嵌在<head></head>标签中间
  <style>
  选择器(选择标签){
  属性1：值1
  属性2：值2
  }
  </style>
- 外部样式表——链入式(样式放在单独的.css文件中)
  <link rel="stylesheet" type="text/css" href="style.css" />
  stylesheet → 被引入的是一个样式文件；
  type→链接的文档类型(h5可省略)；
  href→链接的相对/绝对路径)；
CSS基础选择器
作用：找到特定的元素/标签，方便对其设置样式；
- CSS基础选择器
  - 标签选择器
  - 类选择器 ★用的最多/可重复调用；
  - id选择器 ★只能调用一次；
  - 通配符选择器 作用于所有标签/消耗资源(降低响应速度)；

标签选择器
<style>
	标签{
		属性1：值1
		属性2：值2
	}
</style>

类选择器
<style>
	.red{
		属性1：值1;
		属性2：值2;
	}
	.font{ font-size:100px }
</style>
★ 调用多个类选择器时:
<div class="red font"><div>

id选择器：
<style>
	# pink{
		属性1：值1
		属性2：值2
	}
</style>
(w3c规范中，相同id不能给2个及以上元素共同使用)；
调用时：<div id="pink"><div>

通配符选择器
<style>
* {
	属性1：值1
	属性2：值2
}
</style>

CSS文字文本样式
- 字体样式

字体★常用	英文名称	Unicode编码
宋体	Simsun	\5b8b\4f53
微软雅黑	Microsoft yahei	\5fae…

字体属性	值
font(字号)	em/px(相对单位 ★常用)；in/cm/mom/pt(绝对单位★不常用)
font-family(字体种类)	Simsun(宋体)；Microsoft yahei(微软雅黑)；
font-weight(字体粗细)	100～900；normal(正常★等同400)；bold(加粗★等同700)；
font-style(字体风格)	normal(正常)/italic(倾斜)

 font-family——字体种类
	.选择器{
		font-size:20px；
		font-family:Arial, "Microsoft yahei","黑体";
	}
(按顺序查找显示字体,中文加引号)
字体样式综合写法：font-style font-weight font-size/line-height font-family；
	.title{
		font:italic 700 20px "黑体"; ★(必须要写后俩)
	}

字体CSS外观属性
color	pink / #ff1234 / rgb( )
text-align(对齐方式)	left/center/right
line-height/行高	**px
text-indent(首行缩进)	2em ★2倍父级元素字体宽度
text-decoration(修饰)	none/underline下划线/blink闪烁

🛠 其他小工具
- 开发者工具
  F12 或 Ctrl+shift+i
- sublime快捷操作
  ！✚ tab键
  span3 ✚ tab键
  ul>li3 ✚ tab键 (父子级用>)
  div+p ✚ tab键 (生成正常非父子级标签)
  dl>dt+dd
  .demo ✚ tab键 (类名demo的div)
  井 demo ✚ tab键 (id为demo的div)
  .demo $* 10 ($ 自增,生成demo1-10的div);

！DAY❹ 导航栏案例(重点)

复合选择器
(目的：为了更精准地选择目标元素)；
(一般浏览器中，链接标签<a>有固定的样式，使用时一般单独指定样式)

选择器	样式
后代选择器★常用	.nav a{ }
子元素选择器	.nav>p { }； (只选择最近一级子元素)
交集选择器	p.red ★不常用； (p标签且p标签类名为red)
并集选择器★常用	p,span,.red { }
伪类选择器 ★常用	链接伪类 a:link(未访问的链接)/a:visited(已访问的链接)/a:hover(鼠标移到链接上/a:active(选定的链接)

标签显示模式
- 块级元素——div ★
  1. 独自占一行；
  2. 可以自由设置宽/高/内、外边距，(不设置宽度时，默认和父级一样)；
  3. 是一个容器盒子，里面可以放行内/块级元素；
  4. <h>、<p>、<dt>尽量放文字,不要放其他块级元素;
- 行内元素——span,a ★
  1. 一行可以显示多个元素；
  2. 设置宽/高无效，默认宽度跟着里面的内容走；
  3. 行内元素内,只能放文本或其他行内元素(不可放块级元素,如div)；
  4. 链接<a>🔗里面不能再放链接；
- 行内块元素——img,input,td
  1. 一行可以显示多个行内块元素 (中间会有缝隙)；
  2. 可以自由设置宽/高/内、外边距,(不设置默认为本身内容宽度)；
- 显示模式转换 ★display
  块→行内：display:inline;
  行内→块：display:block;
  块/行内→行内块：display:inline-block;
单行文本行高-垂直居中
height:50px; (盒子高度)
line-height:50px; (行高等于盒子高度,文本垂直居中)
(行高<盒子高度 → 垂直便上;
行高>盒子高度 → 垂直偏下;)
CSS背景设置

背景属性	值
background-color(背景颜色)	transparent(默认透明)/ 具体颜色；
background-image(背景图片)	url(路径); (★ 插入图片在盒子div内部;背景图片衬于盒子div中文字下层);(★ 背景图片会覆盖背景颜色);
background-repeat(背景平铺)	(默认平铺)/no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺)；
background-position(背景图片位置定位)	x坐标 y坐标；（可以用方位名词left/right/top/bottom/center；也可以用像素值px；也可以两种混用50px center)
background-color(背景颜色)	transparent(默认透明)/ 具体颜色；
background-attachment(背景附着)	scroll(背景图随内容滚动)/fixed(背景图固定)；
背景透明 ★CSS3属性	background:rgba(0,0,0,0.3) 透明度30%

CSS三大特性
- 层叠性
  离得近的样式会覆盖掉离得远的；
- 继承性
  子标签会继承父标签的属性；
  text- /font- /line- 这些元素开头的属性可以继承
- 优先级
  标签行内样式(1,0,0,0) > id选择器(0,1,0,0) > 类/伪类选择器(0,0,1,0) > 表内标签选择器(0,0,0,1)

！DAY❺ 盒子模型

边框——border

border边框属性
border-width	**px
border-style(边框样式)	none/solid(实线)/dashed(虚线)/dotted(点线)
border-color
border-collapse	边框折叠

内边距——padding
padding:10px(上下左右);
padding:10px(上下) 20px(左右);
padding:10px(上) 20px(左右) 30px(下);
padding-top/bottom/left/right: ;
★ (盒子有固定宽度，padding会撑开盒子；没有固定宽度不会撑开盒子)
外边距——margin
margin-top/bottom/left/right:**px
margin:0,auto; (在页面水平居中)
★ 嵌套的盒子会有塌陷
★ 相邻两个盒子垂直外边距，会合并取其中较大值；水平左右外边距不合并。
photoshop
测量像素高宽、吸取颜色
CSS3的两个特性
- 圆角
  border-radius: 50% (圆○)
  border-radius:**px; (椭圆,数值给高度的50%)
- 阴影
  box-shadow:10px(水平阴影) 20px(垂直阴影) 30px(模糊距离/虚实) 40px(阴影大小) # 000(阴影颜色) outset/inset(外/内阴影);

！DAY❻ CSS三种布局—盒子浮动

CSS三种布局

布局模式
普通流(标准流)	块级元素占一行，从上到下排列；行内元素按顺序从左到右排列；
浮动	多个块级盒子一行显示；
定位	将盒子定在浏览器某一位置；

浮动
选择器 {float: none/left/right};
浮动元素 display属性类似行内块，
★ 浮动元素漂浮在标准流的上层；
★ 浮动的子元素不会超过父盒子内边距;
★ 多个盒子中间的一个盒子浮动，只影响后面的盒子，不影响前面盒子标准流；
清除浮动的影响
★ 当子元素浮动且内容不确定，不能指定父级元素固定高度时，清除父级元素高度为0带来的影响；
★ 需要清除浮动的前提条件：父级没有高度/子盒子浮动了/影响下面的布局；
- 额外标签法(隔墙法)
  .clear { clear:both/none; }
  <div class=clear> </div> ★在浮动的最后一个盒子后面添加一个空盒子;
- 父级添加overflow属性
  在父级盒子css属性添加：overflow:hidden；
- 使用after伪元素清除浮动

★高版本浏览器清除浮动的样式；
	.clearfix:after { 
		content:" ";
		display:block;
		height:0;
		visibility:hidden;
		clear:both;
	}  
★IE6/7专用清除浮动的样式;
	.clearfix {
		*zoom:1;
	}

使用双伪元素清除浮动

	.clearfix:before
	.cleat:after { 
		content:" ";
		display:table;
	}
	.clearfix:after {
		clear:both;
	}  ★同上适用高版本浏览器;

Ps切片+cutterman插件导出图片

！DAY❼ 定位

4种定位分类&特点
- 静态定位
  元素默认定位方式(无定位)；
  布局时几乎不用；
- 相对定位——相对原来标准流位置
  (保留位置，不影响后面盒子)
  position:relative;
  top:100px;
  left:100px;
- 绝对定位——相对父级元素位置
  (不保留位置，后面盒子会移动)
  父元素没有定位，以浏览器为准;
  父元素有相对定位，以父元素为准；
- 固定定位——只认浏览器的可视窗口
常用的子绝父相布局
父元素占用位置，relative;
子元素不占用位置，浮在元素上方，absolute;
案例：淘宝轮播布局
定位的一些注意事项
- 绝对定位的盒子居中
  定位偏移 left:50%;
  margin-left:-100px;
- 堆叠顺序——z-index
  z-index 数值越大，盒子越靠上方；
  属性值相同，按书写顺序后来居上;
  z-index只应用于相对定位、绝对定位和固定定位的元素；
- 定位改变display属性
  display:inline-block ;
  如果div添加了float,absolute/relative属性，默认转换为行内块；
  也可以直接给盒子设置宽高；

！DAY❽ CSS高级技巧

元素显示与隐藏

属性	值
display 显示 (不保留位置)	block(块级元素)/inline(行内元素)/none(隐藏)
visibility 可见性 (保留位置)	inhert(继承父对象可见性)/visible(可见)/hidden(隐藏)
overflow 溢出	visible(完全可见)/hidden(超出部分隐藏)/scroll(滚动条)/auto(超出时显示滚动条

CSS用户界面样式——提高用户体验

属性	值
cursor 鼠标样式	default/pointer(小手)★/move(移动)/text(文本)/not-allowed
input-outline 轮廓线	none/no; (兼容不同,去除轮廓线)
textarea-resize 文本域防止拖拽	none;

垂直对齐(图片/表单和文字对齐)
Vertical-align：top/middle/bottom
溢出的文字隐藏
white-space:normal(自动换行)/nowrap(强制一行显示);
overflow:hidden;
text-overflow:clip(裁剪溢出文字)/ellipsis (超出显示省略号)
css精灵技术(sprite) ★
(为了减少服务器接收/发送请求的次数，提高加载速度)
精确测量盒子大小——添加背景图——通过背景坐标定位来显示需要的内容
滑动门
a设置背景左侧，span设置背景右侧；