HTML+CSS基础+web前端编码规范

时间:2022-11-19 08:42:47

一.HTML页面骨架

1.常用html标签:

文件标记标签:head、title、body

排版标记标签:p、br、hr、center、div

字体标记标签:stronger、b、i、u、H1、H2、H3、H4、H5、H6、font

清单标记标签:ol、li、ul、dl、dt、dd

表格标记标签:table、tr、td、th

表单标记标签:form、input、select、option、textarea

框架标记标签:iframe(页内框架)、frameset(设定框架)、frame

超链接标签:a

其它标签:embed(插入声音或影像)、img、link、meta、marquee(跑马灯)


2.html的头为<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Html5的头为<!DOCTYPE HTML>


 

二. CSS页面样式

1.css特点:丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩


2.css语法由三部分构成:选择器、属性和值  exp: selector{property: value}


3.选择器分类:

四大基本选择器:

  通配符选择器:*{property:value}

  标签选择器:标签名{property:value}

  id选择器:#id名{property: value}

  class选择器:class名{property: value}

  注:挂类法

类就是被重用的

一个标签可以有多个类

一个类可以用在多个标签上

三大复杂选择器:

  后代选择器格式:E F{property:value}

  交集选择器格式:EF{property:value} 如:div.classname{}

  并集选择器格式:E,F,G{property:value}

三个非常用选择器:(E、F为基本选择器)

  子元素选择器:E>F{property:value}选取符合F选择器的所有E子元素

  直接相邻选择器:E+F{property:value} 选取与紧随E元素的下一个符合F选择器的元素

  普通相邻选择器:E~F{property:value} 当前选中E元素后的所有符合F选择器的元素

伪类选择:(E、F为基本选择器)

  伪对象选择器主要是对当前选择的内容进行操作

  例:超链接选择::link、:visited、:hover、:active

  第一个子元素:E:first-child

伪对象/伪元素选择:(E、F为基本选择器)

  文字选择:E::first-letter、E::first-line

  插入内容:E::before、E::after


4.属性

背景:background-colorbackground-imagebackground-repeatbackground-position:center

文本:text-indenttext-alignword-spacingletter-spacingtext-decorationcolordirectionline-height

字体:font-familyfont-sizefont-stylefont-weight

列表:list-stylelist-style-imagelist-style-type

内边距:padding-toppadding-rightpadding-bottompadding-left

外边距:margin-topmargin-rightmargin-bottommargin-left

边框:borderborder-styleborder-widthborder-color

定位:positiontoprightbottomleftoverflowz-indexfloat

尺寸:widthheightmax-heightmax-widthmin-heightmin-width

 HTML+CSS基础+web前端编码规范

margin属性:

塌陷现象:通过margin设置外边距的时候,如果重叠,则取大值

Margin和padding如何区别使用:兄弟元素用margin,父子元素用padding

注意点:

如果父子元素设置内边距,用margin来做,margintop是会存在问题

解决方式1)给父盒子设置一个边框即可

2)添加overflow属性,值位hidden


5.css继承性

后代元素对文本样式设置的基本属性才能被继承(颜色color\样式text\字体font\行属性line

      所有关于对于盒子模型(divspan等)的属性设置(border、定位、布局)都不能被继承


6.样式层叠

  层叠性指的是样式的优先级,当产生冲突时以优先级高的为准

  权值高低:id>class>标签

  优先级区分:

  • 1 、看是否所有的选择器都选中了指定标签,如果全部选中就数权值
  • 2 、如果没有选中,则遵循就近原则
  • 3 、都选中同一级别,则看个体元素的权值
  注: ! i mportant 优先级最高, * 优先级最低

三.web前端编程规范

1html.命名规范:

①Html class名统一用小写的字母、数字和下划线的组合

②页面文件名命名规则:

首页统一取名为:index或者home,一般默认都是用index为首页命名

其他子页面统一用英文翻译或者中文拼音取名,但是不建议英文和中文拼音混合使用


2.图片文件命名:

放在页面首部的广告、装饰图等长方形大图取名:banner

标志性图片取名:log

有链接的图片取名:button

没有链接的标题图片取名:title

装饰用的照片取名:pic

在页面上连续出现、性质相同的栏目图片取名:menu


3.js命名规范

自定义js文件模块:模块.描述.js格式,如:check.js(校验)、login.js、regist.js、pop.js(跳转)

公用文件模块:commom.js或者basic.js

外部资源模块:Jquery.min.js、Jquery.js


4.文件目录规范

js:存放编写的js文件

css:存放编写的css文件

image:存放需要使用的图片文件

flash:存放需要使用的flash文件

media:存放需要使用的多媒体文件,包括视频和音频

library:存放一些库文件,包括js库和css库