Day 1

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量65 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuxyyds/article/details/120352346
版权

1.HTML的格式：

html---网页中的根标签

head---网页的头部

title---网页标题

body---网页的身体（基本上所有内容都会放在body中）

2. 网页的基本结构 

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        hello word
    <body>
</html>

使用的开发工具：HBuilderX

3. 标题标签

h1-h6 随着数字的增加，字体越小，越细 

<html>
        <head><meta charset="utf-8"> 
            <title>标题标签</title> 
        </head> 
        <body>
            <h1>h1标签</h1> 
            <h2>h1标签</h2> 
            <h3>h1标签</h3> 
            <h4>h1标签</h4> 
            <h5>h1标签</h5> 
            <h6>h1标签</h6> 
        </body> 
</html>

4.段落标签

p 标签，能够自动换行，使文字成段落效果 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>p标签 段落标签</title>
	</head>
	<body>
		<p>段落标签</p>
		<p>自动换行</p>
		<p>使文字</p>
		<p>形成段落效果</p>
		
	</body>
</html>

 5.文字效果标签

文字加粗 B 和 strong
文字增大 big
文字缩小 small
文字删除 del 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字样式标签</title>
	</head>
	<body>
		<strong>文字变粗</strong>
		<b>文字变粗</b>
		<small>文字变小</small>
		<big>文字变大</big>
		<del>文字删除</del>
		<big>
			<strong>文字变大变粗</strong>
		</big>
		<small>
			<del>文字变小删除</del>
		</small>
	</body>
</html>

6.有序列表

ol 有序列表的开始，li表示列表项
在 ol 上添加 start 指定开始的位置，通过 type 可以指定显示的方式
start 的值是一个整数
type 1 a A i I  （显示方式） 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
	<ol>
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ol>
	
	<ol start="10">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ol>
	
	<ol start="6" type="A">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ol>
	
	<ol start="h" type="i">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
		<li>赵六</li>
	</ol>
	</body>
</html>

start 10：从10开始排序 

type：排序样式

 7.无序列表

 ul 表示无序列表的开始

li 表示 列表项
type="circle"  空心圆
type="disc"   实心圆
type="square"实心方块 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul>
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
			<li>赵六</li>
		</ul>
		
		<ul type="circle">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
			<li>赵六</li>
		</ul>
		
		<ul type="disc">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
			<li>赵六</li>
		</ul>
		
		<ul type="square">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
			<li>赵六</li>
		</ul>
	</body>
</html>

8.超链接

a 标签
href 属性，指定网页的路径，这个网页路径可以是已经存在的，也可以是自己的网页路径。
不想要跳转 ，可以给个#
target 指定网页打开的方式：
' _blank' 和'_search' 在新的窗口打开
'_parent' 和'_self'在当前窗口打开 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="https://baidu.com" target="_blank">百度</a>
		<a href="https://sina.com.cn/" target="_search">新浪</a>
		
		<a href="https://www.163.com/" target="_parent">网易</a>
		<a href="04_有序列表.html" target="_self">有序列表</a>
		<a href="#">有序列表</a>
	</body>
</html>

9.图片标签

img 是一个单标签
src 放的是图片的路径
width 可以设置宽度 以 px （像素）作为单位
height 可以设置高度
title 可以设置图片的标题，鼠标放上去或者路径有误的时候就可以显示 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<img src="day%2001/css/faq03.jpg">
	</body>
</html>

 

10.换行标签

<br /> <br /> 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		轻轻的我走了，
		<br /><br /><br /><br /><br />
		正如我轻轻的来；
		<br />
		我轻轻的招手，
		<br />
		作别西天的云彩。
	</body>
</html>

 

11 .水平线标签

<hr />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		轻轻的我走了，
		<hr />
		正如我轻轻的来；
		<hr />
		我轻轻的招手，
		<hr />
		作别西天的云彩。
	</body>
</html>

12.基础表格

