Web前端基础——HTML

一 、HTML 概述

HTML : 超文本标记语言 HyperText markup language       

<marquee behavior="alternate">

<font size="50" color="blue">红尘来也来,去也去,总是一场空</font>

</marquee>

可以运行在本地,和服务端

1.html 标签一般成对出现 <标签名></标签名>

2.单独标签不需要配对的标签 <br /> <hr />

3.一个标签+其中的内容 = 一个html 元素

4.标签中可以有一个或多个属性 ,属性名=属性值,属性值可以用单引号或双引号引起来,也可以不引

5.标签名和属性名 大小写不敏感

不同的浏览器之间存在着不兼容的问题(一般情况下,我们验证火狐、谷歌和IE,这三大浏览器)

制定规范的,有 IETF(Internet 工程任务组) 和 w3c (www 联盟)两个组织, 当前正在使用的版本是 HTML 4.01。

 二、HTML 全局构架标签

<html>
    
    <head>
     //这里的内容通常不会在浏览器中显示
     //通常用来引入脚本文件(javascript 文件),或css样式等
    </head>
                
    <body>
    //这里的内容一般都是要显示在浏览器中
    </body>
                
</html>

body 标签的属性

1.Text :设置网页中文字的颜色
2.link:设置一般超链接文本的显示颜色
3.alink:鼠标移到超链接上时,超链接显示的颜色
4.vlink:访问过的超链接的颜色

颜色属性值有两种表示方式:

1.十六进制RGB 颜色码, 用一个 # 后跟六位16进制数 例如: #FF0000

2.HTML 的颜色常量名 :Red

--background:设定背景墙纸所用的图象文件,可以是gif 或 jpeg ,可以是绝对路径或相对路径 //background="lengtu.jpg" 后,平铺,挡住了背景

--bgcolor:背景色,当已设置 background时,它会失去作用,除非background有透明的地方

--leftmargin:网页显示画面与浏览器左边的间隙,单位为象素  //本例中原来文字和左边还有一定的空隙,但加上 leftmargin=0 后,直接贴上了

--topmargin:上面的

--class,name,id,style等属性

用myeclipse 新建一个网页,可以看到顶部有这样一句话

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

它称为文档类型定义语句

注释 <!--  -->

<!-- 这是注起来的内容 -->  使用这样的方式注掉的文本,浏览器在解释的时候将会忽略它们,但它们会被发送到客户端,查看源码是可以看到的

(注意,它不能嵌套)

html 编码:(前三个比较常用

&gt;   >

&lt;   <

&nbsp  空格

&amp   &

&quot  "        ”

三、格式标签

<p></p> //段落标签

<p  align="right">

这是一段文本
</p>

<p align=center  >
这是中间的一段文本

</p>

<p align="left">

这是下面的一段文本

</p>
<br /> //换行
<nobr></nobr>

<blockquote></blockquote> //缩进 在它中间加入的文本,会按缩进的形式显示 用它的结果好象设置了 leftmarign,实验发现是两端缩进

<center></center> //居中  html5中过时了

<marquee></marquee> //动感

<marquee behaiver=scroll direction =up></marquee>

behaiver: slider,alternate,scroll

direction:up ,down,left, right

<dl></dl> //创建列表

<dt></dt>

<dd></dd>

<dl>
   <dt>小标题</dt>
       <dd>aaa<dd>
       <dd>bbb<dd>
       <dd>ccc<dd>
                
    <dt>小标题</dt>
       <dd>xxx<dd>
       <dd>vvv<dd>
       <dd>bbb<dd>
                                                    
</dl>

<ol></ol> //有序列表  创建带有数字序号的列表 o 就是order的意思,它有 type =1,a 这类属性

<ol type="a">

<li>这是内容</li>

<li>这是内容</li>

<li>这是内容</li>

<li>这是内容</li>

</ol>

<ul></ul>//无序列表

<ul type="square">  //前面的小点变成方块了
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>  

 <li></li> 只能在上两者中使用.用于创建具体的列表项

<pre></pre> //预格式化 保持其中内容的格式不变            

<pre>
    这
     是   一
      段   
             文本
</pre>

四、文本标签

<h1>  ... <h6>   //h 标签,它具有语意的含义

<b> 粗体

<i> 斜体

<u> 下划线

<strong> 加重

<sub> 建立下标

<sup> 建立上标  //100 <sup> 2 </sup> 结果是100的平方的效果

<font> 字体,字号,颜色可以控制, 它有三个重要属性: face(字体名称 ) size (-7,7) color

<font size =-7 color=red face="楷体">AAA</font>  //htm5 废弃

五、超链接标签

<a href="http://www.baidu.com" >去百度</a>

href 属性,指向的是一个url

什么是URL :

在internate上的任何资源,包括html网页,图片及应用程序等等,它们都有一个能保证,其单一的命名方案,中文称为统一资源定位符。

href 属性,可以指向一个地址,也可是以是一个应用程序或zip压缩文件

<a> 中间的内容 </a> //这里 "中间的内容" 可以是文字,图片,flash,其他的html元素等

<a href="http://www.baidu.com" ><img src="lengtu.jpg" /></a>

说明: 中间的图片,默认会有一个边框,想把它去掉,可以在图象标签上加上  border=0 即可

<a href="mailto:aaa@sina.com?subject=我要留言" >ddd</a>

(前提是,你电脑要安装了mailto才可以哦)

超链接的 target 属性,可以指定目标页面的显示位置

<a href="main.html" target="_blank" >测试</a>  

超链接的定位功能

1) 要在定位的地方写上 <a name="pos1">  

