Web前端基础—

一、HTML 概述

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

<marqueebehavior="alternate"><fontsize="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 这类属性

<oltype="a"><li>这是内容</li><li>这是内容</li><li>这是内容</li><li>这是内容</li></ol>

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

<ultype="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 废弃

五、超链接标签

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

href 属性,指向的是一个url

什么是URL :

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

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

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

<ahref="http://www.baidu.com" ><imgsrc="lengtu.jpg" /></a>

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

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

（前提是，你电脑要安装了mailto才可以哦）

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

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

超链接的定位功能

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

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

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

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

title.html<ahref="test.html#p1">第一章</a> <ahref="test.html#p2">第二章</a><ahref="test.html#p3">第三章</a>

超链接标签的 title属性

<ul><li><ahref=""title="哈尔滨昨日大风其实没刮起来" >哈尔滨昨日大风...</a></li><li><ahref=""title="杀人犯又出现在看守所里" >杀人犯又出现在...</a></li><li><ahref="" >终于又出现了天鹅..</a></li></ul>

六、图象标签

border //边框

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

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

width

height

图文混排

<imgsrc="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地址,这些区域称为热点。

 <imgsrc="lengtu.jpg"usemap="#mymap" /><mapname="mymap"><areashape="rect"coords="0,0,50,50"href=a.htmlalt="aaa"><areashape="rect"coords="50,50,10,10"href=b.htmlalt="bbb"><areashape="circle"coords="80,100,60"href=b.htmlalt="bbb"alt="xxx"></map>

shape

rect 四边形

poly 多边形

circle 圆形圆心坐标和半径

八、表格

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

属性

bgcolor //背景色

border //边框

bordercolor

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

bordercolordark

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

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

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

height

<tableborder=5width=100%cellpadding=20cellspacing=0bordercolorlight=whitebordercolordark=blackbgcolor="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 不换行

//下例:五行五列,只留外框,把中间的合并<tableborder=1width=400><tr><td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td></tr><tr><td>数据</td><tdrowspan="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 设为其他颜色

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

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

rules 属性

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

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

表格还有一个frame 属性

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

<tableframe=above>

十、帧标签

1) frameset

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

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

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

frameborder :

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

例子: 嵌套的 frameset

 <framesetrows="20%,*"   ><framesrc="top.html"frameborder=yes></frame><framesetcols="15%,*"><framesrc="left.html"></frame><framesrc="welcome.html" ></frame></frameset>
</frameset>

附: left.html

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

超链接的target属性

_blank //在新窗口弹出

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

_parent //在父窗口弹出

_top //在顶层窗口弹出

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

<body><tableborder=1width=100%height=100%><tr><tdwidth=15%><iframesrc=left.htmlwidth=100%height=100%></iframe></td>    <tdbgcolor="silver"width=1%></td>//这行是打酱油的<td><iframesrc=welcome.htmlname="centerFrame"width=100%height=100%></iframe></td></tr></table>
</body>

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

<framesetrows="20%,*"><framesrc="top.html"></frame><framesrc="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相同

<inputtype="radio"value="1"name="grade" />一班<inputtype="radio"value="2"name="grade" />二班<inputtype="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

<selectname="group" >//带分组的<optgrouplabel="第一组"><option>张三</option><option>张四</option><option>张五</option><option>张六</option></optgroup><optgrouplabel="第二组"><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

 <labelfor= userNameaccesskey=u>请输入用户名<u>u</u><label>    <inputtype=inputname=userNameid=userName><labelfor= passwordaccesskey=p> 请输入密码<u>p</u><label><inputtype=inputname=passwordid=password>

十二、meta标签

meta：

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

<metaname="某个设置值"content="对该值设置进行具体补充说明的信息"><metahttp-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><basehref="www.baidu.com"target="_blank">
</head>
<body><ahref=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

转载于:https://www.cnblogs.com/1693977889zz/p/7199876.html

Web前端基础——HTML相关推荐

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
html web前端基础(1)
html web前端基础(1) 本人暂时所用的学习软件是HB(HBuilder) 所以下方代码展示也是在HB所呈现的什么是web : 1.典型的应用: 1.C / S ***** client: 客 ...
html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
WEB前端基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
Web 前端基础知识面试大全
目录一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
web前端基础-HTML篇
目录 web前端介绍网站开发的概述 (1)文本 (2)图像 (3)超链接 (4)表单静态网页动态网页 HTML的基本概念超文本传输协议统一资源定位符超文本标记语言 HTML基本格式 (1) ...

Web前端基础——HTML

Web前端基础——HTML相关推荐

最新文章

热门文章