培训第6天----html初识

    今天我们来初步认识一下html。

    html (Hyperlink Reference)意为超文本标记语言。“超文本”指的是在页面中可以有图片,链接,甚至

音乐,程序等非文字元素。超文本标记语言的结构包括头部分(head)和主体部分(body)。其中头部分提

供 关于网页的信息,主体部分提供 网页所要呈现的内容。

    比如我们想显示一张图片时:


      DOCTYPE 在页面中用来指定页面所使用的html版本。要想制作一个符合标准的页面,一个必不可少的关键组

成部分就是DOCTYPE声明。  <!DOCTYPE html> 声明必须在html页面的第一行,在<html>标签之前,但

<!DOCTYPE html>并不是标签。

    在html 5中,声明只有一种类型。 就是  <!DOCTYPE html>。

    <html></html>标签限定了文档(页面)的开始点和结束点,在它们之间的文档的头部和主体。

    <head></head>标签用于定义文档的头部,它是所有头部元素(标签)的容器。<head>中的元素(标签)

可以引用脚本,指示浏览器在哪里找到样式表,提供元信息等。绝大多数文档的头部包含的信息不会作为显示内

容呈现给读者。

    <title></title>标签可以可以定义文档的标题。

    <body></body>标签定义了文档的内容。

    提到了标签,就要说一下,单标签和双标签。单标签:有一个标签组成,如<hr/>,<img/>,<meta/>。双标签

有两个标签组成:如<title></title>,<html></html>等。

    单标签后面的“/”可以写可以不写,但是为了规范我们应该写“/”。

    当我们访问本地的html页面时,访问url路径为:file:///C:/Users/huluwawa/Desktop/test.html。其中“file:///”

代表的是“本地电脑”。

    src(source)本意为源头,这里指的是源文件。alt 是一个属性,当图片因某种原因不显示时,原来显示图片的地方

就会被alt后面的值代替。


    <br/>(blank row) 是一个换行符。<hr/>是一条水平分割线,也用换行的作用。标题(h1-h6)标签是指网页html

中对文本标题所进行的着重强调的一种标签,以标签<h1>-<h6>依次显示重要性的递减。制作<h>标签的主要意义就

是告诉搜索引擎这是一段文字的标题,起强调作用。<h1>定义最大的标题,<h6>定义最小的标题,表现是加粗,控制

字体大小。

    <ol> <li>列表标签,有序列表。
    <ul><li>无序列表   只是把前面的数字变成了点的形式。

    <dl><dt><dd>用于自定义列表,可以进行嵌套。


    html页面有3中布局方式:1.table(表)2.div 3.ul,ol,dl(列表)。一个好的页面布局,可以使页面更加漂亮美观。

    <marquee>标签可以将文本变成滚动的形式。<marquee direction="right" bgcolor="green"

scrolldelay="10" width="50%" height="10%" οnmοuseοver=this.stop() οnmοuseοut=this.start()>

<qiaotao style = "color:gold"> 凤凰传奇</qiaotao>