2) 链接写为 <a href="#pos1" >测试</a>

<body>
              <a href="#p1">第一章</a>  
            <a href="#p2">第二章</a>
            <a href="#p3">第三章</a>
            
                <a name=p1 > //定位标记
                    <p>
                        第一章<br>
                        ...<br>
                        ...<br>
                            ...<br>
                        ...<br>
            
                    </p>
                    
                    <a name=p2> //定位标记
                    <p>
                        第二章<br>
                        ...<br>
                        ...<br>
                    </p>
                    
                    <a name=p3> //定位标记
                    <p>
                        第三章<br>
                        ...<br>
                        ...<br>
                    </p>

                </body>

附: 也可以定位到别的页面上

title.html

<a href="test.html#p1">第一章</a> 

<a href="test.html#p2">第二章</a>

<a href="test.html#p3">第三章</a>

超链接标签的 title属性

<ul>

<li><a href=""  title="哈尔滨昨日大风其实没刮起来" >哈尔滨昨日大风...</a></li>

<li><a href=""  title="杀人犯又出现在看守所里" >杀人犯又出现在...</a></li>

<li><a href="" >终于又出现了天鹅..</a></li>

</ul>

六、图象标签

<img src="lengtu.jpg" />

border //边框

alt  //图象不存在的时候,出现的文字 <img src="lengtu.jpg" title="鼠标滑过图片时出现的文字" alt="这是图片不存在的时候出现的文字" />

title //鼠标滑过图片时出现的文字

width

height

图文混排

<img src="lengtu.jpg" align="left" hspace="20" vspace="80">  

web 上支持的图片格式

Gif (图形交换格式) 最多能保存256 色,支持透明色,支持动画效果

Jpeg(联合图象专家组) 不支持透明,最多可支持1670 万种色彩

Png(网络可移植) 支持透明,不支持动画,最多1670万种

注意,png 在ie6 下,背影透明是有问题的,在ie6下它的透明就不透了

绝对路径:提供目标文档的完整主机名,路径信息,及文档全称

相对路径:从档前文档开始的路径

--  如当前文档和目标文档位置平行,则直接书写目标文档

--  如当前文档和目标文档所在的文件夹位置平行,则书写为文件夹名/目标文档名 //即html高一级

--  如果当前文档所在的文件夹和目标文档位置平行,则写为 ../目标文档名 //即图片高一级

根相对路径:从站点根目录开始的路径 以/开头

<hr />

size //线的上下宽度

noshade //不显示阴影 (只写上 noshade 即可)

color

width //线的左右宽度

七、图象地图

