码迷,mamicode.com
首页 > Web开发 > 详细

HTML(1)

时间:2016-12-02 02:10:08      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:基础   宽度   rip   搜索   需要   row   lang   自动跳转   href   

  • HTML介绍

 html(hyper text markup language)----超文本标记语言

 html标准---W3C

超文本--在文本内容的基础上,添加更加丰富的信息(图片、动画、声音等)

标记(markup--标签):<单词></单词>---挨着<是标记

标记通常有两层含义:

  1.      表形:每一个标签都具有一定的表现形式
  2.      表意:每一个标签都具有一定的意义

语言特点: 可以直接被浏览器解析,是一种超文本标记语言,与程序语言不同。

  • HTML的标签分类

     1.双标签: 由开始标签和结束标签构成,内容放入开始标签和结束标签之中

         语法:<标签名 属性名="属性值">.....内容....</标签>

              属性可理解为人的特征    性别="女"  体重="45"  身高="165"

              例如 <div></div> <body></body>.....

     2.单标签:只有开始标签,没有结束标签,没有内容

          语法:<标签名  属性名="属性值"  属性名="属性值"  />  注意:一定要闭合

          例如:<link/>  <img/>  <meta/>  <br/>

  • HTML基本骨架结构 

 <html>

   <head>

          <title>网站的标题</title>          

   </head>

  <body>

  </body>

</html>

    文件的扩展名是xxx.html

     html结构说明:     1.<html>含义:告诉浏览器网页的代码用什么格式来解析

                              2.<head>含义:告诉浏览器网页的汉字用什么字符集,使用的字符集不正确就会出现乱码。

                                                     gb2312   简体中文 (汉字操作系统下默认使用的字符集)    gbk    国际码     utf-8  多国语言                                                   

                              3.<title>含义:便于搜索引擎

                              4.<body>含义:网站的内容,99%的内容都放入<body></body>中,只有放在该标签中,才能在窗口显示

                                            注意:tab键可以缩进                                                                                                                           

  • HTML书写规范

         1.Html不区分大小写,但是w3c使用的是小写的<body>,不推荐<BODY>

         2.Html如果有标签嵌套,必须顺序嵌套,不能交叉

         3.单标签一定要闭合,例如<br/>                                                                                        

         4.属性:每一个标签有没有属性,有多少属性----已经由w3c规定好

         5.属性值:双引号引起来,如<body background="black"></body>

  • HTML文本标签

     font  设置文本的颜色  文本的字体  文本的大小

    <font color="设置颜色" size="设置大小"  face="设置字体"> 设置的内容</font>

    <b></b> 加粗

    <strong></strong>  加粗  加强语气

    <i></i>  倾斜

    <em></em>  倾斜  加强语气

    <u></u>  下划线

    <ins></ins> 插入的是文本  例如 * | 之类的

    <sup></sup> 上标  使文本上标

    <sub></sub> 下标  使文本下标

  • Html段落标签

    <p></P>     一段

   段落的属性有:

                    Align(居中方式)  取值  left  center  right

 

  标题:

                     <h1></h1>  标题1                                              

                            ......

                     <h6></h6>  标题6                                                                                                      

           属性:Align :  left  center  right

Pre标签:预定义标签,保留原有的空格和换行

Div标签:区域划分作用,独占一行,块标签 (p h1 table  ul ol )

