自学前端——HTML第二天

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量94 收藏
点赞数
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AAAEEESS/article/details/117342729
版权

脑图如下

html第二天脑图.png

1.表格

1.1表格标签

1.<table>：表格标签；双标签。
2.<tr>：行标签； 双标签。
3.<td>：单元格标签；双标签。
总结：表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td> 标签定义）。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
实现代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
			<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
			<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
			<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
			<tr><td>张学友</td> <td>男</td> <td>55</td></tr>
		</table>
	</body>
</html>

结果如下：

11.png

4.<th>：表头标签；默认加黑，加粗，居中;双标签。
代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<table>
			<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
			<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
			<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
			<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
			<tr><td>张学友</td> <td>男</td> <td>53</td></tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述
5.<caption>：表格标题；默认显示外部居中；双标题。
代码如下：

<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table >
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

结果如下:
在这里插入图片描述
不常用（了解）
6.<thead>：结构头；双标签。
7.<tbody>：结构体；双标签。
8.<tfoot>：结构底；双标签。

1.2表格属性

1.border：表格的边框
2.width:宽度
3.height：高度
4.cellspacing：单元格与单元格之间的距离
5.align: left/center/right
注意： 当给表格设置居中整个表格会居中（文字不会居中） 当指定tr 或者td 文字居中
6.cellspadding：单元格与内容之间的距离
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- align为居中  border=边框   cellspacing=单元格与单元格的距离	cell padding为单元格与文字的距离   -->
		<table align="center" border="1" cellspacing="0" cellpadding="20" width="500px" height="240px">
			<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
			<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
			<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
			<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
			<tr><td>张学友</td> <td>男</td> <td>53</td></tr>
		</table>
	</body>
</html>

运行结果：
在这里插入图片描述

7.colspan:列合并
8.rowspan：行合并

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="500" height="249" border="1" cellspacing="0">
		<tr>
			<td></td>
			<td colspan="2"></td>
			<!-- 跨列去掉的单元格<td></td> -->
		</tr>
		<tr>
			<td rowspan="2"></td>
			<td ></td>
			<td></td>
		</tr>
		<tr>
			<!-- 跨行去掉的单元格<td></td> -->
			<td></td>
			<td></td>
		</tr>
		<!-- 跨行合并：rowspan="合并单元格的个数" -->
		<!-- 跨列合并：colspan="合并单元格的个数" -->
		<!-- 行竖列横 -->
		</table>
	</body>
</html>

运行结果：
在这里插入图片描述

2. 列表

1.无序列表

<ul><li></li></ul>

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<h4>你喜欢的食物</h4>
		<ul>
			<!-- 无序列表的各个列表项之间没有顺序之分，是并列关系，ul里面只能放li    li里面可以放任何标签 -->
			<li>榴莲</li>
			<li>臭豆腐</li>
			<li>鲱鱼罐头</li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>

运行结果：
在这里插入图片描述

2.有序列表

<ol><li></li></ol>

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<h4>好吃排名</h4>
		<ol>
			<!-- ol里面只能嵌套li，li里面可以放任何 -->
			<li>榴莲  1W</li>
			<li>臭豆腐 1K</li>
			<li>鲱鱼罐头 100</li>
		</ol>
	</body>
</html>

运行结果：
在这里插入图片描述

3.自定义列表

<dl><dt></dt><dd></dd></dl>

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义列表</title>
	</head>
	<body>
		<dl>
			<!-- dl里面只能放dt和dd，dt和dd数量是不限制的，一般一个dt有几个dd  -->
			<!--  dl标签用于定义描述列表（或定义列表）dt（定义项目/名字）dd(描述项目/名字) -->
			<dt>关注我们</dt>
			<dd>新浪微博</dd>
			<dd>官方微信</dd>
			<dd>联系我们</dd>
		</dl>
	</body>
</html>

运行结果：
在这里插入图片描述

3.表单

3.1 input属性

1.text：文本框
2.password：密码框
3.radio：单选按钮
4.checkbox：复选框
5.button：普通按钮
6.reset：重置按钮  需要配合form表单才有作用
7.submit：提交按钮
8.image   属性  src
9.file 文件按钮   上传图片
## **属性说明**
name属性
1.发送后台......
2.name的标识 对于单选按钮  只能选择一个

value：文本框默认显示的文字
checked：默认选中
可以写一个属性 也可以 属性名=属性值
label用法
1.<label>请输入<input type="text"> <input type="text"></label>
2.<label for="a">请输入</label> <input type="text" id="a">

代码如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>input 表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>
</html>

运行结果：
在这里插入图片描述

3.2文本域

<textarea>：用户留言；双标签；可以设置每行显示几个字符，显示几行文字后需下滑才能看到后面的文字。
属性说明：
cols=“50”：每行50个字符。
rows=“5”：显示5行。
代码如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>textarea 文本域</title>
</head>
<body>
    <form>
        今日反馈:
        <textarea cols="50" rows="5">
		我
		来
		留
		言
		啦
		啦
		</textarea>
    </form>
</body>
</html>

在这里插入图片描述

