前端学习笔记：HTML学习(二)

最新推荐文章于 2024-04-18 05:00:00 发布
最新推荐文章于 2024-04-18 05:00:00 发布
阅读量151 收藏
点赞数
分类专栏： html 基础 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45020131/article/details/105055776
版权
基础 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
html
10 篇文章 0 订阅
订阅专栏

html表格标签

1.table标签：声明一个表格，它的常用属性如下：

  • border属性 定义表格的边框 设置值是数值
  • cellpadding属性 定义单元格内容与边框的距离，设置值是数值
  • cellspacing属性 定义单元格内容与单元格之间的距离，设置值是数值
  • align属性 设置整体表格相对于浏览器窗口水平的对齐方式，设置值有：left|center|right
  1. tr标签：定义表格中的一行
    3.td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
    • align：设置单元格中内容的水平对其方式，设置值有left|center|right
    • valign: 设置单元格内容的垂直对齐方式，设置值有：top|middle|bottom
    • colspan: 设置单元格水平合并，设置值是数值
    • rowspan：设置单元格垂直合并，设置值是数值
      下面是源代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格</title>
</head>
<body>
	<!-- table>(tr>td*3)*3 -->
	<h1>表格标签</h1>
	<table border="1" width="600" height="600" align="center">
		<tr>
			<th>表头标签th</th>
			<th>表头标签th</th>
			<th>表头标签th</th>
		</tr>
    <tr>
        <td align="center" valign="top">1</td>
        <td align="center" valign="butten">2</td>
        <td align="center" valign="middle">3</td>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center" >3</td>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center">3</td>
    </tr>
</table>

<br />
<br />
<br />
<br />


	<table border="1" width="700" height="300" align="center" cellspacing="0">
    <tr>
        <th colspan="5" height="15%">基本情况</th>

    </tr>
    <tr>
        <td width="15%">姓名</td>
        <td width="25%"></td>
        <td width="15%">性别</td>
        <td width="25%"></td>
        <td rowspan="5" width="20%">
            <img src="./images/有人要处对象么没有我一会再来问.jpg" alt="图片">
        </td>
    </tr>
    <tr>
        <td width="15%">民族</td>
        <td width="25%"></td>
        <td width="15%">出生日期</td>
        <td width="25%"></td>

    </tr>
    <tr>
        <td width="15%">政治面貌</td>
        <td width="25%"></td>
        <td width="15%">健康情况</td>
        <td width="25%"></td>

    </tr>
    <tr>
        <td width="15%">籍贯</td>
        <td width="25%"></td>
        <td width="15%">学历</td>
        <td width="25%"></td>

    </tr>
    <tr>
        <td width="15%">电子信箱</td>
        <td width="25%"></td>
        <td width="15%">联系电话</td>
        <td width="25%"></td>

    </tr>
</table>

</body>
</html>

用浏览器运行程序
在这里插入图片描述

页面布局概述

语句也可以叫做排版，它指的是把文字和图片等元素按照我们的意思有机的排列在页面上，布局的方式分为两种：

  • 1.table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏
    表格的边框，从而实现布局。这种布局方式也叫做传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流
    的布局方式不用这种。

  • 2.HTML+CSS布局（DIV+CSS）:主要通过css样式是指来布局文字或图片等元素，需要用到css盒子模型、
    盒子类型、css浮动、css定位、css背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

table布局实例

table来做整体页面的布局，布局的技巧归纳为如下几点：

  • 1 按照设计图的尺寸设置表格的宽和高以及单元格的宽高
  • 2.将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距 就不占用页面空间，它只起到划分空间的作用。
  • 3 针对局部复杂的布局，可以在单元格里面在嵌套表格，嵌套表格划分局部空间
  • 4.单元格中的元素或则嵌套的表格用align和valign设置对齐方式
  • 5.通过属性或者css样式设置单元格中元素的样式。

