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来设置默认提示文字)
列表
- 无序列表标签
无序列表一般应用在布局中的新闻标题列表和文章标题列表,它是含有语义的,标签结构如下:
< 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、行内式:一定不用