把一副图象分成多个区域,每个区域都指向不同的url地址,这些区域称为热点。

 <img src="lengtu.jpg" usemap="#mymap" />
    <map name="mymap">
            <area shape="rect" coords="0,0,50,50" href=a.html alt="aaa">
            <area shape="rect" coords="50,50,10,10" href=b.html alt="bbb">
          <area shape="circle" coords="80,100,60" href=b.html alt="bbb" alt="xxx">
    </map>

shape

rect 四边形

poly 多边形

circle 圆形 圆心坐标和半径

八、表格

表格,行列对齐,主要用来进行布局,表格中可以放入任意内容

<table></table>

属性

bgcolor //背景色

border //边框

bordercolor

bordercolorlight //边框明亮部的颜色 只有在border>0时才效

bordercolordark

cellspacing //表格单元格之间的距离  墙的厚度

cellpadding //表格中的内容,距边框的距离

width  //表格宽度,可以取百分比,或绝对的值

height

<table border=5 width=100% cellpadding=20 cellspacing=0 bordercolorlight=white  bordercolordark=black bgcolor="silver"  >
                                <tr>
                                        <td>数据</td><td>数据</td><td>数据</td>
                                </tr>
                                <tr>
                                        <td>数据</td><td>数据</td><td>数据</td>
                                </tr>    
                        </table>

 <tr></tr>  // 代表行

align 水平对齐  center ,left, right

valign 纵向对齐  top ,middle , bottom

bgcolor //这一级的设置,会覆盖上级的设置

<td></td>  //代表列

width   可以用绝对象素值,或表格的总宽度的百分比表示,注意是表格的总宽度的百分比;如果几个格加起来不到100%,则其余的部分会被平分;如果使用了百分比设置,要注意应该设置table 的width属性(为象素值或百分比)。

height

align

valign

colspan   //横向跨列

rowspan  //纵向跨行

nowrap 不换行

//下例:五行五列,只留外框,把中间的合并

      <table border=1 width=400  >
                                <tr>
                                        <td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td>
                                </tr>
                            
                               <tr>
                                        <td>数据</td><td rowspan="3" colspan="3">数据</td><td>数据</td>
                                </tr>
                            
                              <tr>
                                        <td>数据</td><td>数据</td>
                                </tr>
                            
                              <tr>
                                        <td>数据</td><td>数据</td>
                                </tr>
                            
                               <tr>
                                        <td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td>
                                </tr>
                        </table>

九、表格标签

细线表格

1) 让表格的border=0

2) 让它的cellspacing=1 

3) 设置表格背景色  bgcolor  为想要的颜色

4) 所有的tr 的 bgcolor 设为其他颜色

<table width=50% border=0 cellspacing=1 bgcolor=blue>
         <tr bgcolor="white"><td>数据</td><td>数据</td><td>数据</td></tr>
          <tr bgcolor="silver"><td>数据</td><td>数据</td><td>数据</td></tr>
</table>

如何让表格只显示边框 里面的格不显示?

rules 属性

<table rules= none>  //只留外框

<table rules="rows"> //只留外框和水平方向的线

表格还有一个frame 属性

可以控制哪些线显示,哪些隐藏

<table frame=above>

十、 帧标签

1) frameset

<frameset rows="20%,30%,*">
   <frame src="top.html" ></frame>
   <frame src="second.html"></frame>
   <frame src="down.html"></frame>
</frameset>

//frameset 不能嵌套在body标签中,但可以放在html标签中

border : 表示边框的宽度,如果0就看不到了

frameborder :

noresize="noresize" //不可以再调整大小

例子: 嵌套的 frameset   

 <frameset rows="20%,*"   >
    <frame src="top.html" frameborder=yes ></frame>
     <frameset cols="15%,*">
      <frame src="left.html"></frame>
      <frame src="welcome.html" ></frame>
      </frameset>
</frameset>

附: left.html       

<body>
    <ul>
     <li><a href="user_add.html" target="centerFrame" >用户添加</a></li>        
     <li><a href="#" >用户删除</a></li>        
     <li><a href="#" >原料管理</a></li>        
     <li><a href="#" >商品管理</a></li>        
    </ul>
</body>

超链接的target属性

_blank //在新窗口弹出

-self  //在本窗口弹出,是默认认值

_parent //在父窗口弹出

