您的位置：首页 > 编程语言 > Java开发

【JavaWeb前传系列】第01章_HTML入门

2012-11-26 13:22 169 查看

【JavaWeb前传系列】第01章_HTML入门——v512工作室 编辑：玄玉

img表格文本Cpoyright
font表单字符我的博客
head嵌入列表v512工作室
body框架超链接中科院新科海学校
HTML文件(HyperText Markup Language)后缀为".html"或".htm"且标记大小写不敏感

HTML是互联网应用的最基础技术，它关注的是数据的显示，它的核心作用是信息的布局和显示

HTML中所有标记都是固定好了的。若再增加新的标记，必须要重新制定新的标准才可以并且要让浏览器识别

在一个标记或元素开始的部分，在它的名称之后，右尖括号之前。可以加入相应的属性信息，它分为两部分：属性名="属性值"

浏览器有很好的容错性。若属性值两边不加双引号，一般也能够被解析

插入视频(仅限Internet Explorer浏览器)：<img dynsrc="v512.avi">

背景音乐(仅限Internet Explorer浏览器)：<bgsound src="OneILove.wma" loop=3>

水平分隔线标记：<hr>

换行标记：<br>

分段标记：<p>段落文字</p>

注释标记：<!--注释文字-->

正文标题：<h1></h1>...<h6></h6>(该标记自动提供了换行功能)

举例：<hr color="#00ff00" size="2" width="50%" align="center">

说明：该水平线颜色为#00ff00，粗细为2个像素，长度为占浏览器屏幕的整个宽度的50%(也可设为绝对的像素)

常用文本格式标记：

<b>：粗体(bold)

<i>：斜体(italic)

<del>：文字中部划线表示删除(delete)

<ins>：文字下划线表示填充内容(insert)

<sub>：下标。如：<p>下标:p<sub>1</sub><br></p>

<sup>：上标。如：<p>上标:-2<sup>7</sup>~2<sup>7</sup>-1</p>

<pre>：原样显示，保留空格和换行符和制表位等(preformatted)

(HTML默认多个空格被当作一个空格来处理。换行符被当作一个空格空出来。table制表键将被过滤掉)

