ＨＴＭＬ基础教程

一、html中换行和空格
1、回车直接按在html中不能正确识别，必须要使用代码来实现：


2、空格在html中多个也只识别一个，也要使用代码来实现：
  一个空格

二、标题标签
h标签代表标题，它只有1到6，依次减小效果；

三、段落标签和标签语义化概念
段落标签p，只要是段落文章，就应该使用p标签包裹，这样做可以让百度等搜索引擎，把我们的页面排名靠前，这种在合适的地方使用合适标签我们称作标签语义化

四、强调标签
strong代表特别强调，在一遍文章中最多出现两次；超过就可以提bug给程序员；
em代表一般强调，可以出现多次
五、删除线标签
s和del都可以实现删除线效果，今后要使用del代替s；因为w3c组织已经强调过s已经过时了；

六、代码的注释
定义：被注释后的代码不会被浏览器显示，只是给程序员自己的提醒；
使用：选中想要注释的哪一行代码， ctrl+?
注意：在项目上线之前，一定要让程序员删除所有的注释代码，因为这些代码对于用户的打开速度有影响；

七、大盒子和小盒子标签
在实际场景中，如果某些内容没有语义化的要求，我们还想找到它并设置样式，就必需使用没有语义的标签来包裹才能选中变样式；
大盒子 div 独占一行
小盒子 span 一行可以放多个

八、图片标签
img当做网页中插入图片的标签；
Img标签的常用属性有：
1、src 里面的值写的就是要显示哪一张图片
2、width 设置图片宽度
3、height 设置图片高度
注意：宽度和高度设置其中一个，另外一个就会等比例缩放
4、title 设置鼠标悬停后的提示文字

5、alt 当图片没有正常加载出来，才显示出里面的文字；里面的文字可以被网页阅读器读出来；

九、路径
1、相对路径：相对于当前文件去找其它文件的方式
2、绝对路径：文件在电脑中的路径地址
注意:在前端中绝对路径是禁止使用的，因为没有可扩展性

十、超链接
定义：点击后可以进行页面的跳转
点击超链接后，是否按照用户的要求打开的（当前、新窗口）
空链接：点击后不进行任何跳转，因为此时还不清楚具体跳转到哪里；
注意：在项目上线之前，要检查超链接中是否有一个井号来实现的，如果有要给程序员提bug，因为此空链接会让页面返回顶部，给用户造成困扰；

十一、浏览器测试细节
五大浏览器厂商：
1、Ie
2、谷歌
3、火狐
4、欧朋
5、苹果
因为以上几个浏览器都有自己的技术；其它的浏览器都是用这几个浏览器的技术，换一套皮肤出现的，所以不能算五大；
注意：测试使用ie、谷歌、火狐来进行项目的测试；苹果和欧朋浏览器如果用户强制要求测试我们再测；
Ie浏览器切换版本：
打开浏览器后，f12，找到仿真按钮，点击文档模式，从中选择想要使用的版本；如果你当前的ie版本不是11，可以去微软官网下载最新版本；

十二、表单
form标签中的内容就是所有要提交给后台的数据；
form中action属性代表的意思是，把数据传递给哪一个后台程序来解决；
form中的method属性代表传递数据时候的方法，get代表明文发送，post代表进行了简单的加密后传送
普通文本框 注意此提醒文字，在ie低版本中无法识别，这不属于bug范畴，属于用户体验的细节;
密码框 测试细节：输入内容，显示点点点
单选框 测试细节：1、是否单选效果 2、点击文字是否可以切换 3、是否有默认选中的状态
复选框 测试细节：1、点击文字是否可以切换 2、根据需求设置默认选中状态
下拉菜单 测试细节：1、内容是否与需求一致 2、顺序是否一致 3、默认选中是否一致
文本域 可以输入多行文字的输入框；测试细节：1、宽度高度要在三大浏览器中查看是否一致；2、谷歌浏览器右下角的拖拽按钮是否禁用；
按钮 重置按钮的作用是点击后，让表单中的数据恢复到默认状态；
提交按钮作用是把表单数据提交给后台程序；
测试细节：要在三大浏览器中查看按钮的提示文字是否一致；

