自学前端第二天

最新推荐文章于 2024-04-19 12:54:59 发布

弹走鱼尾纹~

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量152

点赞数

文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_41575188/article/details/123412801

版权

今天主要学习了列表标签、表格标签、表单、图片标签、超链接

1.列表标签：

列表分有序列表、无序列表以及自定义列表

有序列表外层标签用<ol></ol>,内层只能用<li></li>，而li内可以嵌套各种标签。

有序标签有type和start属性：

type:1,a,A,i,I

start:开始位置，取值只能是一个数字

无序列表外层标签用<ul></ul>,内层只能用<li></li>,而li内可以嵌套各种标签
自定义列表标签用<dl></dl>,内层用<dt></dt>、<dd></dd>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol type="a" start="3">
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ol>
    <!-- 无序列表 -->
    <ul type="disc">
        <li>222</li>
        <li>333</li>
        <li>333</li>
    </ul>
    <!-- <自定义列表> -->
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    
</body>
</html>

2.表格标签

<table></table>标签:定义外面一个表格框架

<tr></tr>标签定义行

<td></td>定义单元格

table的属性：

border 表格外边框宽度
width 表格宽度 单位支持px,百分比
height 表格高度 单位支持px,百分比
align 水平对齐 center、right、left，默认left
bordercolor 表格外边框颜色
bgcolor 表格背景色
cellspaceing 单元格与单元格之间的间距
cellpadding 单元格与内容之间的间距

<tr><td>属性：

height 高度
bgcolor 背景颜色
align 文字水平对齐left、right、center
valign 文字垂直对齐top、middle、bottoom

td有width属性，tr是没有width属性的！

<table 
    border="1" 
    width="400" 
    height="200" 
    align="center" 
    bordercolor="black" 
    bgcolor="pink" 
    cellspacing="0"
    cellpadding="20"
    >
        <tr height="20" bgcolor="yellow" align="center" valign="top">
            <td>2</td>
            <td>2</td>
        </tr>
        <tr height="20" bgcolor="yellow" align="center">
            <td height="10" width="10" bgcolor="red">1</td>
            <td>1</td>
        </tr>
    </table>

还有一个比较容易弄混的，单元格的行合并和列合并，行合并用rowspan，列合并用colspan

比如合并两列单元格，设置成colspan="2"

    <table border="3" bordercolor="pink" cellspacing="0" cellpaddig="0" align="center">
        <tr height="50" align="center">
            <td width="100">会员姓名</td>
            <td width="100"></td>
            <td width="100">出生日期</td>
            <td width="100"></td>
        </tr>
        <tr height="50" align="center">
            <td width="100">身份证号</td>
            <td  colspan="3"></td>
        </tr>
        <tr height="50" align="center">
            <td width="100">通信地址</td>
            <td  colspan="3"></td>
        </tr>
        <tr height="50" align="center">
            <td width="100">联系电话</td>
            <td  colspan="3"></td>
        </tr>
        <tr height="50" align="center">
            <td width="100">会员卡号</td>
            <td  colspan="3"></td>
        </tr>

    </table>

3.表单标签

外层用<form></form>定义一个表单，包含action属性来设置提交后跳转的页面，method方法，分为get和post方法，内部用input标签设置一个输入框，包含type、placeholder、name属性

type：

submit 提交
button 按钮
password 密码加密
text 文本
reset

placeholder 提醒需要输入的内容

name 必须加上name属性才能将数据提交到服务器

 <form action="https://www.baidu.com" method="get">
        用户信息:<input type="text" placeholder="请输入你的用户名"  name="username">
        <br>
        密码<input type="password" placeholder="请输入你的密码" name="password">
        <br>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>

4.超链接

超链接用<a></a>标签，内部属性href，设置点击跳转的地址，title属性设置鼠标悬停上去提示的信息，target 属性设置在原窗口还是新窗口打开 target="_self" 默认值原窗口，target="_blank" 新窗口

<body>
    <a href="https://www.baidu.com" title="百度超链接" target="_blank">百度</a>
    <a href="百度超链接跳转页面.html">自定义</a>
    <a href="https://www.baidu.com" title="百度查询"><img src="百度.gif"></img></a>
</body>

5.图片标签

图片标签用<img></img>,内部用src定义图片的路径，有相对路径和绝对路径两种，一般用相对路径比较好打包项目，alt属性定义在图片加载失败时的文字，title属性定义鼠标悬停在图片上的文字，width、height定义图片的宽和高

<img src="img.jpg" alt="图片加载失败！" title="这是一张风景图" width="400">

弹走鱼尾纹~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学前端第二天

今天主要学习了列表标签、表格标签、表单、图片标签、超链接1.列表标签：列表分有序列表、无序列表以及自定义列表有序列表外层标签用<ol></ol>,内层只能用<li></li>，而li内可以嵌套各种标签。有序标签有type和start属性：type:1,a,A,i,Istart:开始位置，取值只能是一个数字无序列表外层标签用<ul>&lt...
复制链接

扫一扫