开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

web开发0基础 - HTML篇

简介:
+关注继续查看

基本标签

标签是HTML的语言元素。几乎每一种标记,都有一个开始符和一个结束符。例如:<HEAD>标签标识信息的标题开始,它也有一个结束标签 </HEAD>。

<HTML></HTML>

该元素告诉浏览器该文件是一个HTML文档。每个HTML文档以标签<HTML>开头 。此标记应在文件的开始位置。它有一个结束标记</HTML>,必须在文件的最后。

 <HEAD></HEAD>

HEAD包含有关文件的重要信息。

<TITLE></TITLE>

标题标签是一个重要的标记。它是用来显示在浏览器窗口顶部的标题。title开始和结束标签都在head标签之间。

下面的例子展示如何使用这个标签:

复制代码
     <html>
     
<head>
     
<title>John's Homepage</title>
     
</head>
     
<body>
     
</body>
     
</html>
复制代码

 <META>

另一个可以加入在head标签的是<META>标签。它是用来帮助搜索引擎索引的网页,有几种不同的中meta名字。

author meta:

 <META NAME="author" CONTENT="Nongjian Zhou">

 description meta:

<META NAME="description"  CONTENT="A very easy tutorial for HTML beginners">

 keyword meta:(注意关键字是以逗号隔开的)

<META NAME="keyword"
        CONTENT
="html,tutorial,beginner,web design">

 下面的例子显示了如何将这些标记编码:

代码

 <BODY></BODY>

    Body标识用来标识你网页的主要部分,在<BODY> </BODY>标识之间,你可以放置所有的image, link, text, paragraphs, 和form。我们将解释的每个在HTML文件的Body中使用的标签。

Character, Paragraph和Position

<H#></H#>

共有6个级别的标题,编号从1到6。这些标签用于字符的外形。最大的标题是<H1>和最小的一个是<H6> :

     <H1>Biggest text</H1>
     ......
     
<H6>smallest text</H6>

 <P></P>

段落标记(<P>开始标记和</P>结束标记)允许您放置一个段落。例如:

   <p>Basic Information</p>

 这个</P>结束标记可以省略。

Align

默认位置是左对齐的,你也能使用“ALIGN”来对齐。

     <ALIGN="center"> Paragraph will be centered</p>  
     
<ALIGN="left"> Paragraph will be left justified</p>
     
<ALIGN="right">Paragraph will be right justified</p> 

<CENTER></CENTER>

这种标签让你的文字在网页的中心

     <center><p> Paragraph will be centered</p></center>

此标记中断到下一行。下面是一个例子:

     <p>Welcome To<br> My Homepage!</p>

 

<HR>

此标记添加一条横线或分开您的网站。一个<HR>标签提出了以下分:


 <HR>能被这样设置:

 <hr width="450" align="right" size="5">

 &nbsp;

您可以使用&nbsp给你的文字添加空格。

<BLOCKQUOTE></BLOCKQUOTE>

您可以使用此标记进行格式化或删除文字,通过左、右两边的段落。

     <BLOCKQUOTE>    
     
<H1>Welcome To John's Homepage!</H1>
     
<p>Content</p>
     
<p>Basic Information</p>
     
</BLOCKQUOTE>

 

<PRE></PRE>

预格式化该段文字来准确显示您在Web浏览器中输入。例如:

复制代码
     <pre>
     Item     Price     quantity
    -----------------------------
      A       34.99        23
      B       25.95        13
    -----------------------------
     
</pre>
复制代码

 Comments

注释标记看起来像这样:

     <!-- Comments -->

 当你查看你的网页时,注释标记是不会显示的。

字符样式

样式包括物理和逻辑字符样式, Face, Size, 和Color。

以下是字符样式表。

Type Choice function
Physical styles <B> Make text bold.
<I> Make text italic.
<U> Make text underline.
<Strike> Make text strikethrough.
<Sup> Make text superscript.
<Sub> Make text subscript.
Teletype Make text teletype.
Logical styles <Strong> Indicate the text is very important.
<Em> Indicate the text is important.
<Cite> Indicate that the text is from a book or other document.
<Address> Indicate that the text is an address.
<Dfn> Indicate that the text is a definition.
<Samp> Indicate that the text is a sequence of literal characters.
Keyboard Indicate that the text is keyboard input.
<Var> Indicate that the text is a variable.
<Code> Indicate that the text is code.

 