_top  //在顶层窗口弹出

2) <iframe>  //画中画 (iframetest.html)

<body>
   <table border=1 width=100% height=100%>
     <tr>
       <td width=15%><iframe src=left.html width=100% height=100%></iframe></td>    
       <td bgcolor="silver" width=1%></td>    //这行是打酱油的
       <td><iframe src=welcome.html name="centerFrame"  width=100% height=100% ></iframe ></td>
      </tr>
    </table>    
</body>

 //例子,另外一种布局方式

<frameset rows="20%,*">
   <frame src="top.html"></frame>
    <frame src="iframetest.html"></frame>
</frameset>

十一、表单标签

1)表单

<form ></form>

--action: 要提交到的 url ,可以为空,如果为空,则访问自已 //也可以用mailto

--method: 提交方式 (get/post)

get方式,提交的数据量不能大于1M,会对中文和空格进行url编码,提交的内容,会出现在浏览器地址栏里

post 方式,可以提交的数据量大,内容不会出现在地址栏里

--target 和超链的target的属性很象,指的是服务端返回的内容在哪儿显示

--title 鼠标在表单上任何一个位置停留的时候显示的文字

--enctype 指定浏览器用哪种编码方法把表单数据传送给www服务器,该属性有两种取值

application/x-www-form-urlencoded(默认值 递交表单数据时,会对表单数据中的特殊字符进行编码处理,将编码后的数据交给www服务器处理)和  multipart/form-data

2)表单元素

<input type="submit" vaue="提交"/>  //提交按钮,类似一个超链接,用来提交表单

<input type="reset" value="重置" />        //重置

<input type="text" name="userName" value="张三" size=200  maxlength=6 /> //文本框  size 表示框的大小,maxlength 表示最多能输入多少字符

--size

-- maxlength

-- value

-- readonly  ->readonly="readonly" 或 readonly, 文本框就不能编辑了,但焦点可以进入

-- disabled 表示禁用,禁用的元素,不能提到服务器上

<input type=checkbox />  //复选框

--checked

--value   //如果有多个复选框,提的时候,只提交上勾选的

//如果不写value,勾选上以后提交上去的值是 on
 <input type="radio" /> //如果多个想成为一组,则name相同

<input type="radio" value="1"  name="grade" /> 一班   
<input type="radio" value="2" name="grade" /> 二班   
<input type="radio" value="3"  name="grade"/> 三班 

<input type="hidden" > 隐藏域

<input type="image" src="lengtu.jpg" >  //图象提交按钮

<select name="school">  //下拉框

<option value="chengdong">成栋</option>

<option>黑大</option>  //如果不写value,则将中间的文本提交上去

<option>东方</option>

<option>guangshas</option>

</select>

-- size 属性  表示上面显示出几个

-- multiple

-- selected

<select name="group" >   //带分组的
  <optgroup label="第一组">
    <option>张三</option>
    <option>张四</option>
    <option>张五</option>
    <option>张六</option>
  </optgroup>
  <optgroup label="第二组">
    <option>张1三</option>
    <option>张2三</option>
    <option>张3三</option>
    <option>张4三</option>
  </optgroup>
</select>

<textarea cols=15 rows =5 ></textarea>  //文本域, 15列宽,5行高

<label>

//accesskey 是要用的快捷键

//for 后面跟的是要指向的元素的 id

 <label for= userName accesskey=u  >请输入用户名<u>u</u><label>    <input type=input name=userName id=userName>

<label for= password accesskey=p> 请输入密码<u>p</u><label><input type=input name=password id=password>

十二、meta标签

meta:

有两种类型的<meta>,用不同的属性名来划分,这两种属性名为  name 和 http-equiv

<meta name="某个设置值" content="对该值设置进行具体补充说明的信息">

<meta http-equiv="某个设置值" content="对该值进行具体的补充说明信息">

name 属性用于在网页中,加入一些关于网页的描述信息,例如,网页的关键字,网页的描述信息等。

http-equiv 属性用于在网页中加入一些关于网页的描述信息,例如:告诉浏览器是否缓存网页,使用什么样的字符集显示网页内容,隔多长时间自动刷新网页等。