table 表格
boder 属性设置表格的边框
cellspacing 属性调整单元格之间的间距
tr 表格的行
td 表格的单元格 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础的表格</title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>出生日期</td>
			</tr>
			<tr>
				<td>张胜男</td>
				<td>18</td>
				<td>女</td>
				<td>2021年08月01日</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>20</td>
				<td>男</td>
				<td>2021年08月01日</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>30</td>
				<td>女</td>
				<td>2021年08月01日</td>
			</tr>
		</table>
	</body>
</html>

 

13.合并单元格

colspan 合并单元格（横向合并）
rowspan 合并单元格（纵向合并） 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<tr>
				<td rowspan="4">学生信息</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>出生日期</td>
				<td colspan="2">操作</td>
			</tr>
			<tr>
				<td>张胜男</td>
				<td>18</td>
				<td>女</td>
				<td>2021年08月01日</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>20</td>
				<td>男</td>
				<td>2021年08月01日</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>30</td>
				<td>女</td>
				<td>2021年08月01日</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
		</table>
	</body>
</html>

14.表格对齐方式

align ： left(左)   center（居中） right（右）
在 table 标签上添加 align 属性，指定整个表格的对齐方式
在 tr 标签上添加 align 属性 , 指定的是整行 文字的对齐方式
在 td 标签上添加 align 属性，指定的是当前单元格的对齐方式 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" width="800px" align="center">
			<tr align="left">
				<td rowspan="4">学生信息</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>出生日期</td>
				<td colspan="2">操作</td>
			</tr>
			<tr align="center">
				<td>张胜男</td>
				<td>18</td>
				<td>女</td>
				<td>2021年08月01日</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
			<tr align="right">
				<td>李四</td>
				<td>20</td>
				<td>男</td>
				<td>2021年08月01日</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
			<tr>
				<td align="center">王五</td>
				<td>30</td>
				<td>女</td>
				<td>2021年08月01日</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
		</table>
	</body>
</html>

15.表格的表头和标题

caption 表头
th 表示当前单元格为标题，但是还是需要放在 tr 中 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础的表格</title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<caption>个人信息</caption>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>出生日期</th>
			</tr>
			<tr>
				<td>张胜男</td>
				<td>18</td>
				<td>女</td>
				<td>2021年08月01日</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>20</td>
				<td>男</td>
				<td>2021年08月01日</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>30</td>
				<td>女</td>
				<td>2021年08月01日</td>
			</tr>
		</table>
	</body>
</html>

16.完整的表格

thread 表格的头部
tbody 表格的身体
tfooter 表格底部 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>出生日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张胜男</td>
					<td>18</td>
					<td>女</td>
					<td>2021年08月01日</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>20</td>
					<td>男</td>
					<td>2021年08月01日</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>30</td>
					<td>女</td>
					<td>2021年08月01日</td>
				</tr>
			</tbody>
			<tfoot>
				<tr align="right">
					<td colspan="4">总计:3人</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

 

