当前位置:  教程>Html教程

HTML 基础知识教程及代码实例

 
分享到:
    发布时间:2017-2-19  


    本文导语: HTML 基础知识教程及代码实例不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们。HTML 标题HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.实例代码<h1>这是一个169it.com网站的标题</h1><h2&...

 

HTML 基础知识教程及代码实例


不要担心本章中您还没有学过的例子,

您将在下面的章节中学到它们。


HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

实例代码

<h1>这是一个169it.com网站的标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3>




HTML 段落

HTML 段落是通过标签 <p> 来定义的.

实例代码

<p>这是一个段落。</p><p>这是另外一个段落。</p>



HTML 链接

HTML 链接是通过标签 <a> 来定义的.

实例代码

<a href="http://www.169it.com">这是一个链接</a>


提示:在 href 属性中指定链接的地址

(您将在本教程稍后的章节中学习更多有关属性的知识).


HTML 图像

HTML 图像是通过标签 <img> 来定义的.

实例代码


<img src="169it.png" width="104" height="142">


注意: 图像的名称和尺寸是以属性的形式提供的。


HTML入门基础知识汇总教程

  HTML基础知识汇总,HTML(Hypertext Markup Language)是用于描述网页文档的一种标记语言。  

  1.HTML文档主要由3部分组成。  

开头

<html>      

头部

标题

<head>

<tile>网页标题</title>

</head>

内容

<body>

网页内容

</body>

结束

</html>


         Meta标签:网页信息.如:网页编码信息..  

 3.bgcolor=”#ffccff”;设置背景色.

         Background=”back_image.gif”;设置背景图片.      

   使用方法:

         把网页的背景色设置成绿色

         <body bgcolor=”green”>网页内容</body>

   语法:

<font size=”+1” color=”red” face=”隶书”>文本内容</font>

   说明:size属性是用来设置字体大小,可以为字体指定大小范围为1~7.最大为7,最小为1.

      Color属性用于指定字体颜色,可以指定颜色名称或十六进制值.

      Face属性用于指定字体类型.

 5.列表

      无序列表:语法;

<ul type=”circle”>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

     Type可以取DISE表示实心.CIRCLE表示空心圆.SQUARE表示空心正方形.

     有序列表:语法:

<ol type=”1”>
 <li>第一项</li>
 <li>第二项</li>
 <li>第三项</li>
</ol>

    Type可以取:1,a,A,i,I.分别表示数字序列,小写英文字母序列,大写字母序列.小写罗马序列,大写罗马序列.

6.超链接:用于创建超级链接,它是可以到另一个文档或文件(图形,音频,视频)甚至到同一文档的另一部分的链接.

 语法:<a href=”http://169it.com”>注册链接</a>

 其中,href用来指定要链接的地址.链接的热点文本.

 链接到本页面.

   <a name=”marker”>锚点位置</a>

    <a href=”#marker”>链接到锚点</a>

电子邮件链接:    <a href=”mailto:webmaster@169it.com”>站长邮箱</a>

7.滚动<marquee>标签.

  语法:

 <marquee scrolldelay=”100” direction=”up”>滚动的文字或图像</marquee>

 其中,scroldelay表示滚动延迟时间.direction表示滚动的方向,默认为从右向左,它可以用4个值:up,down,left,right

8.表格

<table width="200" bgcolor=”green” border="1" cellpadding="5" cellspacing="5" >                  //tabel表格标签
 <tr>                                                      //tr行标签
    <td>一个单元格;</td>                //td单元格标签
    <td colspan="2">跨两列的单元格</td>
 </tr>
 <tr>
    <td rowspan="2">跨两行的单元格</td>
    <td>一个单元格</td>
    <td>一个单元格</td>
 </tr>
 <tr>
    <td>一个单元格</td>
    <td>一个单元格</td>
 </tr>
</table>

其中,border为表格边框.colspan跨列,rowspan跨行,cellpadding填充,cellspacing间距.bgcolor整个表格的背景.

9表单

<form  method="post" action="http://www.169it.com">                                                                         //表单标签,表单开始
      <input type="text" name="单行文本框" /> //单行文本框
<input type="password" name="密码框" />       //密码框
<textarea name="多行文本框"></textarea>       //多行文本框
      <input type="checkbox" name="checkbox" value="复选框" />     //复选按钮
      <input type="radio" name="RadioGroup1" value="单选" />      //单选按钮
      <select name="select">                                                                  //下拉列表
      </select>
      <input type="submit" name="Submit" value="提交" />       //提交按钮
<input type="reset" name="reset" value="提交" />      //重置按钮
<input name="浏览…" type="file" />          //浏览文件按钮
</form>

 10. 框架

<frameset border=”5” rows=”20%,*”>             分成上下两个窗口
<frame src=”top.html” name=”topframe” scrolling=”no” >没有滚动条
<frameset cols=”20%,*”>                                 分成左右两个窗口
<frame src=”left.html” name=”leftframe” scrolling=”no”>
<frame src=”right.html” name=”rightframe” >
</frameset>

分成左右两个窗口,分别为left和right窗口,显示的文档分别为left.html和right.html

</frameset>

如何设置窗口链接的显示位置.框架页面之间的链接

1:设计好框架集页面,并为每个框架窗口定义名称

如:<frame src=”right.html name=”rightframe”>

2:设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名称

如:<a href=”right.html” target=”rightframe”>

   HTML本身不难理解,其实都是一些基础性的知识,HTML中最重要的是表格和表单。假如要想了解更多HTML的应用使用HTML用户手册是一个很好的方法,那上边有用法和实例所以说我们应该认真的品味编程的趣味


  • 本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.169IT.COM)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
    转载请注明:文章转载自:[169IT-IT技术资讯]
    本文标题:HTML 基础知识教程及代码实例
相关文章推荐:
  • HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例
  • 去除HTML标签删除HTML示例代码
  • HTML网页的Meta Refresh自动跳转方法介绍及Meta Refresh自动跳转代码示例
  • python实现html转ubb代码(html2ubb)
  • Html checkbox标签如何设置默认选中以及用js操作checkbox代码示例
  • HTML恶意代码过滤 AntiSamy
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例
  • HTML代码高亮库 GeSHi
  • PHP去除html标签,php标记及css样式代码参考
  • 把 CDATA 中的内容(有可能是不规范的Html代码)以Html方式展现出来。
  • php将html特殊字符转换成html字符串的函数:htmlspecialchars()介绍及代码举例
  • 快速编写HTML/CSS代码 Emmet
  • html form标签用法(js操作form)介绍及代码示例
  • jquery代码-如何从元素中除去html
  • Web前端设计:Html强制不换行<nobr>标签用法代码示例
  • asp.net使用mshtml处理html的代码
  • servlet中怎么实现java代码和html代码的分离????
  • Jquery在指定DIV加载HTML示例代码
  • javascript下一个还原html代码的正则
  • asp去掉html,保留img br p div的正则实现代码
  • 正则表达式轻松消除HTML代码


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号