boss44 发表于 2017-6-21 21:22:58

HTML(1)


[*]HTML介绍
  html(hyper text markup language)----超文本标记语言
  html标准---W3C
  超文本--在文本内容的基础上,添加更加丰富的信息(图片、动画、声音等)
  标记(markup--标签):<单词></单词>---挨着<是标记
  标记通常有两层含义:

[*]表形:每一个标签都具有一定的表现形式
[*]表意:每一个标签都具有一定的意义
  语言特点: 可以直接被浏览器解析,是一种超文本标记语言,与程序语言不同。

[*]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(居中方式)取值leftcenterright
  
  标题:
  <h1></h1>标题1                                             
  ......
  <h6></h6>标题6                                                                                                      
  属性:Align :leftcenterright
  Pre标签:预定义标签,保留原有的空格和换行
  Div标签:区域划分作用,独占一行,块标签 (p h1 tableul ol... )
  Span标签:本身并没有什么含义,但是也是网站使用最多的标签之一,结合CSS一起使用构成功能,行内标签 (span em ib 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="居中方式" 取值leftcenterright
  表格中的内容和单元格之间的距离cellpadding="数值"       默认数值是 2px
  表格中的单元格和单元格之间的距离 cellspacing="数值"   默认数值是 2px                        
  表格的背景颜色 bgcolor="颜色值"            
  表格的背景图片 background="图片地址"(背景图片不能含有中文) ----修饰作用
            表格的合并边框线rules="all"   (w3c不推荐使用 用CSS实现)
            表格的边框线颜色bordercolor="颜色值"(不建议使用)
            注意:背景图片的优先级高于背景颜色
   <tr>的属性:
  行的高度height               
  背景颜色bgcolor
  背景图片background
  水平对齐方式align   取值   leftcenterright
  垂直对齐方式valign取值   topmiddlebottom                                                                           
  <td>的属性:
  背景颜色height                                                
  背景图片background
  宽度  width                                 
  高度  height
  内容在单元格中的水平对齐方式   align   取值   leftcenterright
  内容在单元格中的垂直对齐方式   valign   取值   leftcenterright

[*]表格的扩充
  合并单元格的问题:
  横向合并(即左右合并): 若干个单元格合并为一个单元格
  cosplan="数值"     例如:cosplan="3"  横向合并3个单元格
  纵向合并(即上下合并)
  rowspan="数值"   例如:rowspan="3"  纵向合并3个单元格

[*]链接
  语法<a 属性="属性值">   内容   </a>
  属性:
  链接的地址href="链接的地址"   url   绝对地址或   相对地址
  打开目标文件的窗口   target
  _blank  在新的窗口中打开目标文件
   _self  在原来的窗口打开目标文件(原来的窗口被覆盖)
  定义锚点的名称   name

[*]绝对地址(网络地址)
  语法<a href="http://www/taobao.com"> 淘宝 </a>    网络地址
  <ahref="file:///C:/video/www/test.html">本地的html文件 </a>本地地址

[*]相对地址
  在同一个站点下,在同一个文件夹
  目标文件和当前文件在同一个目录,直接写名称
  目标文件在当前文件的下一级目录,xx表示文件夹名      xx/文件名称
  目标文件在当前文件的下两级目录下   xx/xx/文件名称
  目标文件在当前文件的上一级目录  ../文件名称 
  目标文件在当前文件的上两级目录   ../../文件名称

[*]特殊链接
  下载链接
  文件不用下载可以直接做链接   .html   .jpg
  文件必须下载链接.zip.exe
  邮件链接
  <a href=mailto:邮件的地址>    内容  </a>
  空链接
  在当前页面做链接   <a href="#">  内容  </a>   
  Javascript链接
  <ahref="javascript:window.close()">  内容  </a>

[*]锚点
  
  同一个页面的不同区域跳转
  定义锚点  <a name="自定义名称"></a>在页面中的任一处定义  <a></a>之间不加内容,给链接中的target用
  跳转锚点  <a href="#锚点名称">内容</a>   跳转到定义锚点的位置
  
页: [1]
查看完整版本: HTML(1)