因为现在还没有学习到下面以传统布局为例子，做一个个人简历把
源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body>
<table width="800" height="800" border="0" align="center" cellspacing="0" cellpadding="0">
    <tr>
        <td width="260" valign="top" bgcolor="#f2f2f2">
            <table width="200" align="center">
                <tr height="100">
                    <td></td>
                </tr>
                <tr>
                    <td align="center" ><img src="./images/有趣.jpg" alt="图片"></td>
                </tr>
                <tr>
                    <td align="right"><h3>ocean</h3></td>
                </tr>
                <tr>
                    <td align="right"><h3>20112939429</h3></td>
                </tr>
                <tr>
                    <td align="right"><h3>ocean@126.com</h3></td>
                </tr>
            </table>
        </td>
        <td width="30"></td>
        <td width="480" valign="top">

            <table width="480" border="0" cellpadding="0" cellspacing="0">
                <tr height="80">
                    <td></td>
                </tr>
                <tr>

                    <td align="right">
                    <img src="./images/用我们宾阳话你就是个压嘿.jpg">
                </td>
                </tr>
            </table>
            <br>
            <hr>
            <br>
            <table width="480" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2"><b>个人基本情况</b></td>

            </tr>
            <tr>
                <td><b>姓名：</b>ocean</td>
                <td><b>籍贯：</b>china</td>
            </tr>
            <tr>
                <td><b>性别：</b>男</td>
                <td><b>身高：</b>174cm</td>
            </tr>
            <tr>
                <td><b>民族：</b>汉</td>
                <td><b>体重：</b>70kg</td>
            </tr>
            <tr>
                <td><b>出生日期：</b>1212年12月12日</td>
                <td><b>电话：</b>123123123123</td>
            </tr>
            <tr>
                <td><b>居住地址：</b>花果山</td>
                <td><b>专业：</b>猪类养殖</td>
            </tr>
        </table>
            <br />
            <br />
            <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><b>教育背景及工作经历</b></td>
                </tr>
                <tr>
                    <td><b>2019.05-2019.12</b> 花果山大学&nbsp;猪类养殖专业</td>
                </tr>
                <tr>
                    <td><b>2020.01-2020.04</b> 重庆市家里蹲养猪有限公司 任职养猪人</td>
                </tr>
            </table>
            <br />
            <br />
            <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><b>所获证书</b></td>
                </tr>
                <tr>
                    <td><b>2019.12</b>优秀养猪达人荣誉证书</td>
                </tr>
                <tr>
                    <td><b>2020.03</b> 优秀养猪代表</td>
                </tr>
            </table>
        </td>
        

        <td width="30"></td>
    </tr>
</table>
</body>
</html>

运行程序，在浏览器中打开。网页效果如下
在这里插入图片描述

html表单标签

表单用于手机不同类型的用户输入，表单有不同类型的标签组成，相关标签及属性用法如下：
1.from标签 定义整体的表单区域

  • action属性 定义表单数据提交地址
  • method属性 定义表单提交的方式， 一般有“get” 和“post”两种方式
  1. label标签 为表单元素定义文字标注
  2. input标签 定义通用的表单元素

    • type属性

      • type=“text” 定义单行文本输入值
      • type=“password” 定义密码输入框
      • type=“radio” 定义单选框
      • type=“checkbox” 定义复选框
      • type=“submit” 定义提交按钮
      • type=“file” 从系统中选入文件
      • type=“reset” 定义重制按钮
      • type=“image” 定义图片作为提交按钮， 用src属性定义图片地址
      • type=“hidden” 第一一个隐藏的表单域，用来存储值

    • value属性 定义表单元素的值

    • name属性 定义表单元素的名称，此名称时提交数据时的键名
      在下面举一个小例子，来观察表单不同类型中的不同用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<form action="" method="get">
    <h1>表单注册</h1>
    <div>
        <label>用户名：</label>
        <input type="text" name="username" />
    </div>
    <br />
    <div>
        <label>密&nbsp;&nbsp;&nbsp;&nbsp码：</label>
        <input type="password" name="password">
    </div>
    <br />

    <div>
        <label>性&nbsp;&nbsp;&nbsp;别：</label>
        <!-- type="radio"为选项框，当name="gender"时，单选 -->
        <input type="radio" name="gender" value="0"> 男
        <input type="radio" name="gender" value="1"> 女
        <input type="radio" name="gender" value="2"> 元谋人

    </div>
    <br />

    <div>
        <label>爱&nbsp;&nbsp;&nbsp;好：</label>
        <!-- checkbox多选框 -->
        <input type="checkbox" name="like" value="girl"> 美女
        <input type="checkbox" name="like" value="study"> 学习
        <input type="checkbox" name="like" value="python"> python
        <input type="checkbox" name="like" value="web"> 前端

    </div>

    <br />
    <div>
        <label>照&nbsp;&nbsp;&nbsp;片：</label>
        <input type="file" name="photo">
    </div>

    <br />
    <div>
        <label>个人介绍：</label>
        <!-- <textarea> 标签可以输入多行文字-->
        <textarea name="info"></textarea>
    </div>

    <br />
    <div>
        <!-- 下拉表单，一般以select和option连用，option嵌套在select标签中-->
        <label>国&nbsp;&nbsp;&nbsp;家：</label>
        <select name="slist">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="han">韩国</option>
            <option value="jp">日本</option>
            <option value="fd">法国</option>
        </select>
    </div>
    <br />
    <div>
        <input type="submit" value="上传">
        <input type="reset" value="重制">
