技术岗面试基础知识复习——HTML、CSS

web前端标准：html结构标准、css样式标准、js行为标准。

HTML超文本标记语言

属性设置语法 ： 属性 =‘属性值’

标题语义化

• 在合适的地方使用合适的标签。
• 为什么要标签语义化：因为浏览器只认识标签，没有语音语调，所以想要表达的东西只能使用对应的标签来表示。
• 标签语义化的好处：语义化做的好，可以让搜索引擎把你的网站排名更靠前。

常用标签

• h标签 有6个，从1-6依次变小，表示文章标题（h1,h2…）
• p标签 表示文章段落
• b标签 表示加粗、strong标签代表加强，多了强调的语义
• u标签 表示下划线
• i标签 表示倾斜、em标签也代表倾斜，多了强调语义
• s、del标签 表示删除线（s写法已过时），建议用del代替s

注意：strong代表特别强调，一篇文章中不要出现多次；em代表一般强调，可以出现多次。

• < br />单标签，代表一个换行

html5的新标签

header 头部、nav 导航、aside 侧导航、article 文章块、footer 底部

注意：这些html5新标签只能用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在pc端网站，因为ie低版本不能识别这些新标签。

img图片单标签

< img src=”图片地址和名称” width=”宽度” height=”高度” alt=”图片未加载时的提醒文字；网页阅读器可以读取这里的文字” title=”鼠标悬停时的提示文字”/>

注意：定义多个属性之间必须加空格，属性设置不分先后。

链接

1、语法：< a href=”地址”>文字< /a>

注意：如果跳转到线上地址，必须加http://，跳转到本地文件直接写路径

2、空链接（不知道跳转到哪里的时候）写法3种：1、### 2、javascript:; 3、javascript:void(0);

3、锚点链接：点击之后可以跳转到页面的指定位置。（先给想跳转到的位置写一个id属性，然后a标签中的href属性值写#id的值）

表单

1、所有用户输入的内容都要放在form标签中；

2、< form action=”数据给哪个后台程序” method=”传输数据的方法（post：加密，get:不加密）” name=”此输入框的名字” id=”此输入框的id编号” value=”此输入框的默认值（不符合用户体验，应该将value换成placeholder）”>

注意：placeholder属性在ie低版本中不兼容，但是实际工作中还要使用，不提bug，因为渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（高版本浏览器显示效果好的前提下，保证了低版本浏览器不错乱）

1、< input type=”” /> input代表输入框标签（单标签）,type属性值决定这个输入框的类型（type=”text” 代表普通输入框；type=”password” 代表密码输入框；）

按钮

1、< input type=”submit” /> 提交按钮，默认值是“提交”，必须设置value属性，否则浏览器之间有兼容性问题。

2、< input type=”reset” /> 充值按钮，默认值是“重置”，必须设置value属性，否则浏览器之间有兼容性问题。

3、按钮：< input type=”button” /> 或者直接用button标签也可以

细节：如果想刷新后让第一个输入框默认为选中状态，用户不用自行点击该输入框就可以直接输入，需要给该输入框设置autofocus=”autofocus”属性.

单选按钮

< input type=”radio”/>
注意：
如果想实现点击单选按钮后的文字也能选中该按钮，要给文字加lable标签，并设置for属性，其属性值和对应的单选按钮的id属性值一致；（< input type=”radio” id=”nan”/> < lable for=”nan”>男< /lable>）

如果同时多个单选按钮，但一次只能选中一个，则必须给该组单选按钮全部添加name属性，且赋予一样的属性值；

如果要设置默认选中按钮，要给单选按钮添加checked=”checked”。

多选框（复选框）

< input type=”checkbox” /> 使用方法及细节与单选按钮一样

下拉菜单

select标签和option标签的组合（多个option标签代表下拉菜单中的多个可选值）

注意：如果设置多组下拉菜单，需要在option外面添加一个optgroup标签，并设置lable属性值为提示文字（表示该组下拉菜单下的所有可选值都属于“提示文字”这组）；如果要设置默认选中状态，需要在对应的option标签中添加selected=”selected”属性。

文本域（输入框）

textarea标签 设置多行文本（不能使用cols,rows来设置宽高，要用width和height；可以使用placeholder来设置默认提示文字）

