HTML学习第二天

你还要我怎样？

已于 2022-09-16 10:44:27 修改

阅读量315

点赞数

分类专栏： HTML学习文章标签： html 学习前端

于 2022-09-16 10:24:25 首次发布

本文链接：https://blog.csdn.net/qq_46563235/article/details/125689825

版权

HTML学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.div和span标签

div标签：没有具体含义，用来划分页面的区域，独占一行

span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

2.列表

无序列表

有序列表

自定义列表

<ul>

</ul>

</ol>

type类型 start开始

<dl>

<dt>可以是文字也可以是图片</dt>

</dl>

有序列表

type的值有：1，a，A，i，I

start：取值只能是一个数字

ol里面只能放li，li里面可以放其他标签

无序列表

ul里面只能说li，li里面可以放其他标签

type默认值是disc（实心圆），type的其他值有circle（空心圆），square（实心正方形），none

3.图片标签的路径

路径分类：绝对路径、相对路径

1、绝对路径

绝对路径是指文件在硬盘上真实存在的路径。

注意：绝对路径在实际的开发过程中很少去使用，如果使用绝对路径来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到web服务器上浏览很有可能不会显示图片了，绝对路径可是使用“”或“/”字符作为目录的分隔符

2、相对路径

相对路径就是相对于自己的目标文件位置

1）html文件与图片文件在同一目录下
方法一： <img src="1.jpg" >
方法二： <img src="./1.jpg" >

2）图片文件位置在html文件所属目录下的子目录时

3)html文件位置在图片位置所属目录下的子目录时

<img src="../1.jpg" > // ../表示返回上一级

4）html文件和图片文件虽然都在一个大目录下，但是html文件与图片文件属于不同的子目录中

4、图片标签的属性

<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败）的提示信息" width="200px" height="200px"/>

当你只设置了width和height中的一个值，另外一个对应的值会自动调节，保证不让你的图片显示时失真。

5、超链接标签

能够实现不同页面的跳转

1、<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>

2、target属性：规定在何处打开文档

A、target="_self" 默认值

B、target="_black" 新窗口打开

6、table表格

（1）数据表格的创建

<table>   <!--创建表格-->
    <tr>  <!--tr表示换行-->
        <td>1</td>    <!--td表示单元格-->
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

（2）table表格的相关属性

1、宽度 width

2、高度 height

3、边框 border

4、边框颜色 bordercolor

5、背景颜色 bgcolor

6、水平对齐 align=“left或right或center”

7、cellspacing=“单元格与单元格之间的间距”

8、cellpadding=“单元格与内容之间的间隙”

（3）行（tr）属性

1、高度 height

2、背景颜色 bgcolor

3、文字水平对齐 align=“left或right或center”

4、文字垂直对齐 valign=“top或middle或bottom”

（4）单元格（td）的属性

1、宽度 width

2、高度 height

3、背景颜色 bgcolor

4、文字水平对齐 align=“left或right或center”

5、文字垂直对齐 valign=“top或middle或bottom”

如果一个单元格的设置宽度，影响的是一整列的宽度

（5）表格合并列

Colspan=“所要合并的单元格的列数” 必须给td

（6）表格合并行

Rowspan=“所要合并的单元格的行数” 必须给td

小例子：

7、表单标签

表单的作用：收集用户的信息

小例子：

效果：

代码：

<!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>Document</title>
</head>
<body>
    <form action="http://www.baidu.com" method="POST">
        用户信息：<input type="text" placeholder="请输入你的用户名" name="username">
        <br>
        密码：<input type="password" placeholder="请输入你的密码" name="mima">
        <br>
        <!-- <input type="submit" value="登录"> -->

        <button type="submit">登录</button>
        <!-- 提交信息到指定的地址 -->

        <!-- <input type="reset" value="重新输入"> -->
        <button type="reset">重新输入</button>

        <input type="button" value="aaa">
    </form>
</body>
</html>