</marquee>。

       下面我们学习html中的表格,也就是<table></table>标签。<tr><td>是table中必不可少的部分。

            定义表格:<table></table>

            定义表行:<tr></tr>

            定义列(单元格):<td></td> ,单元格的宽度是自适应的(其中的内容决定的)。

 

 1.表格属性

               1、<table> 属性
                    1、width
                         设置表格宽度
                    2、height
                         设置表格高度
                    3、align
                         设置 表格 在其 父元素中的水平对齐方式,取值:left,center,right
                    4、border
                         边框,边框宽度,以px为单位的数值,px可以省略
                    5、cellpadding
                         单元格内边距
                         单元格边框与内容之间的距离
                    6、cellspacing
                         单元格外边距
                         单元格与单元格之间或者单元格与表格之间的 距离
                    7、bgcolor
                         背景颜色
               2、<tr> 属性
                    1、align
                         该行的内容 水平对齐方式
                    2、valign
                         该行的内容 垂直对齐方式
                         取值:top,middle,bottom
                    3、bgcolor
               3、<td> 属性
                    1、width
                    2、height
                    3、align
                    4、valign
                    5、bgcolor
                    6、colspan
                         设置单元格跨列
                    7、rowspan
                         设置单元格跨行
          4、表格中的其他标记
               1、<caption></caption>
                    作用:为表格定义标题
                    位置:表格正上方居中显示
                    <table>
                         <caption>标题</caption>
                         <tr>
                              <td></td>
                              <td></td>
                         </tr>
                    </table>
               2、行标题或列标题
                    列标题:第一行中的每一列,加粗,水平居中的效果显示
                    行标题:每行里面的第一列, 加粗,水平居中的效果显示
                    行(列)标题:<th></th>
                     <th></th>作用 与 <td></td>一模一样
     5、表格的复杂应用
          1、行分组
               表格可以被划分成3个部分
               1、表头 <thead></thead>
               2、表主体 <tbody></tbody>
               3、表尾     <tfoot></tfoot>

               <table>
                    <tbody>
                         <tr></tr>
                         <tr></tr>
                    </tbody>
               </table>

               注意: 如果不对表格行进行分组的话,那么默认都属于 tbody 中
          2、不规则表格
               每行中的列数,不是统一化的。
               1、跨列
                    合并列,让指定的单元格,横向向右,合并几个单元格(包含自己)
                    语法:
                         td 的 colspan 属性
               2、跨行
                    合并行,让指定的单元格,纵向向下,合并几个单元格(包含自己)
                    语法:
                         td 的 rowspan 属性

               注意: 无论是跨行还是跨列,被合并的单元格一定从代码中删除出去
          3、表格的嵌套
               在一个表格中,又嵌入了另外一个表格
               被嵌套的表格必须出现在<td>中
               <table>
                    <tr>
                         <td>
                              <table>
                                   <tr>
                                        <td>
                                            
                                        </td>
                                   </tr>
                              </table>
                         </td>
                    </tr>
               </table> 


2.表格特有的样式属性
1、边框合并
               属性:border-collapse
               取值:
                    1、separate
                         默认值,分离边框模式
                    2、collapse
                         边框合并模式
2、边框边距
               1、作用
                    设置相邻单元格边框之间的距离(类似于cellspacing)
               2、属性
                    border-spacing
                    取值:
                         1、取1个值
                              表示水平和垂直间距相等
                         2、取2个值
                              第一个值表示的 水平间距
                              第二个值表示的 垂直间距
                              两个值之间用 空格 隔开
               3、要求
                    border-collapse必须为separate
                    必须为分离边框模式时有效
3、标题位置
               <caption></caption>
               作用:将标题位置由默认的位置改到表格之下
               属性:caption-side
               取值:
                    1、top
                         默认
                    2、bottom
                         标题位于表格之下
4、显示规则
               1、作用
                    指定浏览器以什么样的方式来布局一个表格。实际是指定了单元格的算法规则

                    默认算法:单元格的宽由内容来决定,不受设置的width值来限定。
               2、属性
                    table-layout
                    取值:
                         1、auto
                              默认值,自动,列宽由内容来决定
                         2、fixed
                              固定表格布局,列宽由设定的值决定。
               3、自动表格布局&固定表格布局
                    1、自动表格布局(auto)
                         单元格的大小会适应内容大小
                         在表格复杂时,加载会比较慢
                         适用于不确定每列大小时使用
                         传统表格表现方式
                    2、固定表格布局(fixed)
                         单元格的大小由设定的值来决定,与内容无关
                         会加速显示表格,浏览器在加载完第一行的时候就不用再计算了。 
5、隐藏的显示效果
属性:   visibility: collapse
用在表格元素上,删除一行或一列,不影响表格整个布局


   

    






    


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值