html+css复习(一)

已于 2022-08-02 11:29:42 修改
阅读量121 收藏
点赞数
文章标签： html css
于 2022-08-02 10:14:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/df5465695/article/details/126116417
版权

 1.第一个网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个网页</title>
	</head>
	<body>hellow world
	</body>
</html>

 2.标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>1级标题标签</h1>
		<h2>2级标题标签</h2>
		<h3>3级标题标签</h3>
		<h4>4级标题标签</h4>
		<h5>5级标题标签</h5>
		<h6>6级标题标签</h6>
		大湖名城，创新高地
	</body>
</html>

3.换行标签 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标签</title>
	</head>
	<body>
		床前明月光，<br />
		疑似地上霜。<br />
		举头望明月，<br />
		低头思故乡。<br />
	</body>
</html>

4.段落标签 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p>鹅鹅鹅，</p>
		<p>曲项向天歌。</p>
		<p>白毛浮绿水，</p>
		<p>红掌拨清波。</p>
	</body>
</html>

 5.水平标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平标签</title>
	</head>
	<body>
		<h2>水平线标签的使用</h2>
		<hr color="red" width="30%" size="20px" align="right" />
	</body>
</html>

6.其他常用标签 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他常用标签 </title>
	</head>
	<body>
		<!-- 字体加粗标签 -->
		<strong>我是strong标签</strong>
		<b>我是b标签</b>
		
		<!-- 斜体标签 -->
		<em>我是em标签</em>
		<i>我是i标签</i>
		
		<!-- 上标标签 -->
		x<sup>2</sup>+y<sup>3</sup> = 1
		<!-- 下标标签 -->
		H<sub>2</sub>O<sub>2</sub>
	</body>
</html>

 7.图像标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			src:设置图像的位置
			width：设置图像的宽度
			height：设置图像的高度
			alt:设置图像的替换文字，当图像不能正常显示的时候，显示alt的属性值
			title：设置鼠标悬停在图像上时显示的内容
		 -->
		<img src="img/car.jpg" width="300px" alt="这是一辆红色的跑车" title="好漂亮的跑车" />
	</body>
</html>

 8.超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			href:设置超链接跳转的位置
			target：设置网页打开位置
				_self:在当前窗口中打开网页
				_blank:在新建窗口中打开网页
		 -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
	</body>
</html>

9.锚链接 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#down">快速到达底部</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#">111111111111111111111111111111</a><br />
		<a href="#" id="down">底部</a><br />
	</body>
</html>

10.功能性标签 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 这是功能性连接，会打开电脑上处理邮件的客户端-->
		<a href="mailto:1319866945@qq.com">邮箱联系我们</a>
	</body>
</html>

11.特殊符号 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		大湖名城&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创新高低
		3&lt;b&gt;2<br />
		&quot;美丽的谎言&quot;<br />
		&copy;版权所有，翻版必究
	</body>
</html>

12.无需列表 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
		</ul>>
		
		<hr/>
		<ul type="circle">
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
		</ul>
		
		<hr/>
		
		<ul type="disc">
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
		</ul>
		
		<hr/>
		<ul type="square">
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
			<li>第1项</li>
		</ul>
		
		<hr/>
	</body>
</html>

 13.有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
		</ol>
		<hr/>
		
		<ol type="1" start="5">
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
		</ol>
		<hr/>
		
		<ol type="A">
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
		</ol>
		<hr/>
		
		<ol type="a" start="4">
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
		</ol>
		<hr/>
		
		<ol type="I">
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
		</ol>
		<hr/>
		
		<ol type="i">
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
			<li>第一项</li>
		</ol>
		<hr/>
	</body>
</html>

14.定义列表 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<dl>
			<dt>关于华为云</dt>
			<dd>了解华为云</dd>
			<dd>华为云APP</dd>
			<dd>客户案例</dd>
			
			<dt>水果</dt>
			<dd>苹果</dd>
			<dd>葡萄</dd>
			
			<dt>蔬菜</dt>
			<dd>青菜</dd>
			<dd>菠菜</dd>
		</dl>
	</body>
</html>

 15.表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0" width="300px" height="200px" cdllpading="10px" align="center">
			<tr align="right">
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
				<td>1-4</td>
			</tr>
			
			<tr>
				<td align="right">2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
				<td>3-4</td>
			</tr>
			
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<td>4-3</td>
				<td>4-4</td>
			</tr>
			
			
		</table>
	</body>
</html>

 16.表格行合并和列合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0" width="300px" height="200px" >
			<tr>
				<td rowspan="2">1-1</td>
				<td>1-2</td>
				<td colspan="2">1-3</td>
				<!-- <td>1-4</td> -->
			</tr>
			
			<tr>
				<!-- <td>2-1</td> -->
				<td>2-2</td>
				<td rowspan="3">2-3</td>
				<td>2-4</td>
			</tr>
			
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<!-- <td>3-3</td> -->
				<td>3-4</td>
			</tr>
			
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<!-- <td>4-3</td> -->
				<td>4-4</td>
			</tr>
			
			
		</table>
	</body>
