00HTML
一.概述
超文本标记语言(hyper text markup language),html是一门描述性的语言.
基本语法:
<标签> 内容 </标签>
** 在一个网页中,html是网页的结构,css是网页的外观,js是网页的行为。
二.文档结构
1.文档声明doctype
文档声明用于识别html的版本,声明引用dtd(文档类型定义),规定了标记语言的规则。
/////严格模式
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
/////过渡模式
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
/////html5版,简洁通用,没有兼容问题
<!doctype html>
** 注意事项:
在没有文档声明时,ie浏览器就会进入怪异模式,也就是,浏览器会根据自己的标准去解释文档,如果加上了声明,就会按照w3c标准解释。
在ie盒子模型中,w/h部分包含了border和padding,也就是:w/h = content + padding+border;
2.根元素html
限定文档的开始和结束,包含两个部分<head>,<body>
<html xmlns="http://www.w3.org/1999/xhtml">,其中的vmlns用于声明该网页使用的是w3c组织的xhtml标准。
3.头元素head
定义文档的头部,是头部元素的容器。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
//////<meta>元信息标签
<meta>标签的格式是名称/值对的形式:content中的属性内容以 , 隔开
<meta 属性=“属性值” content=”属性内容”>
meta属性:
name类型
设定传递给浏览器和搜索引擎的信息
格式:<meta name=”” content=””>
http-equiv类型
类似http协议,传递给浏览器引擎,用于帮助浏览器正确和精确的显示网页内容
格式:<meta http-equiv=”” content=””>
charset
用于定义文档的字符编码
<meta charset="utf-8">
//////<title>
用于定义html文件的标题信息,即当前文件在浏览器中浏览时有浏览器窗口的标题栏上显示的文字
////////<base>
* <base href="" /> 定义页面链接默认基础定位
<base>标签的href属性是为整个页面定义所有链接的基础定位,主要作用是为了确保文档中的所有相对定位url都可以被分解成正确的文档地址,使文档本身被移动或重命名的情况下也可以正确的解析,当这些元素进行跳转时,都会基于当前目录加上这个默认的url(相对路径的情况下)再加上自己的href属性值来跳转。
** <base target="_blank"/> 定义页面链接默认打开方式,base通过target属性告诉浏览器如何打开页面。
4.身元素body
为html文件的主体标记,即只有在标记中编辑的网页对象才可以在浏览器窗口中显示,该标记具有多个标记属性,其所有的标记属性基本上都是用来控制当前html文件的页面属性
5.外联标签
//////<link>
link标签通常放置在一个网页的头部标签head标签内的用于链接外部样式表,外部资源。
** 链接外部样式表
<link rel="stylesheet" type="text/css" href="mycss.css" />
** ico图标引入,加载一个图标作为网站链接头部的图标。
<link rel="icon" type="image/x-icon" href="favicon.ico" />
/************************ link方式和import方式引入css文件的区别 ***********************/
1.link是xhtml标签,除了加载css外,还可以定义rss等其他事务;@import属于css范畴,只能加载css。
2.link引用css时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
3.link是xhtml标签,无兼容问题;@import是在css2.1提出的,低版本的浏览器不支持(ie5-)。
4.link支持使用javascript控制dom去改变样式;而@import不支持。
//////<script>
* 引用脚本文件
在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以html或xhtml的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的内容。
** 在页面放置的位置
浏览器从同一个域名并发载入的资源是有限制的,所以当把脚本添加到head元素中时,首先载入的将是脚本,其次才是文档的剩余部分。引入了javascript的script元素标签放在head中可能会使得浏览器延迟页面剩余部分的显示,主要是因为脚本中可能会调用document.write方法修改dcument对象。
· 利于维护:把所有的javascript的文件放在一起,不仅可以不触及html代码,而且更有利于开发者进行代码的编写和维护。
· 加速浏览:如果有多个html页面引用了同一个javascript外部文件,这个文件只会加载一次(缓存),也就是说可以加快页面的加载速度。
· 安全性:引用外部文件,如果用户查看html代码,将不会看到javascript的代码,比写在标签内安全性更高一些。
*****<noscript>
字面意思,no-script,没有script,也就是浏览器不支持javascript时,<noscript>标签中内容才会被显示,
- 浏览器不支持脚本;
- 浏览器支持脚本,但是javascript被禁用;
以上两条符合任何一个,<noscript>标签内的内容都会被显示。
上图页面,给用户了一个信息,当浏览器不支持或禁用javascript是才会被显示,否则用户将永远不会看到,并且不会影响页面其他元素的显示。
6.注释
html注释:<!-- -->
css注释 :/* */
js注释 ://
三.相关概念
1.自闭和标签
大多数标签都是成对出现的,比如<div></div>由开始标签和结束标签进行包裹。而有些标签,比如<br />,<hr />都没有结束标签,不能对其他元素进行包裹,所以只能定义它自身的属性。
四.基本标签
1.段落文字标签
i.标题标签<h1>~<h6>
一个页面只能有一个<h1>标签
ii.段落标签<p>
iii.文本标签
<span>
<b>和<strong>
一般使用<strong>用于着重强调
<i>和<em>
一般使用<em>用于着重强调
<sup>和<sub>
iv.换行标签<br />
v.水平线标签<hr />
vi.分区标签<div>
主要用于分区,在html文档中划分区域,提供结构和背景。
div标签可以放入<body>标签的任何内部标签
vii.特殊符号
2.图片标签
<img src="图片地址" alt="替换文字" title=”提示文字” /> 图片(单标签)
alt属性是替换名字,是给搜索引擎抓取使用,当图片显示不出来时,就会显示出alt的内容;
title 属性是提示文字,当鼠标移到图片上的时候会显示出来,大部分的标签都会有这个属性
3.超链接标签
a标签可以用做链接、锚点、或者链接下载文件
<a href="#" target=””></a>
target 链接打开方式
_blank 新窗口
_self 当前窗口
*在herf内将文件放上,该a标签就会成为下载链接
*在herf内放入某一个id,格式是#id ,就会成为一个锚点链接,可以实现页面内跳转的功能
4.列表标签
//////ol有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
* ol要和li配合使用
* ol的子元素必须是li,不能有其他元素
//////ul无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
* ul要和li配合使用
* ul的子元素必须是li,不能有其他元素
///////dl定义列表
<dl>
<dt>定义标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
5.表格标签
//////完整结构
//////表格样式重置
th,td{padding:0;} 重置单元格默认填充
table{border-collapse:collapse;} 单元格间隙合并
//////合并单元格
colspan 规定单元格可横跨的列数、合并行
rowspan 规定单元格可横跨的行数、合并列
******注意事项*******
a.不要给table,th,td以外的表格标签加样式,否则容易出现兼容问题
b.单元格默认平分table的宽度
c.th里面的内容默认加粗、上下左右居中
d.td里面的内容默认上下居中,左对齐
e.table决定了整个表格的宽度
f.table里面的宽度会被转换成百分比
g.表格里面的每一列都应该加宽度
h.表格同一 竖列继承最大宽度
i.表格同一 行继承最大高度
6.表单标签
表单(form):用于收集用户的数据,提交给服务器上某个页面,该页面可以对表单中提交的数据进行保存或查询(由php/jsp/aspx来担当)。
action:指定表单数据的处理页面(动态页面)
method:get/post,前者把请求数据追加在地址栏查询字符串中(有长度限制);后者把数据以单独的数据包发送给服务器(无长度限制、且可用于文件上传)
/* method:get/post;
* get:把请求的数据追加在地址栏查询字符串中,有长度的限制1024=1k,
* post:把数据以单独的数据包发送给服务器,无长度限制,且可以用于文件上
*/
enctype:encodedtype表单中提交的数据的编码类型,可取值:
text/plain表单数据不做任何编码直接上传
application/x-www-form-urlencoded把表单中的数据(中文、特殊符号)编码后再上传,只能对字符进行编码
multipart/form-data以一种特殊的格式上传字符/字节数据
***1.样式重置
form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0;padding:0; resize:none;(禁用用户调整尺寸)
overflow:hidden;outline:none;(取消焦点框)}
***2.基本结构
<form action=”提交地址” method=”提交方式get/post” target=”打开方式”>
文本框
<!--文本框-->
<input type=" text" name="" value="" />
<input type=”text” id=”id” name=”” disabled=”输入域禁用,不能改,不能提交”readonly=”输入域只读,不能改,能提交” >单行文本框</input>
<!--密码文本框-->
<input type=" password" name="" value="" />
选项按钮
<!--单选按钮 指定同一个name达到单选的效果 用label将input元素和文字包裹起来,达到点击文字也能够选中相应的选择按钮,不兼容ie6-->
<input type=" radio" name="" value="" />
<!--兼容ie6-->
<input type=" radio" name="" id="id" /><label for=”id”>文字</label>
<!--复选按钮 disabled属性,不可选中-->
<input type=" checkbox " name="" value="" />
按钮
<!--提交按钮-->
<input type=" submit " name="" value="" />
<!--重置按钮 -->
<input type=" reset " name="" value="" />
<!--普通按钮-->
<input type=" button " name="" value="" />
图片域
<!--图片按钮-->
<in put type=" image " name="" value="" />
文件域
<!--上传文件 各个浏览器样式都不太一样,很难做到兼容-->
<input type=" file " name="" value="" />
隐藏域
<!--隐藏-->
<input type=" hidden " name="" value="" />
<!-- 在表单中添加一个隐藏字段,用户看不见,但是可以提交 -->
<input type=”hidden” name=” (必需)隐藏字段的名” value=” (必需)隐藏字段的值” />
下拉列表
<select> <!--下拉菜单:对高度的支持不兼容-->
<option selected>选项1 默认显示</option>
<option>选项2</option>
</select>
文本域
<textarea>文本域:默认滚动条在各个浏览器下不兼容</textarea>
</form>
***3.注意
- button按钮:
在表单中涉及到提交数据到服务器,所以通常使用<input type=”button”>方式,只有不涉及提交数据的情况下才会使用<button>
需要注意的是:对于需要与服务器进行交互的表单元素,必须都要放置在form标签中,而对于不需要交互的就不需要了。
- submit提交按钮的相关问题
使用的是旧的盒子模型,宽度包括padding和border
如果要设置左右的padding的话,ie6,7会表现比你设置的要宽,没有正确解析,添加overflow:visible就可以解决这个问题
只有ie支持line-height,火狐和谷歌都有一个你没有办法覆写的line-height,所以别对submit使用这个line-height了
在ie6,7下表单任意元素激活时,submit btn都会出现个黑色的边框,除非你设置border为none
如果设置了border我们会发现默认的渐变背景没有了;第二个问题是默认背景火狐解析的有点问题,偏上,然后文字也不是那么垂直居中对齐,还是有几个像素的差别,而其他浏览器是完美的垂直居中对齐,根本就不需要设置上下的padding和line-height,所以我们应该对火狐打bug,在这里我设置其padding-bottom为3px就可以了
- 下拉列表:
select: **用户不可输入,只能选
<select name="" size="显示行数" multiple="多选(shift/ctrl) ">
<optgroup label="选项组的名称">
<option value=" " select选择>选项</option>
<option value=" ">选项</option>
</optgroup>
</select> **用户不可输入,只能选
多行文本输入域:
<textarea name=”” rows=”行数” cols=“列数” disabled=”输入域禁用,不能改,不能提交”readonly=”输入域只读,不能改,能提交”>
多行文本输入域值 没有value属性,只能输入纯文本
</textarea>
如果想要输入“富文本编辑框”—可以使用第三方工具实现(kindedtitor / fckedtior / cuteeditor)
(1)表单中使用<input type=”file” name=””/>选择文件
(2)表单必须使用post提交 method=”post”
(3)表单的编码类型必须声明为 enctype=”multipart/form-data”
<input type=”file” name=””></input>
五.其他
1.iframe引入其他页面
浮动框架,就是在一个页面嵌入一个或多个子页面
<iframe src=”引入的页面地址” style=“w h frameboder=”0”去掉边框 scrolling=”no”去掉滑动条>当页面不显示时显示的文字</iframe>
2.插入多媒体
在线音频和视频文件以及flash使用<embed>标签
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>
3.网页背景音乐
<bgsound src="背景音乐的地址" loop="播放次数">
只适用于ie浏览器,在firefox等中未必适用。
loop="2"表示重复2次,loop="infinite"表示无限次循环播放,也可以使用loop="-1"表示无限次循环播放。
使用bgsound设置背景音乐,当窗口最小化时就自动暂停播放,窗口恢复时,继续播放。
上一篇: Android开发之图片压缩实现方法分析
下一篇: 可以查询系统用户名sid的vbs