web前端-HTML（2）

最新推荐文章于 2024-03-01 23:59:17 发布

_雨_

最新推荐文章于 2024-03-01 23:59:17 发布

阅读量550

点赞数

分类专栏： Javaweb #HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_53616401/article/details/130595626

版权

Javaweb 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

#HTML

2 篇文章 0 订阅

订阅专栏

视频、音频标签

视频标签: <video>

属性

src: 规定视频的url

controls: 显示播放控件

width: 播放器的宽度

height: 播放器的高度

音频标签: <audio>

属性:

src: 规定音频的url

controls: 显示播放控件

段落标签

换行标签: <br>

注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

段落标签: <p>

如: <p> 这是一个段落 </p>

文本格式标签

效果	标签	标签(强调)
加粗	b	strong
倾斜	i	em
下划线	u	ins
删除线	s	del

代码演示：

这里我们模拟实现了一个了新浪新闻的一个网页布局，这里就讲我们之前学到的表情运用在了一起实现了正文的布局在下面的代码中，还用到了几个css的属性

分别是以下几个更多的属性可以去查阅官方文档w3school 在线教程

- text-indent: 设置段落的首行缩进
- line-height: 设置行高
- text-align: 设置对齐方式, 可取值为 left / center / right

<!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>xxxxxxx</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

        a {
            color: black;
            text-decoration: none; /* 设置文本为一个标准的文本 */
        }

        p {
            text-indent: 35px; /* 设置首行缩进 */
            line-height: 40px; /* 设置行高 */
        }

        #plast {
            text-align: right; /* 对齐方式 */
        }
    </style>
</head>
<body>

    <!-- 标题 -->
    <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self"></a>  > 正文

    <h1>xxxxxxx</h1>

    <hr>
    <span id="time">2023年03月02日 21:50</span>
    <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/1.mp4" controls width="950px"></video>

    <!-- 音频 -->
    <!-- <audio src="audio/1.mp3" controls></audio> -->

    <p>
xxxxxxx
    </p>

    <p>
xxxxxxx
    </p>

    <img src="img/1.jpg">

    <p>
xxxxxxx
    </p>

    <img src="img/2.jpg">

    <p>
xxxxxxx
    </p>

    <p id="plast">
        
    </p>
</body>
</html>

注意事项

- 在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符（&nbsp；）来生成空格，如果需要多个空格，就使用多次占位符。

- 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下：

显示结果	描述	占位符
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	'

页面布局

在上面我们完成了页面的基本排版，但是我们会发现，我们设计出来的页面，都是铺满了整个的页面，但是我们去看原始的页面，我们会发现，他们的页面都是居中显示的，并没有铺满整个浏览器，这时候就需要我们对页面进行布局了。

那么想要完成和正常页面一样的模型就需要用到css样式中的盒子模型

盒子模型

页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

布局标签

布局标签非常的重要：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

div标签：

特点

一行只显示一个（独占一行）

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高（width、height）、

span标签：

特点

一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高（width、height）

代码演示:

其中的xxx内容可自己修改

使用盒子模型之后，我们对比上面的代码，就增加了这么一段，设置了外边框区域

#center {
width: 65%;
/* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上右下左 */
margin: 0 auto;
}

<!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>xxxxxxx</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

        a {
            color: black;
            text-decoration: none; /* 设置文本为一个标准的文本 */
        }

        p {
            text-indent: 35px; /* 设置首行缩进 */
            line-height: 40px; /* 设置行高 */
        }

        #plast {
            text-align: right; /* 对齐方式 */
        }

        #center {
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    
    <div id="center">
        <!-- 标题 -->
        <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self"></a>  > 正文

        <h1>xxxxxxx</h1>

        <hr>
        <span id="time">2023年03月02日 21:50</span>
        <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
        <hr>

        <!-- 正文 -->
        <!-- 视频 -->
        <video src="video/1.mp4" controls width="950px"></video>

        <!-- 音频 -->
        <!-- <audio src="audio/1.mp3" controls></audio> -->

        <p>
xxxxxxx
        </p>

        <p>
xxxxxxx
        </p>

        <img src="img/1.jpg">

        <p>
xxxxxxx
        </p>

        <img src="img/2.jpg">

        <p>
xxxxxxx
        </p>

        <p id="plast">

        </p>  
    </div>
</body>
</html>

表格标签

<table>

<table> : 用于定义整个表格, 可以包裹多个 <tr>，常用属性如下：
border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 规定单元之间的空间

<tr> : 表格的行，可以包裹多个 <td>
<td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th>

代码演示：

注意：

整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)

<!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>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>xx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>xx</td>
            <td>xxxxxxx</td>
        </tr>
    </table>

</body>
</html>

表单

基本介绍

我们日常的上网过程中，基本上每天都会遇到，登录页面这些等，其实这些都是一个表单，我们填写完表单的数据之后，点击提交机会把我们输入的数据提交到服务端

表单标签: <form>

表单属性:

action: 规定表单提交时，向何处发送表单数据，表单提交的URL。

method: 规定用于发送表单数据的方式，常见为： GET、POST。

GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。

POST：表单数据是在请求体（消息体）中携带的，大小没有限制。

表单项标签: 不同类型的input元素、下拉列表、文本域等。

input: 定义表单项，通过type属性控制输入形式

select: 定义下拉列表

textarea: 定义文本域

代码演示：

get方法

<!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>HTML-表单</title>
</head>
<body>
    <!-- 
    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
    -->   
	
    <form action="" method="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>
	
</body>
</html>

post方式

<!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>HTML-表单</title>
</head>
<body>
    <!-- 
    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
    -->   
	
    <form action="" method="post">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>
	
</body>
</html>

表单的注意实现和使用细节

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

表单项

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是

<input>: 表单项 , 通过type属性控制输入形式。

<select>: 定义下拉列表,

<option> 定义列表项<textarea>: 文本域

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

_雨_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端-HTML（2）

在上面我们完成了页面的基本排版，但是我们会发现，我们设计出来的页面，都是铺满了整个的页面，但是我们去看原始的页面，我们会发现，他们的页面都是居中显示的，并没有铺满整个浏览器，这时候就需要我们对页面进行布局了。我们日常的上网过程中，基本上每天都会遇到，登录页面这些等，其实这些都是一个表单，我们填写完表单的数据之后，点击提交机会把我们输入的数据提交到服务端。页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。否则，无法提交该表单项。
复制链接

扫一扫