前端开发总结
Jerry Hu
2012-4-1
HTML(Hyper Text MarkUp Language)
HTML结构
<html>
<head>
<title>HTML语言的基本结构</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/" rel="stylesheet" type="text/css" />
<script src="../js/jquery/jquery-" type="text/javascript"></script>
</head>
<body>
HTML(Hyper Text MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种 语言。
<script type="text/javascript">
();
</script>
</body>
</html>
HTML 代码规范
标签一定闭合,以免结构混乱
标签的嵌套顺序,虽然没有严格的规定好嵌套顺序,但是浏览器解析时会依据这个规则,且不同浏览器解析的规则不一样,总之严格执行此规则开发是浏览器解析规则是不会有差异的,
块级元素:div,table,td,dl,ul,ol
行级元素:p,li,span,dd,dt,h1--h6,hr
行内元素:a,label,span,br,img,em,b,strong,i,u,sup,sub,input
标签的合理使用,会给开发带来便利,(center ,form)
前台代码开发思维的转变,要与后台功能相结合
尽量不要给标签设置属性值,让css做这件事情,做到标签与属性分离,(table可以例外)
<html>
<body>
<h1>
<p>
<div>
<img/>
<a>
<h1>
<h2>
<p>
<em>
<html>
</html>
<body>
</body>
< h1>University of Alicante</h1>
<p>
<img src="" />
<a href="/">University of Alicante</a>
</p>
<div>
<h1>Department of Software puting
Systems</h1>
<h2>Teaching Staff</h2>
</div>
<head></head>
<p>
The Deparment of Software puting
Systems teaches the following courses:
<em>Programming, Object-Oriented Programming,
Web Programming, and Databases and Software
Engineering </em>
</p>
HTML 范例
<html>
<body>
<h1>
<p>
<div>
<img/>
<a>
<h1>
<h2>
<p>
<em>
HTML 范例
CSS(Cascading Style Sheets )
三种css引用方式
使用“link(外部样式单)排版样式” <head><link rel="stylesheet" href="" type="text/css“
media="screen" /></head>
使用Embed(嵌入样式单)排版样式:
<head><style type="text/css" media="screen“>
p {text-indent: 10pt}</style></head>
使用"inline(行内样式单)排版样式" <p style="text-indent: 10pt">indented paragraph</p>
使用“import(输入的外部式样单)”--适用于IE浏览器
***@;
盒子模型
选择器
Id “#demo”
Class “.demo ”
优先级
Css写法
. P {padding:10 5 5 10px;}//建议使用,易读、css文件小
. P {
padding-top:10px;
padding-right:5px;
padding-bottom:5px;
padding-left:10px;
margin-right:-5px;//不建议使用负数
} //不建议
前端html+css开发简介 来自淘豆网m.daumloan.com转载请标明出处.