十三、css语法
1、基础语法规则：
(1) 写一个style标签放在head标签的最后位置
(2) 在style标签中写的代码就是css的语法规则
标签名字{属性名:属性值;属性名2:属性值2;…}
例：
div{color:red; font-size:50px;}
解释：color 设置文字颜色
font-size 设置文字大小，千万别忘了最后的px单位，代表像素；
css名字：层叠样式表、级联样式表、css样式表；就是给网页设置样式的一种语法

十四、标签选择器
利用css语法在html中找到想要设置的标签；
标签选择器就是用标签的名字来进行选择的一种方式；
语法：
标签名{xxx}

十五、代码调试工具的使用
浏览器f12可以打开调试工具界面；选择最左边的elements选项，可以查看代码中的html；点选其中想要调试的html标签，右侧就会出现此标签对应的css代码；

十六、id选择器
在html中找到对应的id中的值，使用css来进行匹配；
语法：
#p1{xxxx}

xx

注意：id在css使用过程中别忘了加井号； 命名规则： 1、不能使用数字开头 2、不能使用中文 3、不能使用除了下划线、中划线之外的符号 4、尽量起名字的时候做到见名知意

十七、类class选择器
在html中找到class对应的值来进行css的匹配
语法：
.bz{xxx}

xx

注意：class可以在一个标签中出现多个，就好比人有多个称号；class可以重复性的出现在其它标签中，好比班长不只是一个人；对比id选择器，id好像人的身份证号，绝对不能重复出现，一个人也只能有一组身份证号；id的命名在同一个html中不能重复，id在一个标签中，只能有一组； 结论：今后使用的时候尽量使用class类选择器，因为id禁忌太多；

十八、继承性
给祖先标签设置的样式，会继承给后代标签；

十九、覆盖性
在权重相同的前提下，先写的会被后写的样式覆盖掉

二十、优先级
同一个标签设置css样式的时候：权重关系如下
Id选择器 > class类选择器 > 标签选择器
100斤 10斤 1斤
注意：继承过来的css属性权重是最低的

优先级继承性联合：

二十一、后代选择器
使用空格来表示找到后代的内容；
语法：
div span{ 找到div后从它的后代中再找到span；儿子、孙子、重孙子都算后代 }

二十二、并列、并集选择器
使用逗号来把想要设置的标签选中；
语法：
div,span,.span1,#p1{ 把用逗号连接的所有选择器选中的标签都设置样式 }
注意：后代选择器和并列选择器都可以使用标签、类、id来配合
标记、标签、元素都是一个意思；

二十三、高级权重对比
Id当做100 class当做10 标签当做1
在针对同一个目标进行的css样式书写的时候，谁的计算数值高，最后就听谁的

二十四、css的引入方式（书写位置）
1、内嵌式css：Css代码写在html文件中；
2、外链式css：css代码和html代码实现分离；
语法：
link标签来实现在html中把外部的css文件引入到当前html中；
操作细节：保存css文件要放在html文件的附近；css文件中不允许出现尖括号（html代码）
外链式方便程序员修改代码，是程序员主要写css代码的形式；
注意：内嵌css必须在电商网站的首页使用，目的是加快网页的加载速度，提升用户体验；
3、行内式css：把css代码直接写在html标签的身上；不容易修改，今后遇到此种写法，一定要提醒程序员；

二十五、css引入方式的权重对比
（内嵌 = 外链式） < 行内
!important出现在css中代表，此段代码提升权限到最高

二十六、了解边框属性
程序员可以设置上下左右四个方向的边框样式；实线和虚线（下图中上下）是没有兼容性问题的；其它的形式都要提醒程序员修改；
设计师管边框叫“描边”

二十七、了解html5的音视频标签
在pc端网站测试的时候需要关注视频音频在ie低版本中的处理效果，而手机端就不用管ie了，因为根本没有ie手机版；
• 说出css基础选择器的权重关系（标签、类、id）X
• 说出css内嵌式、外链式的应用场景X
• 掌握并列、并集选择器的语法X
• 掌握后代选择器的语法X
• 掌握选择器权重的计算方法X