特殊字符显示：(空格符,<,>,&,"等)(HTML中可使用字符实体(Character Entities)表示拉丁字符)

&<实体名>;如<

&<实体编号>;如<
显示效果符号说明实体名表示实体编号表示
空格符  
<小于号<<
>大于号>>
&符号&&&
"双引号""
ⓒ版权符号©©
ⓟ注册商标®®
×乘号××
÷除号÷÷
<body>标记的主要属性：

text：设置文档正文的文字颜色。如text="#FF6666"

bgcolor：设置页面背景颜色。如bgcolor="#CCFFCC"

background：设置页面背景图片。如background="images/bg.gif"

bgproperties="fixed"：使背景图片不随着滚动条的滚动而滚动

<font>标记的属性：(用于设置字体的类型、大小和颜色等)

face：设置字体类型。如<font face="宋体">文字内容</font>

size：设置字体大小。如<font size="2">文字内容</font>(若不设置的话，默认字体大小差不多为3号字)

color：设置字体颜色。如<font color="#FF0000">文字内容</font>

注意：若<font>内部嵌有<font1>，那么被<font1>标记的字显示时以<font1>属性为准。内部<font1>的优先级更高

<head>主要子标记(子元素)：

<title>：设置窗口标题。如<title>V512工作室图书信息</title>

<link>：建立到外部文件(主要是CSS外部样式表)的链接

如<link rel="stylesheet" href="mystyle01.css" type="text/css">

(rel是指链接的成分，这里是stylesheet即样式表)

<style>：设置网页的内部样式表。如<style type="text/css">body {background-color:white;color:red;}</style>

<meta>：设置当前页面的元数据信息。元数据：有关当前页面的说明性信息。可以给搜索引擎去搜索，不会直接显示

如<meta name="description" content="HTML实用教程">(当前页面的描述、说明信息)

<meta name="keywords" content="HTML,v512工作室,教程">(当前页面的关键字)

<meta name="author" content="zlg">(该作者的名字)

<meta http-equiv="Content-Type" content="text/html;charset=GBK">(当前页面的内容及编码方式)

<meta http-equiv="refresh" content="5;url=http://www.v512.com">

(实现定时刷新。这里设定5秒后自动刷新并跳转到url指定的页面)

(url部分也可以省略，那么就变成5秒后自动刷新并重新显示当前页面)

(如股票页面，就设定了自动刷新功能)

<img>标记的属性：(用于在HTML页面中插入图片)(主体即src：<img src="youyou.png">)

alt：在不支持图片显示的浏览器中显示该值(alternate text)。如<img src="youyou.png" alt="悠悠的照片">

align：设置图片水平和垂直对齐方式。如<img src="youyou.png" align="left">

(top:向上对齐。middle:垂直居中。bottom:底端对齐)

(从专业的角度来讲，不提倡使用这种方式，而是使用样式表)

border：设置图片边框线条宽度。如<img src=youyou.png border="2">(缺省是没有边框的)

width/height：设置图片的大小。如<img src="youyou.png" width="200" height="30%">

(百分比是相对浏览器屏幕的百分比)(若不设置该属性，默认显示图片原始大小)

超链接<a>标记：(主体即href：<a href="http://www.512.com">v512工作室</a>)

target：在指定窗口或新窗口中显示链接页面(这是个可选属性)

如：target="_blank"(弹出新窗口。下划线可加可不加)

name：设置锚(anchor)标记，实现超链接跳转到页面指定位置

如<a name="p1">文本内容</a>

<a href="#p1">跳转到当前页面(锚标记p1)指定的位置</a>

(也可在其他超链接中指定这个位置：#再加上锚标记名，就能直接跳转到该标记的位置)

(若要跳转到其他页面的锚标记位置，可类似此处输入：href="href02.html#p3"即可)

title：设置超链接的说明文字(当鼠标悬停在超链接上时显示)

如<a href="youyou.png" title="点击可以看到我的照片">悠悠</a>

链接到email地址：<a href="mailto:service@v512.com">联系我们</a>

图片作为超链接：<a href="..."><img src="youyou.png"></a>

表格的相关标记：

<table>、<tr>、<td>、<th>、<caption>(即为：表格、行、列、定义第一行单元格(文本加粗)、标题)

width/height：指定表格或某单元格的宽度/高度(可以是绝对的像素值或占当前窗体宽度或高度的比例)

border：指定边框的宽度(默认无边框)

bordercolor：指定边框的颜色

bgcolor：指定表格或某一单元格的背景色

background：指定表格或某一单元格个背景图片

align：设置单元格对齐方式(缺省为左对齐)

(表格的对齐方式是相对整个窗体而言，单元格的对齐方式是指单元格中文本的对齐方式)

cellspacing：设置单元格间距(缺省为1像素)

cellpadding：设置单元格内容与单元格边界之间的距离

colspan/rowspan：实现跨列/跨行合并单元格的效果

(跨行实际是从该行开始一直向下合并相应的行数。跨列则不会影响其他列)

注意：表格中<caption>只能出现一次且默认居中显示。

若已定义<table bgcolor="#FFCCCC">且格中某单元格也定义了该格的背景色，则以最内层定义为准

表单及其组件：(用于收集和提交用户输入的信息)

基本语法格式：<form action="http://www.v512.com/bbs/login.jsp" method="post">

用户名：<input type="text" name="username"><br>

密码：<input type="password" name="psw"><br>

<input type="submit" value="提交">

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

</form>

说明：action属性标明表单中的信息将被提交到哪一个服务器端的动态应用程序(页面)

method属性标明表单中的信息上传到服务器端的传送方式

get：提交的信息量有限制(比较小)，传送速度快，但保密性差，直接随着目标页面的url一起发送出去

post：与get完全相反。若上传文件则只能用post方式提交。它单独的进行传送，保密性强

组件：单行文本输入框<input type="text" name="age" value="0">

密码输入框<input type="password" name="psw">

单选按钮<input type="radio" name="gender" value="male" checked>男

<input type="radio" name="gender" value="female">女

复选框<input type="checkbox" name="fruit" value="apple">苹果<br>

<input type="checkbox" name="fruit" value="grap" checked>葡萄<br>

<input type="checkbox" name="fruit" value="orange">桔子<br>

下拉列表框<select name="fruit" size="1" multiple>(multiple指定是否允许多选)

<option value="apple">苹果(默认显示第一条)

<option value="grap" selected>葡萄

<option value="orange">桔子

</select>

多行文本输入框<textarea name="info" cols="40" rows="5">请留言：</textarea>

提交按钮<input type="submit" name="submit1" value="提交">(点击时表单中内容被提交到action所标明的目标页面)

重置按钮<input type="reset" value"重置">(清除输入的内容，恢复到原始页面打开时的状态)

(原有的默认值也将出现。不是完全清除)

图片提交按钮<input type="image" src="done.gif" alt="提交" name="submit2">

(alt指定当图片不存在、不可用、不支持图片显示的时候的替代文字)

隐藏文本框<input type="hidden" name="role" value="guest">(可以隐藏提交的参数名和值。常用作标记信息)

文件组件<form action="k.jsp" enctype="multipart/form-data" method="post">

<input type="file" name="f1">(显示时会自动包含一个文本框和一个浏览按钮)

...... (当上传文件时可以使用它。它会随着表单的提交上传到服务器端)

</form>

(若使用该file组件，必须在它所在的form元素中添加该标记：enctype="multipart/form-data")

(这时才能支持多种格式的数据，才能上传文件，否则是不支持的)

(而此时的method也必须是"post"。因为这时数据量比较大，get方式会导致数据的丢失)

嵌入标记：

<applet>：用于在页面中嵌入Java Applet

<embed>：用于在页面中嵌入多媒体文件，但用户计算机上需事先安装好相应的处理程序

常用嵌入文档格式：mp3,mid,wma,asf,asx,rm,ra,ram,swf,avi

标记用法：<embed src="v512.avi"(标明要嵌入的资源的url，可以是相对路径，也可以是绝对路径)

autostart="true"(标明是否自动启动或是否自动播放所嵌入的多媒体文件)

loop="true"(标明是否循环。值为true或false或数字，若值为数字则标明循环多少次后停止。值为true即无限循环)

hidden="false"(影响后面几个属性。标明自动启动的多媒体播放程序是否隐藏控制面板)

controls="CONSOLE"(通常使用默认值就可以了。标明使用标准的控制面板格式)

width="200"(设定多媒体文件(主要是它的控制面板)在当前页面的显示区的宽度和高度)

height="50"(针对rm,ra,ram格式的音频文件，需在<embed>中添加：type="audio/x-pn-realaudio-plugin")

>

页面框架：使用框架(Frame)可以将一个浏览器窗口分割成多个窗格，以同时显示多个不同页面

行分割：<html>(frameset:框架集。rows:水平分割)

<frameset rows="25%,*">(这里是分割成两段，第一段的高度占整个窗体的25%，剩下的都是第二段)

<frame src="a.html">(指定第一个窗格显示第一个页面)

<frame src="b.html">(指定剩下的另一个窗格显示第一个页面)

</frameset>

</html>

列分割：<html>(这里就是分割成了三段)(若屏幕分辨率是800*600，那么*号并不提倡改为100)

<frameset cols="300,400,*" border="0">(窗格边框线条的宽度这里设为了0像素。许多专业页面都设置border为0)

<frame name="myframe1" noresize src="a.html">(noresize：指定窗格的大小不能进行尺寸的重置)

<frame name="myframe2" src="b.html">(即不能拖动该分格的界限来改变窗格的大小)

<frame name="myframe3" src="c.html">(name属性可选)

</frameset>(当需要超链接指定显示到其他窗格中，就可以用约定好的name来标识窗格)

</html>

混合分割和页面导航：如<a href="a.html" target="contentFrame">条目一</a>

可在页面中通过超链接指定链接的目标页面到目标窗格中显示，只要给出窗格的名字就可以了

列表(List)：罗列显示多个条目(列表条目内容不适合太长。若长篇大论，则不适合列表，而该分段了)

有序列表(Ordered List)：<ol type="a"><!--可选属性type用于设置列表符号-->

<li>列表条目1</li> <!--type可取："1"、"a"、"A"、"i"、"I"-->(缺省为1、2、3、4)

<li>列表条目2</li>

......

</ol>

无序列表(Unordered List)：<ul type="disc"> <!--可选属性type用于设置列表符号-->

<li>列表条目1</li> <!--type允许取值："disc"、"circle"、"square"-->

<li>列表条目2</li> <!--三个依次为：实心圆圈、空心圆圈、实心方块-->

......

</ul>

定义列表(Definition List)：<dl>

<dt>列表条目1标题</dt><dd>列表条目1正文</dd>

<dt>列表条目2标题</dt><dd>列表条目2正文</dd>

......

</dl>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航