消息头:除了内容,还在内容之间传一些叫消息头的内容给浏览器,使用查看源文件的方式是看不到的,相当于服务器传给浏览器的暗号信息。

Meta 标签的 name 属性设置

--Keywords ,告诉网络机器人,把content中的内容做为关键字

例如 <meta name=keywords content="vc,java">

--Description  ,告诉网络机器人,把content中的内容做为网页的简要描述

--Robots 告诉网络机器人 设置值 index(默认,可以检查和收录),noindex,follow(可以顺着这个页面的超链接接着往下查找),nofollow,all(前面两个都可以做),none

--Generator 编辑网页用的工具软件

--Author

--Copyright 版权

Meta 标签的http-equiv属性设置 (模拟响应消息头的)

-- Content-Type 说明网页文档内容的mime类型,及文本内容所使用的字符集编码,用于告诉浏览器使用某种字符集编码来查看这个网页的内容

普通的mime 类型,都是text/html 

<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

-- Refresh 模拟刷新的消息头

<meta http-equiv ="Refresh" content="1;url=http//:www.baidu.com">  //一秒钟以后刷的百度

有的时候,用户的留言可能就是上面的这语句,用来做恶作剧

-- Expires 用于设置网页的到期时间  //有的网页会被缓存,如果超过了这个头中指定的日期,浏览器必须到指定的地点下载这个网页和它配对的 content 的值应该是个时间格式的文本<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:20 GMT">将content设置为0 可以禁止浏览器使用缓存页面

--Pragma

可以禁止浏览器在本地计算机上缓存当前页面

这时content 的属性应设置为 no-cache

<meta http-equiv="Pragma" content="no-cache">

--Cache-Control

<meta http-equiv="Cache-Control" content="no-cache"> //http1.1中. 这个更可靠

--Page-Enter 和 Page-Exit 设置浏览器则进入或退出一个页面的时候,采用的显示效果 (旋入,转出等)

<meta http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">

--Windows-target 强制面页在某个窗口显示

例如,要防止自己的网页被别人当作一个frame页面调用,可以使用

<meta http-equiv="Windows-Target" content="_top">

十三、头元素

<head></head>

头元素是指位于 中间的元素

<title></title>标签对  //网页的显示标题

<base> 标签

用于指定网页中超链接的基准地址,以改变网页中所有使用相对地址的 URL 基准地址

<base href="http://www.baidu.com/test" target="_blank"

href 属性,指定了网页中抽有例用Http相对URL地址的基准地址,如果网页中有如<a href="index.htm"></a>这样的超链接,它不会再象没有使用<base>标签时那样表示当前网页相同目录下的index.html,而是指向了http://www.baidu.com/test/index.html页面,这里的target属性,是设置该网页中所有超链接的target,可以省去一个个设的麻烦。

<head>
 <base href="www.baidu.com" target="_blank">  
</head>
<body>
  <a href=top.html>aaaa<a>  //设置了base后,点它,相当于访问 www.baidu.com/top.html
</body>

<link> 标签

定了当前文档和另一个文档或资源之间的关系

href 属性,另一个文档或url资源的地址,必须

rel 与 rev 定义了link连接的两个资源之间的关系类型,这两个必须有一个

<link rel=stylsheet type=text/css href="url">

<link rel="Shortcut Icon" href="aaa.ico"> 自定义收藏下面的图标

title 说明两个链接的资源之关的关系,也可以是描述目标资源的字符串,可选

type 目标资源的mime类型,例如 Type=text/css Type=text/javascript

Media 说明目标资源被接收的介质或媒体 screen(缺省) pring, aural(扬声器) tty,电传打字机,tv 电视,all 所有

<script> ...

        <style> ...

十四、分区标签

<div></div>  //division  行级元素

<div> 可以组合其他元素,但本身不能嵌套在段落标签中,否则结果是不确定的

<span><span>  //块级元素

div 主要是用来定义区块  但span是文本级的元素,下面的例子显示出了他们的区别

 <div>aaa</div>bbb

<br>

<span>aaa</span>bbb
posted @ 2017-07-18 12:31  江河湖泊  阅读(483)  评论(0编辑  收藏  举报