Font Choice Function
Face Default Make text display in the default font (Times New Roman) of the Web browser.
Family Type a list of fonts separated by commas (for example, Helvetica, Arial, Courier). The text will display in the first listed font found on the browser's system.
(Font name) Make the text display in the font specified. (If the font is not available on the browser's system, another font will be substituted.)
Size 1 through 7 (3 is the default) Format text with 7 sizes where 7 is the largest size and 1 is the smallest.
Increase Format text with the largest size (same as 7).
Decrease Format text with the smallest size (same as 1).
Color "#xxxxxx" or: White, Red, Blue and Others Make the text a different color.

下面的标签对文本之间显示效果。

代码

 <BASEFONT>

您可以使用此标记来设置您的网页默认字体,颜色和大小或保存您的编码时间。例如:

<basefont face="Arial" size="7" color="red">

Lists

 有三种类型的HTML列表:

     Unordered lists <UL></UL>
     Ordered lists 
<OL></OL>     
     Definition lists 
<DL></DL>

Unordered Lists(无序列表)

这个列表以<UL>标签开始,以</UL>标签结束。在 <UL> 和</UL>之间,你能输入<LI>(列表项)标签来分离,不需要结束</LI>标记。例如:

     <UL>
     
<LI> Name
     
<LI> Phone
     
<LI> ID
     
</UL>

有序列表

有序列表类似于无序列表,不过它使用<OL>而不是<UL> :

     <OL>
     
<LI>College
     
<LI>Hight School
     
<LI>Elemantory School
     
</OL>

 定义列表

  •  定义列表以<DL>开头和以</DL>结束 。这份列表包括交替定义术语和定义。术语的定义包含在<DT></DT>中,并应先定义的定义。该定义的定义是包含在<DD></DD> 。因此,整个定义列表如下所示:

    复制代码
     
         
    <DL>
         
    <DT> term </DT>
         
    <DD> definition </DD>
          ...
         
    <DT> term </DT>
         
    <DD> definition </DD>
         
    </DL>
    复制代码

     Links

  •      链接可让您互联网或在本地机器上从一个页面导航到另一个页面。在您将链接添加到您的网页时,你需要的您要链接到其它网站网址或您的本地文件路径。这个链接标签还提供了连接的电子邮件地址的方式能力。链接到当前目录的另一个文件,使用<A HREF="name.html">anchor text </a> 。例如: 
  •     <HREF="bscInfo.html">Basic Information</A>

         如果你想链接到在另一个目录下的一个文件,,您可以编写如下代码:

         <HREF="path/name.html">Text</A>

         您可以从您的网页链接到互联网上其他网页: 

    <HREF="http://internetcollege.virtualave.net/">Internet College</A>

        如果你想链接到电子邮件地址,当您单击它,然后启动邮件程序,您可以编写这样一个链接:

  •      <HREF="mailto:internet101@go.com">Email us</A>

         如果文件有非常大,您可能需要在页面的不同部分创建的链接。 为了做到这一点,首先必须让指针在指向您要链接到文件的地方。

    指针像这样<A NAME="xyz">。然后使用 <A HREF="#xyz">标记。例如,你想有一个链接,在你的网页上从章节D到章节 "My current project"。右在“My current project”,您需要输入<A NAME="M">。在D添加链接<A HREF="#M">。 #符号告诉你的浏览器在同一个文档中寻找在链接,而不是到其它文件寻找 。您可以使用任何数字或字母取代“M”:
         <BODY>
         
    <NAME="M"></A>My current projects
         ......
         
    <HREF="#M"></A>Click here to see my projects</A>
         
    </BODY>

    用同样的方法,您可以链接到其他文件中的任何地方:

         <HREF="people.html#F3">Faculty Infomation</A>

    您也可以链接的互联网上其他网页的一部分,如果你可以把指针<A NAME=""> 它在其中:

         <HREF="http://server/path/file#F3">

     Image

  • 大多数Web浏览器可以显示图像的GIF或JPEG格式。为了包含图片,请输入:
         <IMG SRC="ImageName">

     例如: <IMG SRC="monky.gif">,<IMG>标记是用来定义图像。此标记不会有结束标记。IMG部分告诉浏览器添加图像,SRC告诉您的浏览器在哪里可以找到图像。您应该包括两个<IMG>其他属性标记告诉浏览器中图像的大小。HEIGHT 和WIDTH 属性,让您的浏览器预留适当的空间(像素)给你的图像。例如:

         <IMG SRC="monky.gif" HEIGHT=80 WIDTH=100>

    你可以通过使用ALIGN,把图像放置在页面的左或右面 ..例如:

    <IMG SRC="ImageName" ALIGN="right">

     默认情况下,图像的底部平行标注了文本。您可以将图像对齐到段落的top, bottom 或者middle中间,使用三种之一: TOP, MIDDLE, BOTTOM,例如:

         <IMG SRC="monky.gif" ALIGN="top">

     注意:您必须使用“align”,而不是“valign”设置 TOP, MIDDLE, BOTTOM。它跟table不一致。我们可以用“"vspace" 和"hspace"调整图片周围的空间:

     <IMG SRC="monky.gif" vspace="50" hspace="80">

     alt属性是IMG的一个属性。您可以使用ALT属性来指定要显示的文本而不是图像。例如:

         <IMG SRC="monky.gif" ALT="[monky]">

    在这个例子中,如果有人不能看到图片,至少他们将能够读取图像的名称,知道这将是一个monky,因为这个地方改为显示“[monky]”。图像可作为纯文本一样使用超链接。下面是HTML代码:

         <HREF="animal.html"><IMG SRC="monky.gif"></A>

    蓝色的边框围绕图像显示它是一个可点击的超链接。如果您不希望显示这一边界,您可以添加BORDER属性并设置为0:

         <HREF="animal.html"><IMG SRC="monky.gif" BORDER=0></A>

     你可以从另一个网页加载图像到您的页面中。要显示另外一个图像而不是页面,你需要找到的网址:

  •      <IMG SRC="http://www.abcd.com/image2.gif">

     您还可以图像用作背景。该标签包括一个背景图像中包含<BODY>声明作为属性:

         <BODY BACKGROUND="ImageName">

     大型内嵌图像会减慢文件加载速度。为了避免它,您可能有外部图像来打开它。要包括对外部图像引入,请输入:

         <HREF="ImageName">link anchor</A>

     您还可以使用较小的图像链接一个更大的图像。输入:

         <HREF="LargerImageName"><IMG SRC="SmallImageName"></A>

     Color

  • 您可能需要给一个特定的颜色给background, text, links, visited links, and active links。在HTML中,颜色被编码为6位十六进制RGB(红,绿,蓝)的数字。范围从00到FF。例如,000000是黑色的,FFFFFF 是白色, FF0000是鲜红色,0000FF明亮的蓝色,00FF00是柔和的绿色。您必须在实际的代码前加“#”符号。你可以使用<BODY>标记的的属性来更改text, links, vlinks (访问过的links), and alinks (激活连接)的颜色。例如:
  • <BODY bgcolor="#FFFFFF" text="#000000" 
          link
    ="#0000FF" vlink="#800000" alink="#808000">

     

    您还可以使用颜色的名字而不是相应的RGB值来显示一些基本颜色。例如,"black", "red", "blue", 和"green" 能有效来取代RGB值。文字着色很像改变字体大小。这种标签是:
         <FONT color="code"> text </FONT>

     这个标签可以与字体的大小合在一起使用。例如:

         <FONT color="#00FF00" size="+3"> text </FONT>

     Table

  • Table的格式如下:
    复制代码
         <TABLE>
         
    <TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> 
         
    </TR>
         ...
         
    <TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> 
         
    </TR>
         
    </TABLE>
    复制代码

    整个表是以<TABLE>开始,以</TABLE>结束 。每一行封装在<TR></TR> 。行内的单元格,包含在<TD></TD>中间 。可以有许多的行和列,如果你想适合你的屏幕。浏览器将自动套用行,如有必要,单元格内容的垂直中间。如果你想一个单元格跨越多个列,使用<TD COLSPAN=X></TD> ,其中X显示的列数的跨度。同样, <TD ROWSPAN=X></TD>将导致单元格跨度x行。边框可以放在了所有单元格中,使用<TABLE BORDER=X></TABLE> ,其中X是边界像素数量。让我们看一个例子:

    代码

     

  • Name

    Phone

    ID

    John Lee

    456-968

    276580

    Cherry Heitz

    789-326

    908743

  • 在宽度和高度值可以是"XX%"或者XX
  • 例如:WIDTH="80%" 或者WIDTH=450。 "XX%"允许表的大小随着窗口大小改变而改变。在边界值可以为零。在这种情况下,该表将没有边界。你可以实现下面的表格:
  •  

    下面是代码:

         <TABLE BORDER=10 CELLSPACING=10 CELLPADDING=2>
         
    <TR><TD></TD><TD></TD></TR>
         
    <TR><TD></TD><TD></TD></TR>
         
    </TABLE>

    CELLSPACING 属性是指单元格之间的空间,应是像素。在cellpadding的属性是指在单元格像素间距(单元格壁和单元格内容之间的空间)。

    Attribute Description
    ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.
    VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
    COLSPAN=n The number (n) of columns a cell spans.
    ROWSPAN=n The number (n) of rows a cell spans.
    NOWRAP Turn off word wrapping within a cell.

    Form

     
     
     
  • 表单允许用户输入信息。例如,您可以使用表单来收集用户的姓名和电邮地址。表格开始标签<FORM>和结束标签</FORM> 。
         <FORM ACTION="path/script.pl" METHOD="">
         ......
         
    </FORM>

     你应该为你的表单输入两个属性, Action 和Method:

         <FORM ACTION="http://www.abc.com/cgi-bin/login.pl" METHOD="post">

     你可以使用单行信息的"input" :

         <INPUT TYPE="input" NAME=name SIZE=##>

     例如:

         <INPUT TYPE="input" NAME="email" SIZE=26>Your Email Address
         
    <INPUT TYPE="input" NAME="name" SIZE=26>Your Name
         
    <INPUT TYPE="input" NAME="subject" SIZE=26>Subject

     下面是结果:

  •      "email" size="26"> Your Email Address
    "firstname" size="26"> Your Name
    "subject" size="26"> Subject
  • 值是字符大小,所以 "SIZE=26" 是指输入框的宽度是26个字符

  • Text Area

  • Text Area 能够尽可能的大。Text Area 以<TEXTAREA NAME=name ROWS=## COLS=##>开始和</TEXTAREA>结束 。例如:
         <TEXTAREA Rows=2 Cols=25 NAME="comments"></TEXTAREA>

     

    其结果是:

  • Radio Button

  • 您可以使用单选按钮来表示问一个问题的答案。例如,如果你要问: "Which picture do you like?",有选择:"monky", "flower", "girl", "building", 您可以键入

    代码

     Check Box:

  • 复选框让用户从列表中选择东西。形式是:

         <INPUT TYPE="checkbox" NAME="name" VALUE="text">

        请注意,与复选框和单选按钮的区别是,可以在同一时间,任何数量的复选框能被选中,只有一个单选按钮被选中。例如,如果你要问:“Which picture do you like?" ,在同一时间,你允许选择任何数量的复选框,您将输入:

  • 代码

     Submit 和 Reset

  • 其他类型按钮,包括提交按钮和重置按钮。 “submit”是用户按下按钮发送的形式。 “reset”清除整个表单,以便用户可以重新开始。例如:

         <INPUT TYPE="submit" NAME="submit" VALUE="Send">
         
    <INPUT TYPE="reset" NAME="reset" VALUE="Clear">

     

    结果是:

  •          "submit" type="submit" value="Send">"reset" type="reset" value="Clear">
  • Password
  • 这种类型允许用户输入文本,但不显示,他们显示星号,而不是文字:
         <INPUT TYPE="password" NAME="pass" SIZE="20">

     Pull-Down Menu

  • 通过使用下拉菜单,你可以要求只有一个答案来回答的问题。例如:
    代码

     

    结果是:
  • How old are you? 
        "age" size="1"> 1-15 16-21 22-30 31-45 46-65 66-80 81-up 
    Scroll-Down Menu
  • 有两种类型的下拉菜单。一个是你只能选择其中一个项目:
    代码

     结果是:

  •  How old are you? 
        "age" size="5"> "1-15">1-15 "16-21">16-21 "22-30">22-30 "31-45">31-45 "46-65">46-65 "66-80">66-80 "80-up">80-up 
  • 另外菜单,按住Shift键,你可以选择一个或多个项目。例如:
    代码

     Frame

  • 有了Frame,你可以把很多的HTML页面放在单一的窗口中,每一个frame可以显示一个页面。frames以<FRAMESET>标签开始和</FRAMSET>标签结束。<FRAMESET>标签可以有两个修饰符: ROWS 和COLS。例如:
    代码

     

    让我们每个元素的说明:
  • rows="64,*" 是指在第一frame将占窗口的64的和第二frame将占据窗体的其余部分。星号表示占据空间剩余的部分。您可以使用的比例取代长度。例如:cols =“30%,60%”
  • <frame>确定每个独立的frame。
  • name="..." 定义frame的名称。
  • src="..." 告诉哪个页面将在框架中加载。
  • target="..." 允许在具体的框架或窗体中呈现您的连接。
  • scrolling="yes|no|auto" ,允许你控制frame滚动条。 "yes" 强迫框架始终有滚动条。 "no"强迫框架始终没有滚动条。  "auto"允许浏览器决定是否要是必要的滚动条。默认值为"auto"。noresize让您保正frame不受观众来调整大小。 </noframes>是用于创建无框替代。当页面被认为是由浏览器不支持框架,除非有何关系,即是一切</noframes>标签是ignored。
  • 也有一些“magic”的标签。“_blank”将始终打开一个新窗口的链接,"_top" 将在整个页面的链接,而不是在一个框架。“_self” 使链接打开它的调用框架。这是非常有用的<BASE...>标签的用途。“_parent”打开在不久的框架的父框架集的链接链接调用。
  •      <HREF="ah.html" TARGET="_blank">text</A>

     而且,TARGET 也可以添加到<FORM>标记,使脚本输出到了指定的框架或窗口。






本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/01/19/1651211.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于.Net开发的对比Html效果差异的开源项目
基于.Net 4.5开发的对比Html文件、片段效果差异的项目。两份Html效果不一样的地方会通过颜色、删除线、背景色分别标记出来。
0 0
传统html+vue+elementUI开发&nodeJS环境搭建
Shiro提供了完整的企业级会话管理功能,不依赖于底层容器(如Tomcat、WebLogic),不管是J2SE还是J2EE环境都可以使用,提供了会话管理,会话事件监听,会话存储/持久化,容器无关的集群,失效/过期支持,对Web的透明支持,SSO单点登录的支持等特性。 所谓会话,即用户访问应用时保持的连接关系,在多次交互中应用能够识别出当前访问的用户是谁,且可以在多次交互中保存一些数据。如访问一些网站时登录成功后,网站可以记住用户,且在退出之前都可以识别当前用户是谁。
0 0
web前端设计与开发期末作品_期末大作业【使用HTML制作汽车首页】
汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。
0 0
【HTML入门】从网页搭建开始学习Java Web开发
今天开始总结学习Java Web,而学习Java Web我们应该先学习一些网页搭建基础的东西,今天我们就先从HTML开始。
0 0
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
0 0
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
最近几年涌现出了很多技术博客和技术社区, 也有很多技术同仁开始打造自己的博客, 我们可以把自己的博客同步到不同的技术平台, 但是随着技术平台的增多, 我们文章同步所花费的时间会越来越多, 那么有没有一个工具能快速的将博客发布到不同的平台呢? 或者有没有一个工具, 可以把html直接转化为技术平台能够识别的“语言”直接发布呢? 我们都知道程序员最爱的写博客的“语言”就是makedown, 并且目前大部分的技术社区都支持makedown语法, 所以说只要有makedown, 我们就能快速的同步到不同的技术平台.
0 0
python web开发 HTML基础
python web开发 HTML基础
0 0
使用 Golang 和 HTML5 开发一个 MacOS App
本篇文章将介绍如何使用 Go 语言 和 HTML5 来开发一个 MacOS App。
0 0
好程序员技术文档HTML5开发中的javascript闭包
  好程序员技术文档HTML5开发中的javascript闭包,事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率,同时避免对命名空间的污染,最重要的是可以从一个域中取出原本访问不到的变量去使用。
1049 0
好程序员技术文档HTML5开发中js的创建和继承
  好程序员技术文档HTML5开发中js的创建和继承,JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。  当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。
658 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载