htm第一天(修改) 10.15

二 HTML的常用标签

2.1 a标签超链接标签



href是a标签的属性 并且编辑当前a标签跳转的路径

<a href="" >百度一下 你就知道</a>

代码书写方式 ：   a + tab

路径分为：
相对路径  参照当前文件的路径
绝对路径  http://  https://  ftp://  file://

    
<a href="www.baidu.com">niha  shahsahas </a>
<a href="index.html">你好 哈哈哈</a>
<a href="hehe/index4.html">你好 index4</a>
        
<a href="hehe/heihei/index5.html">index5</a>

2.2 图像标签 img


<img src="" >   img+tab
src 用来添加要展示的图片路径 此处也可以写 相对路径和绝对路径

绝对路径
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1340978268,3705912202&fm=26&gp=0.jpg" >


相对路径
A 需要将资源图片放到当前工程的img文件夹中
B 添加图片
<img src="img/1-2.jpg" >

修改图片的尺寸
<img src="img/1-2.jpg"  width="320"  height="800" >
img标签会等比例缩放


图像超链接
    <a href="http://www.baidu.com">
            <img src="img/1-2.jpg" >
    </a>

2.3 输入框 input 和按钮 button

<input  />  <button>百度一下</button>

2.4 table标签表格

2.4.1 什么是table标签表格标签

就是可以使用html标签完成一个类似于 excel表格的效果

在table标签中分为行和列，但是实质上是行 tr 和每行中的单元格 td

2.4.2 创建单元格

3行4列

A 创建一个table标签

B 需要几行就创建几个tr

C 需要几列就在每个tr中创建几个td


    <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>

表达式输入：


 table>tr*7>td{你好世界}*8 
 a{Nihao shijie$}*8

2.4.3 table的常用属性


<table  border="3" width="800" height="500"  bordercolor="blue" cellspacing="0"
                   cellpadding="10"  bgcolor="green"  background="img/1-2.jpg" 
                   align="center"
          
          >
            <tr align="right" valign="top">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
         </table>  
border 边框   width  height 宽高   bordercolor 边框颜色   cellspacing 单元格间距  cellpadding 内填充（内容到边框之间的距离 ）bgcolor 背景颜色 background背景图片

align ： 如果给table添加 则代表table在网页中的水平位置
         如果给tr添加  则代表内容在单元格中的水平位置
        left  center  right
valign 垂直对齐方式  top   middle  bottom

2.4.4 合并单元格


  <table border="2" width="800" height="500">
            <tr>
                <td colspan="5">1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td rowspan="3">2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
          </table>


1 创建table
2 考虑是水平还是垂直 水平colspan（向后合并）  垂直rowspan（向下合并） 
3 干掉多余的

练习：


1 创建一个table  （数最多的  不够的肯定是合并了）  4*2
2 合并
3 干掉多余的

 <table border="2" cellspacing="0">
            <tr>
                <td colspan="2">联系人</td>
            </tr>
            <tr bgcolor="green">
                <td>姓名</td>
                <td>张三</td>
            </tr>
            <tr>
                <td rowspan="2">电话</td>
                <td>15899993333</td>
            </tr>
            <tr>
                <td>15166333333</td>
            </tr>
          </table>

练习

七行一列



1 导入素材

 <table  width="1200" height="730" align="center" background="img/bg.jpg">
            <tr align="right" height="40">
                <td>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                </td>
            </tr>
            <tr align="center" height="150">
                <td>
                    <img src="img/baidulogo.png" height="120">
                </td>
            </tr>
            <tr align="center" height="50">
                <td>
                    <input type="text" style="width: 400px;"><button>百度一下</button>
                </td>
            </tr>
            <tr align="center" height="160">
                <td>
                    <img src="img/d_1.png" height="150">
                    <img src="img/d_2.png" height="150">
                    <img src="img/d_3.png" height="150">
                    <img src="img/d_4.png" height="150">
                </td>
            </tr>
            <tr align="center" height="160">
                <td>
                    <img src="img/d_5.png" height="150">
                    <img src="img/d_6.png" height="150">
                    <img src="img/d_7.png" height="150">
                    <img src="img/d_8.png" height="150">
                </td>
            </tr>
            <tr align="center" height="100" valign="bottom">
                <td>
<a href="">把百度设为首页</a>
<a href="">关于百度</a>
<a href="">About baidu</a>
</td>
</tr>
<tr align="center" valign="top">
<td>
©2021 Baidu <a href="">使用百度前必读</a>
京ICP证000000000000000001号
</td>
</tr>
      </table>

总结

今天学习了:

a标签超链接标签的学习和使用
图像标签 img的学习
输入框 input和按钮button的学习

table 表格标签的学习

<a href=""></a>
注意这里的绝对路径和相对路径的区别
<img src="">

<input/<input  />  <button>   </button>

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>


单元格的合并: colspan  rowspan

posted @ 2021-10-15 09:34 吴光熠阅读(175) 评论(0) 收藏举报

刷新页面返回顶部