首页 > > 网页制作 > css >

Web前端基础——HTML

2018-06-24 01:38:32来源：未知阅读 ()

一、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>

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

</p>

这是下面的一段文本

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

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

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

<marquee></marquee> //动感

behaiver: slider,alternate,scroll

direction:up ,down,left, right

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

<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>

六、图象标签

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 圆形圆心坐标和半径

八、表格

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

属性

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)表单

--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>黑大</option> //如果不写value,则将中间的文本提交上去

<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

-- Refresh 模拟刷新的消息头

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

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

--Pragma

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

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

--Cache-Control

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

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

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

十三、头元素

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

<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连接的两个资源之间的关系类型,这两个必须有一个

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：纯 CSS 实现波浪效果！

下一篇：用CSS开启硬件加速来提高网站性能

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签