Css-基础

频繁使用标签属性处理

*{margin:0;padding:0}//所有标签清除margin，padding值
a{text-decoration:none;}//清除下划线
li{list-style:none}//清除li默认
img{display:block}//图片块元素
input{float:left}//不同浏览器表单高度不一样
cursor:pointer//手壮鼠标

Web标准：结构(xhtml)==表现(css)==行为（js）缺一不可

网站实现过程

注册域名(网址)->租用空间（网址文件）->网站建设（html）->网站推广（SEO）->网站维护（更新..网站编辑）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        </body>
</html>

 

常用的 DOCTYPE 声明 

HTML 5 
<!DOCTYPE html> 
HTML 4.01 Strict 
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
HTML 4.01 Transitional 
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

HTML 4.01 Frameset 
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
XHTML 1.0 Strict 
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

xmlns 属性在 XHTML 中是必需的。不过即使你的 XHTML 文档没有使用此属性，W3C 的验证器也不会报错。因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，所以，即使你没有包含它，此值也会被添加到 <html> 标签中。 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
声明内容编码类型：为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312（简体中文）或utf-8（国际编码），制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。 


<meta http-equiv="Content-Language" content="zh-CN" /> 
//声明网页采用的语言 



<meta name="author" content="Hello" /> 
//声明作者名字 



<meta name="copyright" content="" /> 
//声明版权信息 



<meta name="keywords" content="" /> 
//声明网页关键字：关键字中间用英文逗号隔开 



<meta name="description" content="meta是html语言head区的一个辅助性标签。" /> 
//声明对网站的简单描述信息 
后面两行主要是被百度这些搜索网站检索的时候用的，对SEO非常重要！ 
前端开发的时候，如果不指定文件类型，你的HTML不是合法的HTML，并且大部分浏览器会用“怪癖模式（quirks mode）”来处理页面，这意味着浏览器认为你自己也不知道究竟做什么，并且按浏览器自己的方式来处理你的代码。你能是个HTML大师，在地球上打遍天下无敌手，或你的HTML能无瑕疵，CSS能非常完美，但如果没有文件声明，或错误的文件声明，你的网页和一个短视的，独眼的长臂猿婴儿十分艰难地堆砌起来的没两样。 

      要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。 
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。 

标准模式中IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。 
头部声明是HTML页面非常重要的一部分，有些标签在4.0的声明不起作用，在html5可以，所以，在前端编写代码的时候，注意头部声明的选择和兼容性控制。

 

<img src="目标文件路径·及全称" alt='图片替换文本' title='鼠标悬停图片标题'/>
<a href="http://网址/">超链接</a>

target="_blank" ===新窗口打开

target="_self"===当前窗口打开

可加title鼠标悬停显示

<table border="边框" cellspacing="单元格间距" cellpadding="单元格空隙" width="" height="">
    <tr>//行
        <th>Header</th>//列
    </tr>
</table>

水平对齐方式:align=‘left/center/right’

垂直对齐方式:valign='top/middle/bottom'

列合并:colspan='列数'

行合并:rowspan='行数'

<form action="路径、网址" method="get/post请求" name="">
    <input type="submit" value=""/>
</form>

表单框 ：

　　placeholder框内提示字体样式为灰色，输入内容后消失

<input type="text" name="" id="" value=""/>

单行文本框

<input type="password" name="" id="" value="" />

密码框 

<input type="submit" name="" id="" value="" />
<button></button>

提交按钮

<input type="reset" name="" id="" value="" />

重置按钮

<select name="">
    <option value=""></option>
</select>

下拉框

<textarea name="" rows="" cols=""></textarea>

多行文本框

<input type="checkbox" name="" id="" value="" />

复选框 disabled属性禁用此框   checked默认

<input type="radio" name="" id="" value="" />

单选框 多个单选框的情况下 name属性值要一样

posted @ 2019-04-29 10:25  起啥名嘞  阅读(93)  评论(0)  编辑  收藏  举报