列表

1. 无序列表标签

无序列表一般应用在布局中的新闻标题列表和文章标题列表，它是含有语义的，标签结构如下：
< ul>
 < li>列表标题一</ li>
 < li>列表标题二< /li>
 < li>列表标题三< /li>
< /ul>

list-style 设置无序列表中的小圆点，一般把它设为"无"，如：list-style:none

表格元素及相关样式

1、< table>标签：声明一个表格
2、< tr>标签：定义表格中的一行
3、< td>和< th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

 colspan 设置单元格水平合并，设置值是数值
 rowspan 设置单元格垂直合并，设置值是数值
border-collapse 设置表格的边线合并，如：border-collapse:collapse;

CSS

属性设置语法： 属性:属性值;

css代码写在head标签的style标签中（< style type=”text/css”> </ style>），想要设置的样式以属性设置语法写到大括号中（如 p{color:red;}）

常用属性：

color:颜色;
font-size:字号;
font-family:字体;
text-indent:首行缩进，单位是em，代表缩进一个文字;
text-align:文字对齐方式（left默认，right,center）;
background:背景色;
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

常用文字属性：

font-weight:设置字体粗细（normal不加粗，bold加粗）
font-style:设置字体倾斜（italic倾斜，normal不倾斜）
text-decoration:设置线（none没有线 underline下划线 overunder 上划线 line-through贯穿线（删除线））
word-break:break-all（强制换行，如果是文字会自动换行，但是字母不会，需要设置强制换行）
:hover{} 伪类写法，用来设置指定标签处鼠标悬停状态的样式（如给a标签设置鼠标悬停样式 a:hover{color:green}）
line-height:设置行高

边框属性：

border:1px solid red; (粗细 实线 颜色) 四个方向样式相同

若单独设置某个边框的样式，使用border-left、border-right、border-top、border-bottom

注意：边框属性只有实线和虚线(dashed)是不存在兼容性问题的，其他样式的线一定要报错

盒子模型组成：

宽高+边框+内边距（内容和边框的距离）+外边距（盒子跟盒子的距离）

内边距 padding:10px(四个边的内边距一样)，padding:1px 2px 3px 4px(顺时针（上右下左）分别设置四个边的内边距)

外边距 margin（语法与padding一样）

标签选择器：

直接在css语法中写标签的名字就可以选中对应的标签，为其设置样式
div{} 表示大盒子（容器 存放内容 默认一个div占一行）
span{} 表示小盒子（容器 存放内容 一行可以多个span 一个span不占一行）

id和class选择器:

id选择器语法：#id属性值 (id值不能重复，一个标签只能有一个id)
class选择器语法： . class属性值（class值可以重复，一个标签可以有多个class值，用空格分开即可）

class选择器使用频率高于id选择器

选择器权重：id>class>标签（即优先显示id选择器的样式）

后代选择器：

用空格来连接，给后代元素标签也设置相同的样式（如在div标签中嵌套span标签，那么div span{}表示给div的后代span也设置相同的样式；注：后代可以是儿子，儿子的儿子…）

并集（并列选择器）：

用逗号连接，给同级标签设置相同的样式（如div,span,h1{}）

标签指定式（指定标签式）：

如：div.class名（指定div中具有该class名的标签，为其设置样式）

复合选择器权重：

id选择器认为100斤，class类名认为10斤，标签选择器认为1斤。综合起来显示权重最高的样式，如果权重一样，后写的样式会覆盖先写的样式

高级权重对比：

1、引入方式对比：外链css样式与内嵌样式权重相同，先写的会被后写的覆盖

2、行内嵌权重最大，如果想覆盖它，只能给其余想要权重低些的样式加!important，使其权重最大（如{color:red!important;}）

CSS引入方式：

1、内嵌式：style标签放在head标签中（优点：电商网站的首页必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快一些；缺点：html和css代码没有实现分离，不方便修改）

2、外链式：在head标签中，通过link单标签，把外部的css文件引入到html文件中（href属性设置文件路径）（优点：实现了代码分离，方便修改和管理；缺点：运行速度比内嵌式稍慢）

3、行内式：一定不用