<!--   使用图片提交时，可能会出现两重提交的BUG，所以不建议使用，<input type="image" src="images/有趣.jpg" value="提交">-->
    </div>

</form>

</body>
</html>

运行程序
在这里插入图片描述
以上几乎都涵盖了表单提交的内容，然后html的学习就到这里啦，后面会写一些关于CSS类型的文章。

mr.ocean
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记：实现一个盒子水平居中，学习代码
06-21
在提供的压缩包文件中，"前端学习笔记：实现一个盒子水平居中"可能包含了更多关于这个主题的实例和详细解释。通过阅读和分析这些笔记，你可以更深入地理解这些方法，并可能发现其他实用的技巧。
前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源.zip
01-05
前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源 前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源 前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, ...
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 1800
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
前端学习笔记：表格篇
Lucifer__hell的博客
01-25 1754
1、创建表格 基础知识： 创建表格的四个元素：table、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束 2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 4、<th>…</th&
Web前端学习笔记
DAOkonglong的博客
10-16 3514
Web前端学习
黑马前端学习笔记
qq_40437045的博客
03-10 1596
​​​​​​HTML第一天 一、网页 二、什么是HTML 三、HTML标签 CSS第一天 一、CSS 简介 二、 CSS 基础选择器 三、CSS 字体属性 四、CSS 文本属性 五、CSS 的引入方式 HTML第一天 网页 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页..
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3697
Web前端学习笔记（1）
前端学习笔记：form标签以及各种输入框+按钮
Lucifer__hell的博客
03-09 4745
1、网站与用户的交互实现？ 使用HTML表单（form），表单可以把用户输入的数据传到服务器端，这样服务器端就可以处理表单传过来的数据。 2、语法实现： <form method="传送方式" action="服务器文件"></form> 1、<form>:<form>标签是成对出现的，以<form>开始，以</form>结束。 2、action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3、metho
前端学习笔记—HTML5
roydon
07-06 2060
HTML5
数字IC前端学习笔记：LFSR（线性反馈移位寄存器）
前进，才知道自己的渺小
01-17 3271
LFSR（线性反馈移位寄存器）用于产生可重复的伪随机序列PRBS（Pseudo-Random Binary Sequence），结构包括n级D触发器和一些异或门（或同或门）组成，在每个时钟沿，后级D触发器输出会以某种方式反馈至前级电路，而反馈结果为某些寄存器的输出进行异或运算得到。
前端学习笔记：JavaScript基础
ycsss的博客
06-09 1415
黑马Pink老师的JavaScript教程：https://www.bilibili.com/video/BV1Sy4y1C7ha?from=search&seid=3161590902859712011 本文在原教程的基础上对目录结构进行了排序和裁剪，一些太基础的概念没有写入。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。 目录Chapter1. 概述1.1 JavaScript及其历史1.2 JavaScript作用1.3 HTML/CSS/JavaScr
Web前端开发学习笔记
qq_41622776的博客
02-02 2504
自学笔记，仅供参考
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
前端学习笔记, html, css, js.zip
01-05
前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习...
pycharm： 将输出结果自动换行
热门推荐
qq_45020131的博客
02-20 1万+
有时在pycharm中输出打印结果时，输出的内容太长，看起来不方便，在pycharm有几种方式可以解决这个问题： 不自动换行之前： 方法一：对当前文件输出进行换行操作 方法二：编辑时自动换行，对所有文件进行操作 File -> Setting -> Editor -> General -> Soft-wrap files ...
十六倍数看视视频，无需会员，两行代码解决
qq_45020131的博客
10-15 1万+
快速看视频，无需会员
让selenium不自动关闭浏览器
qq_45020131的博客
11-24 9314
让selenium不自动关闭浏览器
scrapy命令行详解
qq_45020131的博客
02-27 1142
前言 最近闲来无事，在使用scrapy写爬虫时发现自己在终端中却只会创建项目和运行scrapy shell，后来查看了一些scapy命令行的官方文档，发现其中几个还是挺有意思的。scrapy命令行官方文档 命令行介绍 scrapy -h 显示可用的命令行工具 scrapy -h # 可显示所有可用的命令 创建项目，创建完成之后可用tree命令查看一下目录结构 1. 创建项目： scrapy...
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值