Span标签:本身并没有什么含义,但是也是网站使用最多的标签之一,结合CSS一起使用构成功能,行内标签 (span em i  b strong u

注意:一般是块标签内含有行内标签 

  • 无序列表 

语法:

            <ul>

                   <li>

                   </li>

                   <li>

                   </li>                       

            </ul>      

ul的属性:

           type   设置列表前面的项目符号的样式    circle(空心圆)      disc(实心圆)       square(方形)                                                                                                                          

  • 图片标签(单标签、行内标签)                                                                                                   

 语法:<img 属性名="属性值" />

 属性 : 图片的路径  src="图片的地址"(图片要放到同一个站点下,即和html文件放在同一个文件夹)

           图片的宽度 width="数值" 以像素为单位的px,但是在html标签中不写单位,如 width="300"      

           图片的高度 height="数值" 以像素为单位的px,但是在html标签中不写单位,如 height="200"                                                                             

           图片的边框 border="数值"  

           图片的解释 alt="对图片的描述内容"                                                                                    

         (  图片和内容左右之间的距离 hspace="数值"                          

           图片和内容上下之间的距离 vspace="数值"   ) 通常不用这两个,用CSS 实现

          注意:图片等比例缩放,只设置宽度或高度

  • 表格介绍

语法:

          <table>

                <tr>

                      <td>

                      </td>       

                </tr>              

          </table>                                

  通常表格<table</table>包括<tr></tr>  行里面包括单元格<td></td>                                                                                              

  属性:表格的边框  border  默认值是0

           表格宽度   width  

           表格高度   height(不建议使用)               

           居中方式   align="居中方式" 取值  left  center  right  

          表格中的内容和单元格之间的距离  cellpadding="数值"       默认数值是 2px

          表格中的单元格和单元格之间的距离 cellspacing="数值"     默认数值是 2px                         

          表格的背景颜色 bgcolor="颜色值"            

          表格的背景图片 background="图片地址"(背景图片不能含有中文) ----修饰作用 

          表格的合并边框线  rules="all"   (w3c不推荐使用 用CSS实现) 

          表格的边框线颜色  bordercolor="颜色值"  (不建议使用)

          注意:背景图片的优先级高于背景颜色

    <tr>的属性:

                 行的高度  height               

                 背景颜色  bgcolor

                 背景图片  background

                 水平对齐方式  align   取值   left  center  right 

                 垂直对齐方式  valign  取值   top  middle  bottom                                                                           

    <td>的属性:

                 背景颜色  height                                                 

                 背景图片  background

                 宽度    width                                 

        高度    height

   内容在单元格中的水平对齐方式   align   取值   left  center  right 

       内容在单元格中的垂直对齐方式   valign   取值   left  center  right 

  • 表格的扩充

 合并单元格的问题:

           横向合并(即左右合并): 若干个单元格合并为一个单元格

                      cosplan="数值"     例如:cosplan="3"  横向合并3个单元格

        纵向合并(即上下合并)

         rowspan="数值"   例如:rowspan="3"  纵向合并3个单元格

  •   链接

 语法  <a 属性="属性值">   内容   </a>

 属性:

    链接的地址  href="链接的地址"   url   绝对地址  或   相对地址

    打开目标文件的窗口   target  

                   _blank  在新的窗口中打开目标文件

                _self    在原来的窗口打开目标文件(原来的窗口被覆盖)

    定义锚点的名称   name

  • 绝对地址(网络地址)

 语法  <a href="http://www/taobao.com"> 淘宝 </a>    网络地址

      <a  href="file:///C:/video/www/test.html">  本地的html文件 </a>  本地地址

  • 相对地址

     在同一个站点下,在同一个文件夹

               目标文件和当前文件在同一个目录,直接写名称

               目标文件在当前文件的下一级目录,xx表示文件夹名      xx/文件名称 

           目标文件在当前文件的下两级目录下     xx/xx/文件名称

           目标文件在当前文件的上一级目录  ../文件名称 

           目标文件在当前文件的上两级目录   ../../文件名称

  • 特殊链接

  下载链接

    文件不用下载可以直接做链接   .html   .jpg

    文件必须下载链接  .zip  .exe

  邮件链接

     <a href=mailto:邮件的地址>    内容  </a>

  空链接

    在当前页面做链接   <a href="#">    内容  </a>   

  Javascript链接

     <a  href="javascript:window.close()">  内容  </a>

  • 锚点

 

    同一个页面的不同区域跳转

  定义锚点  <a name="自定义名称"></a>  在页面中的任一处定义    <a></a>之间不加内容,给链接中的target

  跳转锚点  <a href="#锚点名称">内容</a>   跳转到定义锚点的位置

 

  • 字符集  

      为什么要有字符集,是因为计算机只能处理二进制数据,为了让计算机能够识别人类的语言(0-9、a-z、A-Z、特殊符号),我们就需要对每一个字符进行"编码"

所谓"编码"就是:每一个字符用不同的二进制数表示;                      

  ASCLL编码:用一个字节(8位二进制)来表示字符,共可以显示256

  ANSI编码: ASCLL编码的扩展  用于显示本国的语言  

            在中文操作系统  gb2312  用两个字节(16个二进制) ,共可以表示2^16个字符

            繁体操作系统   big5 

  GBK编码: 对gb2312进行扩充,收录了一些冷门字,罕见字,古汉语.......

  Unicode编码:计划将世界所有字符收录,用4个字节(32位二进制)表示一个字符

  UTF-8编码:(多国语言编码)  不同的字符,会自动选择合适的编码来进行翻译

 

  • Meta标签

  描述网页文档属性

    http-equiv  模拟的是http文件头信息,当内容从服务器端发送给客户端,告诉浏览器如何正确显示网页信息

        字符集:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 多国语言  

        网页自动刷新:  <meta http-equiv="refresh" content="4"/> 间隔4秒网页自动刷新

                <meta http-equiv="refresh"  content="5;http://www.baidu.com"/> 等待5秒自动跳转到百度页面

        Name(设置网页的关键字,描述信息等): <meta name="keywords" content="关键字"> 便于搜索引擎的需要

                           <meta name="description" content="网站的描述信息"> 便于搜索引擎的需要

                           <meta name="author" content="网站作者">

     

 

HTML(1)

标签:基础   宽度   rip   搜索   需要   row   lang   自动跳转   href   

原文地址:http://www.cnblogs.com/strive-for-life/p/6124184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!