html、css学习笔记

一、web前端标准

1.html结构标准
2.css样式标准
3.js行为标准

二、五大浏览器厂商

1.IE
2.谷歌
3.火狐
4.苹果
5.欧朋
注意：其他浏览器都用别人浏览器技术，只是更换了皮肤

三、html定义

• 超文本标记语言

四、第一个html页面

1. < !DOCTYPE html>描述当前文件的版本信息，如果没有详细说明就是5.0版本
2. < html> html文件
3. < head> 网页的头部
4. < meta charset=“utf-8”>国际编码，如果不写或写其他都会有问题
5. < title>此处内容网页标题< /title>
6. < body>我们自己写的所有带哪都在这里< /body>
   注意： html文档不能正常识别回车和换行，只能使用特定代码来实现；**标签、标记、节点、元素都是尖括号 <>。

五、标签语义化

• 在合适的地方使用合适的标签
  为什么要标签语义化：因为浏览器只识别标签
  标签语义化的好处：可以让搜索引擎

六、h和p标签

• h有1～6个，一次变小，代表标题
• p代表文章

七、biu和小伙伴

1. b代表加粗
2. strong也代表加粗，多了强调语义
3. u代表下划线
4. i代表倾斜
5. em也代表倾斜，多了强调语义
6. s代表删除线
7. del代表删除线，建议使用del代表；
   注意： strong代表特别强调，一篇文章不要出现多次，em代表一般强调，可以出现多次
   < br/>单标签代表一个换行回车

八、img图片标签

• img是一个单标签
  < img src=“图片名字” width=“宽度” height=“高度” alt=“1.图片未加载的提示文字2.网页阅读器可以读取这里的文字” title=“鼠标悬停时的提示文字”/>
  注意： 属性名=“属性值”
  空格不能丢，符号都要使用，英文状态下，属性设置不分先后
  宽高设置其中一个，另一个就等笔缩放

九、路径

• 相对路径
• 绝对路径

十、链接

• < a href=“地址”>文字< /a>
  注意: 如果要跳转线上地址，必须加http://本地连接直接写路径
  空链接写法：1.###；2.javascript；3.javascript：void(0);
  锚点链接：点击之后可以跳转到页面的对应位置；给想跳转到的位置写一个id属性，a标签中的href属性写#id的值

十一、表单

• 所有用户输入的内容都要放在form标签中
• action 代表数据给哪个后台程序
• method 代表传输数据的方法：1.post（加密）2.get（不加密）

<form action="" method="">
	昵称：<input="text" name="a1" id="a2" placeholder="请输入用户名" autofocus="autofocus" ><br/>
	密码：<input type="password" /><br />
	性别：<input type="radio" name="sex" id="nan" checked="checked"/><label for="nan">男</label>
				<input type="radio" name="sex" id="nv" /><label for="nv">女</label>
				<input type="radio" name="sex" id="mi" /><label for="baomi">保密</label> <br />
	地址：
		<select name="">
			<option >哈哈</option>
			<option >嘎嘎</option>
			<option >呵呵</option>
			<option selected="selected">嘿嘿</option>
		</select>
		<select name="">
				<optgroup label="北京">
					<option>海淀</option>
					<option>昌平</option>
					<option>顺义</option>
					<option>朝阳</option>
				</optgroup>
				<optgroup label="深圳">
					<option>罗湖区</option>
					<option>福田区</option>
					<option selected="selected">宝山区</option>
				</optgroup>
		</select><br />
		介绍：
		<textarea rows="10" cols="10" placeholder="请输入文字"></textarea><br />
		你的爱好是：
		<input type="checkbox" id="cs" checked="checked"/><label for="cs">测试</label>
		<input type="checkbox" id="cf"/><label for="cf">吃饭</label>
		<input type="checkbox" id="sj"/><label for="sj">睡觉</label><br />
		<input type="submit" value="提交" />
		<input type="reset" value="重置" />
		<input type="button" value="按钮" />
		<button type="button">按钮</button>
</form>

input 代表输入框标签
type 类型决定输入框类型
1.type=“text” 代表普通输入框
2.type="password"代表密码输入框

• name属性 代表这个输入框的名字
• id 代表输入框的编号
• value 代表默认输入框（不符合用户体验，应换placeholder）
  注意： placeholder属性ie低版本不兼容，但是我们实际工作中还要使用。因为渐强（随着浏览器版本的提升，效果越来越好），优雅降级（在高版本浏览器显示效果好的前提下，保证了低版本浏览器不错乱）
  浏览器–F12–仿真–文档模式

一、单选按钮

• Type=”radio”
  注意：如果想让文字点击能切换，要加label标签，并且设置for属性和对应的单选按钮id属性值一致；必须给这一组单选按钮添加name值，才可以实现单选效果；

