专栏首页Linux驱动1.Android网络编程-HTML介绍

1.Android网络编程-HTML介绍

1.HTML介绍

超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

在Eclipse下则可以使用自带的浏览器浏览html:

2.HTML常用元素标签

<head> 标签用于定义文档的头部

把 <head> 标签放在文档的开始处,紧跟在 <html> 后面

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面这些标签可用在 head 部分:

<base>, <link>, <meta>, <script>, <style>, <title>

比如:

  • <meta charset="utf-8">:元标签.告诉浏览器用utf-8编码来解析该文档
  • <title>123</title>:用来显示网页的标题

<body> 文档的的内容标签

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

3.转义标记(空格、<、>、&、"、'、)

  • & :   "&amp; ",quotation mark的缩写
  • < "&lt; ",less-than的缩写
  • > : "&gt; ", greater than的缩写
  • " :  "&quot; ", quote的缩写
  • ' :  "&apos; ",apostrophe的缩写
  • 空格: "&nbsp;"

比如html中输入:"a a",则只会显示"a a",只保留一个空格,所以可以输入"a&nbsp; &nbsp;&nbsp; &nbsp;a"来实现

4.排版标记<!--注解--> ; <P> ; <BR> ; <HR> ; <CENTER> ; <PRE> ; <DIV> ; <NOBR> ; <WBR> ;

<!--注解-->:用来注释代码内容,不会起到任何作用

<p>:段落标签,每个段落之间都会有个段间距(一空白行),不需要</p>作结尾,

比如:

<br/>:换行

比如:

<hr>:水平线horizontal

以: <hr align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。

align="LEFT" 设定线条置放位置,可选择:left;right;center 三种设定值。

size="2" 设定线条厚度,以像素作单位,内定为 2。

width="70%" 设定线条长度,可以是绝对值(以像素作单位)或相对值,内定为 100%。

color="#0000FF" 『只适用于IE』 设定线条颜色,内定为黑色。 #0000FF 代表蓝色,亦可以采用颜色的名称,即 text="blue" 。

noshade 设定线条为平面显示,若删去则具阴影或立体,这是内定值。

比如:

<center>:居中标记

比如:

<pre>:令文件按照原始码的排列方式显示,将会保留回车,空格

比如:

<div>:称为区隔标记。作用:设定字、画、表格等的摆放位置,主要用于css使用

比如:

5.字体标记<STRONG> <B> <I> <EM> <VAR> <CITE> <DFN> <ADDRESS> <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> <H1> <H2> <H3> <H4> <H5> <H6> <FONT> <BASEFONT>

<h1>~<h5>:标题标记

比如:

<STRONG> <B>:两者皆能产生字体加粗的效果

比如:

<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>:

这些标记都产生斜体效果,而只有 </DFN> 于 Netscape Netvigator 失去作 用。这些标记中只有 <ADDRESS> 较为特别,因它包括换行效果所以不必在它前面加上 <BR> 标记。

比如:

<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>

为方便对照及记认,所以把十个标记于在一起介绍。

  • <TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 NC 不见得如此。
  • <U> 是加底线的标记,一些特别的浏览器并不支援,因顾虑到与连结混淆。
  • <STRIKE> 加上删除线的标记。
  • <BIG> 令字体加大。
  • <SMALL> 令字体变细。
  • <SUB> 为下标字,比如:
  • <SUP> 则为上标字,仅剩的数学标记,比如:

<FONT>:

<FONT> 是应用于文件的内文部分,即 <BODY> 与 </BODY> 之间的位置,只影响 所标示的字句,是一个围堵标记。默认size大小为3

比如:

6.清单标记<OL> <LI> <UL> <MENU> <DIR> <DL> <DT> <DD>

<ol>:顺序清单标记Order list

<LI>则用以标示清单项目,在每一项前面加上1,2,3...

<ol> 的参数设定(常用): 例如:

  • < ol type="a"> :表示项目顺序从a、b、c、d...开始
  • < ol type="A"> :表示项目顺序从A、B、C、D...开始
  • <ol type="i"> :表示项目顺序从i、ii、iii...罗马数字开始
  • < ol type="A" start='4'> :表示项目顺序从A的第4个字母"D"开始(第26个字母为Z、第27个字母为AA)

比如:

<UL>:称为无序清单标记Unordered list。 所谓无序清单就是在每一项前面加上· ·等符号,故又称符号清单。

<UL> 的参数设定(常用): 例如: <UL type="square">

  • type="circle" :显示圆形 的符号
  • type="square" :显示正方形 的符号
  • type="disc":显示实心圆 的符号,默认为该符号

比如:

<DL> <DT> <DD>自定义清单

  • <DL>:用来声明一个自定义清单
  • <DT> :用来定义标题
  • <DD>:用来定义内容

比如:

超链接标记<A> <BASE>

<A> :链接标记

由 <A> 与 </A> 所围的文字、图片等等可以成为一个超链接

<A> 的一般参数设定:

例如 <a href="index.html" name="hello" target="_top">

href="index.html":

这参数不能与另一参数 name 同时使用,使用这参数才能造成可按的链接。

name="hello":

这参数是为该A链接作为参考点, 要使用两次 <A> 链接标记。一个使用参数 name 事先埋下参考 点,另一个使用参数 href 连到这个参考点。这样就可以实现内部跳转功能.

target="_top"

设定连结被按後之结果所要显示的视窗。可选值为: _blank, _parent, _self, _top, 框 窗名称。

target="框窗名称" 这只运用於框架中,若被设定则连结结果将显示於该“框窗名称”之框窗 中,框窗名称是事先由框架标记所命名。

target="_blank" 或 target="new" 将显示的链接画面内容,开在新的浏览器视窗中。

target="_parent" 将显示的链接画面内容,当成文件的上一个画面。

target="_self" 将显示的链接画面内容,显示在目前的视窗中。(内定值)

target="_top" 将框架中的链接画面内容,显示在没有框架的视窗中。(即除去了框架)

示例-实现页内标题跳转

<a href="#index3">快速跳转</a>

<span id="index1">index1<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>
<span id="index2">index2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>
<span id="index3">index3<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>

<span>:范围标记

通过span和a超链接组合,也可以实现页内标题跳转

示例:

<a href="#index3">快速跳转</a>

<span id="index1">index1<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>

<span id="index2">index2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>

<span id="index3">index3<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>

7.图形标记<IMG>

以<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">为例:

src="logo.gif" 图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行己久,后者由 96 年开始发展, 于未来取代前两者。若图片文件与该 html 文件同处一目录则只 写上文件案名称,否则 必须加上正确的途径,相对及绝对皆可。

width=100 height=100 设定图片大小,此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真,若 要改变图片大小最好事先使用图像编辑工具。 如果不指定,则显示原图大小

hspace=5 vspace=5 设定图片边沿空白,以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。

border=2 图片边框厚度。

align="top" 调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom, texttop 表示图片和文字依顶线对 , baseline 表示图片对 到目前文字行底线值, absmiddle 表示图片对 到目前文字行绝对中央, absbottom 表示图片对 到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。

alt="Logo of PenPal Garden" 这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。

lowsrc="pre_logo.gif" 设定先显示低解像图片,若所加入的是一张很大的图片,下载 时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。

注意 : 如果要设置图像带有带有可点击区域,则需要使用map标签,并且要在img属性里填入usemap="#XXXX"来引用map

map标签

示例如下:

<!-- usemap="#imgMap":该img通过imgMap来设置带有可点击的区域 -->
<img alt="beautiful girl" src="img/1.jpg" width="300" height="700" usemap="#imgMap"/>
<map name="imgMap">

    <!--"200,200,50":坐标为200.200,半径为50的圆形circle区域  -->
  <area shape="circle" coords="200,200,50" href ="img/20.jpg" alt="show 20.jpg" />

  <!--"0,0,140,140":坐标为0.0~140.140,的矩形rect区域  -->
  <area shape="rect" coords="0,0,140,140" href ="demo.html" alt="goto demo.html" />
</map>

使用该map后,只要我们点击指定area区域,则将会跳到指定链接href处.

8.表格标记<TABLE> <TR> <TD> <TH> <CAPTION>

<TABLE> <TR> <TD> :

<TABLE>是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用,属容器标记的还有其他。 <TR>用以标示表格列(row) <TD>用以标示储存格(cell)

<TABLE> 的参数设定(常用):

width="400" height="50%" 表格宽高度,接受绝对值(如 80)及相对值(如 80%,屏幕大小的80%)。

border="1" 表格边框厚度,不同浏览器有不同的内定值,故请指明。

cellspacing="2" 表格格线厚度,请看例子三,那是加厚到 5 的格线。

cellpadding="2" 文字与格线的距离,请看例子四,那是加至 10 的 padding。

align="CENTER" 表格的摆放位置(水平),可选值为: left, right, center,请看例子五或六,那表格 是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多 层保证而己,当然只用<CENTER>亦可。

background="myweb.gif" 设置背景图, 与 bgcolor 不能同用。

bgcolor="#0000FF"

设置底色, 与 background不能同用。

bordercolor="#FF00FF" 表格边框颜色

<TR> 的参数设定(常用):

align="RIGHT" 该一列内字画等的摆放的位置(水平),可选值为: left, center, right。

bgcolor="#0000FF" 该一列底色

bordercolor="#FF00FF" 该一列边框颜色

<TD> 的参数设定(常用):

width="48%" 该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。

height="400" 该一储存格高度

colspan="5" 垮列,表示该一储存格向右打通的栏数,后面示例有使用

rowspan="4" 该一储存格向下打通的列数

align="RIGHT" 该一列内字画等的摆放的位置(水平),可选值为: left, center, right。

bgcolor="#FF00FF" 该一储存格底色,

bordercolor="#808080" 该一储存格边框颜色,

background="myweb.gif" 该储存格的背景图,与 bgcolor 任用其一。

示例:

<table width="80%" height="50%" border="1" >
<tr>
<td colspan="3" align="center">成绩表格</td>
</tr>

<tr>
<td rowspan="2" align="center">张三</td>
<td  align="center">语文</td>
<td  align="center">78分</td>
</tr>

<tr>
<td  align="center">数学</td>
<td  align="center">78分</td>
</tr>

<tr>
<td rowspan="2" align="center">李四</td>
<td  align="center">语文</td>
<td  align="center">77分</td>
</tr>

<tr>
<td  align="center">数学</td>
<td  align="center">89分</td>
</tr>

</table>

效果:

9.表单标记<FORM> <INPUT>

<FORM> 的参数设置一般如下: 例如: <form action="http://your.isp.com" method="POST">

  • action: 指定要提交的地址,如果action=""就是表示提交给当前地址
  • method: 指提交的方法,有get(只接受低于 1K 内容,并且get出去的数据都会拼在url尾部.以&隔开)、post(允许传送大量内容,并且保护隐私.)

INPUT 的种类有:Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button,<SELECT> <OPTION> <TEXTAREA>

Text单行文本框

比如

<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255"/>

//value="20"表示默认文本框里有20字段, name="age"表示该文本框的key值为name,如果用户填入123,那么对应的value值就是123, size="2":表示长度

Radio单选按钮

比如:

<input type="Radio" name="gender" value="female" align="F" />女性

<input type="Radio" name="gender" value="" align="M" checked/>男性

//name名称一致则用来互斥,表示为同一组单选按钮,checked表示默认为按下的,如果用户点击了女性,那么gender=F.

Checkbox多选框

比如:

<form action="" method="GET"> 

<input type="Checkbox" name="name" value="Leon" checked >黎明
<input type="Checkbox" name="name" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="name" value="Leon">郑秀文

<br/>
<input type="Submit"  value="确定" align="MIDDLE"/>

//action 内容要提交到的地址 空就是提交给当前地址  method 指定提交的方法 get post
//Checkbox的name可以都为一致,也可以为不同的. checked表示默认为按下的

比如点击下面确定按钮:

然后就会跳转到:

可以看到,通过get的话,就会将提交的数据都会拼在url尾部.以&隔开.

Password输入密码框

例如:

<form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> 
请输入姓名:<input type="Text" name="name"> 
<br>请输入密码:<input type="Password" name="pw" maxlength="9"> 
</form>

Submit/Reset 提交/重置按钮

  • Submit : 用来提交get/post的按钮,默认按钮名称为:提交查询内容
  • Reset : 用来清除内容的按钮,默认按钮名称为:重置

示例:

<formaction="http://your.isp.com/cgi-local/example.cgi"method="GET"> 

姓名:

<input type="text" name="name" maxlength="10" />

<br/>

密码:

<input type="password" name="pwd" maxlength="10" />

<br/>默认名称:

<input type="Submit"><input type="Reset">

<br/>自己修改的:

<input type="Submit"  value="确定" align="MIDDLE"/>

<input type="Reset"  name="name" value="清除"/>

//Submit/Reset 下的value:表示的是按钮的名称,只是用来显示的

效果如下:

Image用来实现图片按钮

比如一个

图片,将这个用来实现Submit

示例如下:

<formaction="http://your.isp.com/cgi-local/example.cgi"method="GET"> 


姓名:
<input type="text" name="name" maxlength="10" />
<br/>
密码:
<input type="password" name="pwd" maxlength="10" />

<input type="image" name="submit" align="BOTTOM" src="img/ok.png" />

效果如下:

File用来传输文件

例如:<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">

input type="File" 输入方式为 Image。通常用以传输文件。

name="upload" 这文件传输的名称,用以识别之用。

align="BOTTOM" 可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

size="20" 所显示文字盒的长度。

maxlength="100" 可输入字元的上限。

accept="text/html" 所接受的文件类别,有二十六种选择,但可不设定。

Hidden要提交的隐藏内容

比如<input type="Hidden" name="ID" value="6618">

当我们submit的时候,顺便也会将ID=6618也提交出去.

Button自定义按钮(需要JS配合)

比如:

<input type="Button" value="回前一页" onclick="history.go( -1 );return true;">

其中 onclick="history.go( -1 );return true; 属 JAVA 事件。

<SELECT> <OPTION>下拉选择框

示例:

<select name="where"> 
<option value="hk">Hong Kong</option> 
<option value="tw" selected>Taiwan</option> 
<option value="cn">China</option> 
<option value="us">United States</option> 
<option value="ca">Canada</option> 
</select>

效果:

<TEXTAREA>多行文字编写框

比如:

<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">

name="comments" 这文字区块的名称,作识别之用,将会传及 CGI。

cols="40" 这文字区块的宽度,请自行修改。

rows="4" 这文字区块的列数,即其高度,请自行修改。

wrap="VIRTUAL" 设定其折行问题,可选值为: off, physical, virtual。off 表示不使用此属性,physical 时则会强迫刘览器在送资料到 CGI(Web 伺服器端)必须将实№文字中的换行一 并送出,设为 virtual 时则送出连续成串的字(除非使用者按了键盘的 RETURN / ENTER)。

下章学习:2.Android网络编程-web介绍以及Tomcat安装使用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux-hexdump命令调试event驱动—详解(13)

    hexdump: 查看文件的内容,比如二进制文件中包含的某些字符串,通常用来调试驱动用 描述: 我们以event1为例,当我们insmod挂载了键盘驱动后,出现...

    张诺谦
  • 第1阶段——u-boot分析之make指令(2)

    通过make 100ask24x0_config 指令配置好芯片选型后,使用make指令来生成uboot.bin文件 本文学习目标: 对Makefile文件进...

    张诺谦
  • makefile初步制作,arm-linux- (gcc/ld/objcopy/objdump)详解

    在linux中输入vi Makefile 来实现创建Makefile文件 注意:命令行前必须加TAB键 例如:将两个文件led.c和crt0.S汇编文件,制作...

    张诺谦
  • Infor Baan ERP LN Routing Operation Yield Rate Summary Report

    需求是如下图中的所有制造件中Routing Operation的Yield Percentage做一个汇总报表,格式如下:

    崔文远TroyCui
  • 分享一个跨浏览器固定定位的方法。

    我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。 其实很简单,就是我...

    练小习
  • WordPress博客文章结尾加上“转载请注明来源”等字样

    找到single.php页面(注意可以在后直接编辑) 在博客里随便找一个文章点开,然后查看文章最后的地方,点击查看源代码,然后找到 image.png <div...

    苦咖啡
  • 标签之美三——超链接的嵌入 原

    通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

    珲少
  • Java Web Jsp EL ${ user.name }

    <%@ page language="java"  pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//...

    Hongten
  • Django网页模板的继承include与复用extends

    Django使用网页模板的方式分为两种, 一是建立代码块, 在新的页面导入代码块, 关键词为include 二是建立模板,新的页面在模板基础上扩充, 关键词为e...

    zhaoolee
  • 模拟微信下拉页面

    在安卓下 始终不够完美,今天遇到了 iscroll.js,使用 iscroll.js 重新写了一个版本,现在比较完美了。

    墨渊

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动