</html>
df5465695
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML初步学习
qq_62292176的博客
04-14 709
HTML 超文本标记语言 1.结构代码 <!DOCTYPE html>//文档申明 <html> <head>//页头 <meta charset="UTF-8"> <title>网页标题</title> </head> <body>//页身 网页显示内容 </body> </html> <!--文档声
HTML+CSS复习笔记
weixin_44921664的博客
12-07 190
HTML+CSS复习笔记 1.HTML 初识 HTML 指的是超文本标记语言 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 1.html作用: 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。 2.所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。 文档类型<!DOCTYP
如何使用HTML打开网页
热门推荐
xyzcoolplayer的博客
03-06 17万+
用来打开网页，引号中为网址，运行时会直接跳转。
Java Web ------ HTML 基础讲解
d1183的博客
05-04 221
1.网页的基本结构 <!-- 声明网页的版本 --> <!doctype html> <!-- 唯一的根元素 --> <html> <!-- 对网页的基本配置 --> <head> <!-- 声明网页的编码 --> <meta charset="utf-8"> <!-- 声明网页的...
html+css复习
l2298202515的博客
12-28 1306
html css复习
HTML+CSS+JavaScript复习
weixin_46007017的博客
03-10 1160
HTML+CSS+JavaScript复习 HTML第一节课-3.7 前端和后端： 前端，用户看到的视图逻辑，在浏览器上运行的，炫酷的震撼的页面效果。 后端：显示动态数据，需要从数据库中取出 B/S架构原理: 在浏览器地址栏上输入网址 点击回车，向服务器发送一个请求 服务器向浏览器返回一个HTML代码，浏览器对代码进行解析。 开发工具：HBuilder，Dreamweaver（可视化更丰富一些） 一、常见标签 table： table属性：单元格对齐方式，border单元格表框，width宽
HTML+CSS复习第一天
weixin_62922379的博客
07-12 2682
3.使用grid布局 display:grid justify-content:center;1.使用flex布局 justify-content:center;怪异盒模型：margin + content(border+padding+content)普通盒模型：margin + border + padding + content。普通盒模型变为怪异盒模型使用的是box-sizing:border-box。分为两种：相对路径 绝对路径 img标签内部的属性是以键值对的形式存在的。
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1158
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
html+css复习小结
Mr_Jasper的博客
12-15 525
浏览器的解析模式:1. 标准模式 2. 混杂模式(浏览器自己的模式) 选择器优先级,权重值 a b c d 内嵌 1 0 0 0 id 0 1 0 0 类,伪类 0 0 1 0 元
HTML+CSS
weixin_52002028的博客
07-20 2011
之前学过html+css，但是好久没用，最近看着文档复习了一下，也记录了一些笔记。
HTML+CSS+JS复习笔记
03-07
在“HTML+CSS+JS复习笔记”中，你可能会学习到以下关键概念： 1. HTML基本结构：包括<!DOCTYPE>声明、<html>、和元素。 2. HTML元素：如至标题、段落、链接、图像、和无序列表、和有序列表等。 3. CSS选择器：如...
HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面（附完整答案和学生用要求及素材）
03-29
在本项目中，"HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面" 提供了一个实践性的学习机会，让学生深入理解并应用前端开发技术，特别是针对网页设计与制作。这个项目以“杭帮美食”为主题，...
网页设计与制作教程（HTML+CSS+JavaScript）第2版+电子教案、素材文件、源代码
03-31
本教程《网页设计与制作教程（HTML+CSS+JavaScript）第2版》由刘瑞新和张兵义主编，是一份全面的学习资源，旨在帮助初学者和进阶者掌握网页设计的核心技术。这个压缩包包含了完整的教材、电子教案、素材文件以及源...
CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(二)
08-26 728
CRUD中，如何做到全端通吃，基于ABP的Dto模块，通过对Dto的编辑，从而控制全部的前端内容，让数据的表格和数据的表单做到动态创建，动态验证等！
html文本文字中保留空格和换行
qq_41985405的博客
08-26 42
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
【HTML】模拟消息折叠效果【附源代码】
Young_Pro的博客
08-26 596
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
【HTML】语义化
DX390609的博客
08-22 297
根据内容的结构选择合适的标签。
html快速入门
m0_52049533的博客
08-22 446
/
java一键生成数据库说明文档html格式
最新发布
无极低码
08-26 188
要验收项目了，要写数据库文档，一大堆表太费劲了，直接生成一个吧，本来想用个别人的轮子，网上看了几个，感觉效果不怎么好，自己动手写一个吧。抽空再把字典表补充进去就OK了先看效果：目录快速导航生成效果。
HTML+CSS+JavaScript详解：从布局到高级应用
学习这个教程的时间预估为4-8小时，对于新手来说，这是一次系统性的学习过程，而对于熟悉HTML的读者，可以针对性地复习或提升。通过本教程，读者不仅能掌握文字布局的基本技巧，还能理解和掌握如何利用HTML、CSS和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值