3.3下拉表单

<select>：双标签
属性：
selected：设置改内容为默认选择的内容。

代码如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>select下拉表单</title>
</head>
<body>
    <form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
第二天结束啦，每天继续，冲啊！

AAAEEESS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最全最清晰 | 自学前端之html第一天
m0_74295014的博客
07-10 332
最全最清晰的html知识点学习，自用
DAY 12 | 自学前端第十二天
pangpangcm的博客
04-20 222
CSS3 2D和3D 转换
HTML5 标签汇总
热门推荐
无
06-16 1万+
文档结构   html页面的基本结构如下，其中head为页面的头部信息，body为页面的主体信息。 <!DOCTYPE html> <html lang="zh-CN"> <head></head> <body></body> </html> 文档元素 DOCTYPE   DOCTYPE 即文档类型（document type），用于声明当前文档类型，告知浏览器使用哪种HTML版本（<!DOCTYPE htm.
自学前端第二天——实现计划表单
SKL4399的博客
03-17 405
还没有任务请添加一个吧
小白自学前端第二天——HTML5
weixin_42128754的博客
07-06 154
明天继续加油！！
前端自学第二天——总结
weixin_45762791的博客
03-16 58
路径- <img src=""> 绝对路径： 目录下的绝对位置，从盘符开始。 相对路径：分为同级 上级 下级 同级路径./ 上级路径../ 下级路径（文件夹与html)在同一目录 ：文件夹/目标图片 音频<audio src=""></audio> (./m)好找到文件 controls 显示播放控件 src 音频路径 autoplay 自动播放 loop 循环播放 视频播放<video src=""&...
DAY 2 | 自学前端第二天
pangpangcm的博客
03-19 667
开始学习之前，会很期待今天能学习到什么新内容。
前端自学第六天——总结CSS进阶
weixin_45762791的博客
03-25 787
1.
自学前端开发第三天
weixin_62138501的博客
03-11 201
今天是我自学前端开发的第二天，今天在这里我依旧分享一些我学到的芝士【doge】，希望对像我一样刚开始学前端的你起到一点作用。 1.标签语义 学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是标签的含义，即这个标签是干嘛用的，根据这个标签的语义，在合适的地方给个合理的标签，可以让页面结构更加清晰。 2.标题标签<h1>——<h6> 为了网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个这样的标签，用完后会文字加粗且标签后没法显示其他的。
自学前端第一天-工具语法
GuaXiao的博客
03-31 120
HTML语法规范 1.1基本的语法概述 1 HTML标签是由尖括号包围的关键词 ——————例如<html> 2 HTML标签通常是成对出现的 例如<html> </html>,我们称之为双标签，第一个标签是开始标签，第二个标签是结束标签 3 有些特殊标签是单个标签，——————————例如<br/> .我们称之为单标签 1.2 标签的关系 双标签关系可以分为两列：包含关系和并列关系 包含关系 —— 类似父子关系 <head> &lt
简单自学web前端——切片-附件资源
03-02
简单自学web前端——切片-附件资源
自学HTML/CSS第四天
08-11
自学HTML/CSS第四天
GPU编程自学10——流并行
02-25
传统的中央处理器（CPU，CentralProcessingUnit)内部结构异常复杂，主要是因为其需要很强的通用性来处理各种不同的数据类型，同时又要逻辑判断又会引入大量的分支跳转和中断的处理。为了提高计算能力，CPU通常会采取...
关于如何转换MarkDown文本并在Html内进行显示
ioioppk的博客
07-25 912
今天遇到一个问题，从ChatGpt的API获取的文本格式为MarkDown，在HTML上使用textarea控件显示的时候就只是文字格式，并没有对MarkDown格式进行处理，今天就分享一下如何在Html上进行MarkDown格式文本的显示。
【HTML — 构建网络】HTML 中的元数据
07-24 922
这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定语言的结果中正确显示），则搜索引擎将更有效地索引您的 HTML 文档，并且它对使用屏幕阅读器的视觉障碍者很有用（例如，“六”一词在法语和英语中都存在，但发音不同。的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。指定包含与您的页面内容相关的关键字的描述很有用，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高（此类活动称为。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1105
iframe 预览邮件 + 打印邮件 + 模拟滚动条
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 895
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）
柯晓楠
07-24 1208
我们实现了一个基于 HTML 和 ECharts 的监控平台数据可视化大屏。这个大屏不仅能够直观地展示监控数据，还能通过交互功能提升用户体验。希望本文能对你在实现类似项目时提供一些帮助和启发。
网格布局 HTML CSS grid layout demo
wuyujin1997的博客
07-23 542
* grid 或 grid-template-areas 都可以 *//* 左右居中 *//* 上下居中 */
fpga自学笔记——设计与验证jmb
01-26
FPGA自学笔记——设计与验证JMB FPGA（可编程逻辑门阵列）是一种可编程的硬件平台，可以实现各种数字电路的设计与验证。本文将简要介绍使用FPGA自学设计与验证JMB（低功耗、高效能、集成度高的多媒体芯片）的过程。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值