/设置默认选中状态，要给单选按钮添加checked="checked"；
<input type="radio" name="sex" id="nan" checked="checked"/><label for="nan">男</label>

二、下拉菜单

• Select 和 option 的组合；
  注意：如果想设置多组下拉框菜单，需要添加一个optgroup标签，并设置label属性作为提示文字；如果想设置默认选中状态，需要给对应的option 添加selected属性；

三、文本域

• textarea标签来设置多行文字（文本域）；
  注意：不能使用cols、rows来设置宽高，要用width、height来设置；它可以使用placeholder来设置默认文字

四、多选框（复选框）

• 它的使用方法和细节与单选框一致；

五、按钮

• 1.提交按钮type=”submit”
  注意：必须设置value属性，否则浏览器之间有兼容性问题；
• 2.提交按钮type=”reset”
  注意：必须设置value属性，否则浏览器之间有兼容性问题；恢复刷新后的默认状态
• 3.type=”button”或都可以
  用户体验细节：刷新后想让第一个输入框默认选中状态，给输入框设置autofocus=”autofocus”属性；

六、CSS

• Css：样式表、级联样式表、层叠样式表

七、css基础语法

• css代码写在style标签里面，放在head标签中；大括号中写键值对语法
  例子：属性名1:属性值1；属性名2：属性值2；
  Color：文字颜色
  font-family：字体
  font-size：字号
  text-indent：首行缩进 单位是em代表一个文字的间距
  text-align：文字对齐方式，默认是left，还可以设置center居中，right居右
  Background：背景颜色属性

八、标签选择器

• 直接在css语法中写标签的名字就可以选中对应的标签；
  Div 代表大盒子（容器 存放内容的）
  Span 代表小盒子 （容器 存放内容的）

九、id和class选择器

• 1.id选择器语法：#名字 特点：不能重复，也不能一个人拥有多个
• 2.class类选择器语法：.名字 特点：可以重复使用，一个人可以有多个类名（好像是人的称号一样）
  总结：今后class类选择器使用频率高于id选择器；

十一、css的引入方式

• 1.内嵌式：
  style标签放在head中
  优点：方便课上案例的书写：电商网站的首页必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快一些；
  缺点：html和css代码没有实现分离，不方便修改；
• 2.外链式：
  通过link放在head标签中，把外部的css文件引入到html文件中
  优点：实现代码分离，方便修改和管理；
  缺点：运行速度比内嵌慢
• 3.行内式：
  这种形式一定不要用，它会让代码量变得非常庞大，不方便修改

十二、基础选择器权重

• Id>class>标签

一、后代选择器

• Div span 用空格来连接，代表的意思是找到后代元素
  注意：后代可以是儿子、儿子的儿子…

二、并集、并列选择器

• Div,span,h1,.span1,#span2
  用逗号连接选择器，代表元素同时被选中

三、标签指定式、指定标签式

• Div.类名
  注意：标签和类名之间没有空格

四、高级权重对比

• 1.引入方式对比：
  外链和内嵌权重相同，先写的会被后写的覆盖
  内嵌权重最大，如果想覆盖它，就只能给样式添加！important来把权重提高
• 2.复合选择器权重
  id是100斤
  class类名是10斤
  标签是1斤
• 综合起来大的权重就高，如果权重一样，先写的被后写的覆盖

五、css常用属性

• Font—weight 设置字体粗细 normal 代表不加粗 bold代表加粗
  Font—style 设置字体倾斜 italic 代表倾斜 normal 代表不倾斜
  ext-decoration 设置线 none 无线 underline 下划线 overline 上划线
  line-through 贯穿线（删除线）
  Word-break：break-all 强制换行
  ：hover 伪类写法 代表鼠标悬停状态的样式

六、行高属性

• 一行文字的结束到上一行文字结束的间距：line-height

七、边框属性

div{
      width: 200px; height: 200px; background: pink; /* border: 10px solid green; */
			border-bottom: 1px solid aqua; border-top: 5px solid aquamarine;
			border-left: 10px dashed black;border-right: 15px dashed chocolate;}

• border：1px solid red；
  
  粗细 实线 颜色
  虚线：dashed 这样设置是四个方向相同；
  如果想单独设置某个方向只需要：border-left（right、top、bottom）
  注意：边框属性只有实线和虚线是没有兼容性问题的，其他方式的线都会有不同程度的兼容问题，如果程序员使用了，一定要报错！

八、css盒子模型的组成

• 宽高+边框+内边距（内容和边框的距离）+外边距（盒子和盒子之间的距离）=盒子模型的组成

九、html5新标签

• head 头部
• nav 导航
• aside 侧导航
• article 文章块
• footer 底部
  注意：这些html5新标签只能使用在手机网站的书写，可以提升搜索引擎对网站的优化，不能用在PC（电脑）端网站，因为ie低版本不识别这些新标签。