zhuxyyds
关注
php strtotime -1 day,PHP strtotime() 函数
weixin_35224206的博客
03-18 2912
strtotime() 函数将任何英文文本的日期时间描述解析为 Unix 时间戳。strtotime(time,now)time 规定要解析的时间字符串。now 用来计算返回值的时间戳。如果省略该参数，则使用当前时间。示例如下：便于比较学习，使用date将当时间戳与指定时间戳转换成系统时间。1.明天此时的时间戳strtotime("+1 day")[break]当前时间：echo date("Y-...
大话中国C-V2X通讯标准应用层标准：在DAY1标准中对合作式智能运输系统车用通信系统进行了描述 | 车用通信系统基础应用 | DAY1应用场景 | DAY2应用场景 | 应用层交互数据集
Polelink北汇信息的博客
04-02 2414
前言 2017年9月18日，中国智能网联汽车产业创新联盟携手重庆长安汽车、通用汽车、清华大学等单位发布了我国第一部V2X应用层团体标准：《合作式智能运输系统 车用通信系统应用层及应用数据交互标准 T/CSAE 53-2017》，该标准的发布填补了我国V2X应用层标准的空白。 2020年12月31日，中国智能网联汽车产业创新联盟联合星云互联、重庆长安汽车、通用汽车等单位对2017年的标准进行了完善，推出《合作式智能运输系统车用通信系统应用层及应用数据交互标准（第一阶段）T/CSAE 53－2020》（以下简称
Always Day1 学会爱自己才能好好爱别人
weixin_42241350的博客
03-14 6851
开始写第一篇csdn，读沈剑文章有感
[BUUCTF][CISCN2019 华北赛区 Day1 Web2]ikun
Y4tacker的博客
09-01 7439
文章目录知识点JWTPICKLEWP部分第一步找到lv6第二步BURP抓包修改pickel参考文章 知识点 JWT JWT相关 JWT解密网站 JWT破解利用工具 PICKLE Pickle模块中最常用的函数为： （1）pickle.dump(obj, file, [,protocol]) 函数的功能：将obj对象序列化存入已经打开的file中。 参数讲解： obj：想要序列化的obj对象。 file:文件名称。 protocol：序
NOIP2016提高组Day1T3 换教室
lijf2001的博客
11-30 9196
NOIP2016提高组复赛 换教室
小程序开发学习day1
a3061532的博客
03-29 4878
微信小程序学习day1
【算法题解】 Day1 前缀和
sid10t.
09-29 1万+
今天的算法是 前缀和，“算法题解系列文章旨在精选重点与易错的算法题，总结常见的算法思路与可能出现的错误，以实战习题的形式理解算法，使用算法。”
7天物联网智能家居实战-DAY1
a1215711903的博客
02-13 3493
7天物联网智能家居实战 Day1 Day2 Day3 Day4 Day5 Day6 Day7 本课程时长七天 共计七次更新 文章目录7天物联网智能家居实战前言一、上午-基础课程二、下午-提高课程总结 前言     我年少时如许多其他少年一样对于电子有着浓厚的兴趣，闪烁跳动的指示灯，带动磁带转动的小小电机，小霸王游戏卡带上的金手指看起来好像是熠熠生辉的魔法光芒。     当然啦，上文中的所谓“电子”，按照此时说来应该是
PostgreSQL 数据库时间加减，日期加减 INTERVAL 1 year 1 month 1 day 1 hour 1 min 1 sec
热门推荐
秋̶᭄ꦿ攻城狮࿆ྂ
12-20 2万+
在PostgreSQL中可以直接对时间进行加减运算： SELECT now()::timestamp + '1 year'; --当前时间加1年 SELECT now()::timestamp + '1 month'; --当前时间加一个月 SELECT now()::timestamp + '1 day'; --当前时间加一天 SELECT now()::timestamp + '1 hour'; --当前时间加一个小时 SELECT now()::timestamp + '1 min';
软件测试Day1知识点思维导图
qq_51532040的博客
03-29 6009
软件测试知识点，软件测试Day1知识点流程图
CTSC2013-day1-day2-word版试题.zip
03-14
CTSC2013，day1，day2，word版试题 题目名称 手套 没头脑和不高兴 复原 源文件名 glove headless restore 时限 10s 2s 1s 测试点数目 10 10 20 内存 256MB 256MB 128MB 有无部分分 无 有 无 评测类型 传统 ...
海外科技行业：阿里巴巴2020投资者日主要内容Day1.pdf
07-16
海外科技行业：阿里巴巴2020投资者日主要内容Day1.pdf
AS400学习DAY1-DAY5
11-09
AS400学习DAY1-DAY5
1.24 C++ day1
01-24
1.24 C++ day1
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 843
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 908
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
复习HTML(基础）
m0_74124657的博客
10-01 1144
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1172
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 378
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
用VBA代码如何实现：Lastday是变量代表昨天，lastday1是变量代表昨天的前一天,lastday2是变量代表昨天的前2天,筛选B列的值不等于Lastday,lastday1,lastday2,资料
09-16
假设你的数据存储在一个Excel工作表中，B列为日期列，Lastday、lastday1和lastday2都是你想检查的日期变量。以下是步骤： ```vba Sub FilterDates() Dim ws As Worksheet Dim BColumn As Range Dim Lastday As ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值