我不叫内谁

2022-08-18 23:08 吉林师范大学 Python 发布于吉林

关注

速刷html一周目（上）

简介：本文分上下篇，将以概念加代码块加实战的方式速刷html，部分资料来源于网络。

概念：HTML是用来描述网页的一种语言。（超文本标记语言）

HTML中标签的应用非常重要。例如

<p>、<a>、<style>等。

在HTML中，标签总是成对出现的，例如

<p></p>、<html></html>等。

前者是开始标签，后者则是结束标签。

二者又被称为开放标签、闭合标签。

HTML文档描述网页
HTML文档包含HTML标签和纯文本
HTML文档也被称为网页

下面是一个最简单的html文档


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h1>劳资要冲榜！</h1>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p>冲榜！</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

解释：

<html>和</html>之间的文本描述网页
<body和</body>之间的文本是可见的页面内容
<h1>和</h1>之间的文本被显为标题
<p>和</p>之间的文本被显示为段落

HTML标题

HTML标题是通过<h1>~<h6>等进行定义的


	
	
		
		
			
			
				
			

		

		
			
			
				<h1>我想要衣服</h1>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h2>我想要衣服</h2>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h3>我想要衣服</h3>

HTML段落

段落的定义由<p>标签实现

例如


	
	
		
		
			
			
				
			

		

		
			
			
				<p>这是第一个段落</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p>这是第二个段落</p>

虽然结束标签在大部分浏览器中可以省略。例如

但是在未来的HTML中是不允许这种做法的。

HTML折行

如果不想在产生一个新段落的情况下进行换行，可以使用</br>/<br>

</br>并不是<br>的闭合标签，因为<br> 里是空元素，关闭标签没有任何意义。

但</br>在所有的浏览器中都可以显示，所以个人推荐使用</br>

现在尝试编排一首诗

《北风刀》

北风平地起苍黄，欲望西北射天狼。

手中飞刀落又起，暂且收刀来日长。

何须苏子正襟坐，我辈自得气清扬。

若问秋风何时落，须臾百天展锋芒。


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h1>北风刀</h1>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				北风平地起苍黄，欲往西北射天狼。<br/>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				手中飞刀落又起，暂且收刀来日长。<br/>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				何须苏子正襟坐，我辈自得气清扬。<br/>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				若问秋风何时落，须臾百天展锋芒。<br/>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

输出如图所示，HTML会默认忽略多余的空格和换行

可以加入换行<br/>进行格式化

使用style属性改变HTML的样式。


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body style="backgroung-color:green">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h1>在<body>里定义背景颜色</h1>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p style="font-family:verdana;color:red">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				"font-family"是对字体进行设定，color，则是对字体颜色进行更改
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p style="font-size:30px">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				“font-size”是对字体尺寸进行设定
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

输出如图所示：

单独针对背景颜色的代码：


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body style= "background-color:yellow">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h2 style="background-color:green">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				更改整体背景颜色
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</h2>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p style="background-color:white">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				更改本段背景颜色
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

输出效果如图：

2.单独针对字体的代码：


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h1 style="font-family:verdana">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				标题
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</h1>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p style="font-family:arial;color:green;font-size:20px">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				各种不同元素之间用分号隔开。
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

输出结果如下

3.单独针对文本格式化的代码：


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<h1 style="text-align:center">
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				居中的标题
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</h1>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

输出结果如下

HTML引用


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p>我的目标是：<q>搞件衣服!</q></p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

输出如下

如果引用部分过长，则需<blockquote>


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p>以下内容引自百度经验：</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<blockquote cite=https://jingyan.baidu.com/article/dca1fa6f17ea59f1a5405210.html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				百度是一个平台，主要做搜索，有事搜一搜，没事看一看；
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				其他平台有做门户，有做邮箱为主的；
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				百度搜索下面有许多方面，网页，新闻，贴吧，知道，音乐，图片，视频，地图，文库及其他；
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				根据自己的需要，是浏览，还是查找资料，上传文件，下载多媒体，或者赚钱也可以。
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				以查找为例，地图，先点击 地图，输入地点名称就可查到，关键词越准确，资料越有用；
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</blockquote>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>

浏览器通常会对 blockquote 元素进行缩进处理。

缩略词：

用到<abbr>标签进行缩写


	
	
		
		
			
			
				
			

		

		
			
			
				<html>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				<p><abbr title="阴阳怪气">yygq</abbr>是一个不咋地的词</p>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</body>
			

		

	

	

		
		
			
			
				
			

		

		
			
			
				</html>