HTML快速入门和基础标签的介绍

HTML介绍

HTML(HyperTextMarkupLanguage):其含义超文本标记语言是网页设计语言,什么是超文本标记,超文本就是指具有特殊功能的文本,而标记规范了超文本的组成形式。由HTML语言编写的文件,以.html和.htm结尾的(后缀名)是由浏览器所运行。
其语言框架如下:

<!DOCTYPE html>            <!--声明此文件为html文件(主要是兼容IE浏览器)-->
<html>								  <!--根标签,有且只有一对-->
<head>							 		<!--标题内容-->
<meta charset="UTF-8">		 <!--UTF—8:万国码-->
<title></title>							 <!--输入标题内容-->
</head>
<body>									 <!--要构建的内容-->
</body>
</html>

1.文本标记

加粗、倾斜、下划线、删除线、上标、下标

  1. 加粗:< b > < / b >
  2. 倾斜:< i > < / i >
  3. 下划线:< u > < / u >
  4. 删除线:< s > < / s >
  5. 上标:< sup > < / sup>
  6. 下标:< sub > < / sub>
  7. 换行 :< br />(单标签)

2.标题元素

作用:以标题的形式来显示文本
语法: <h1></h1>~<h6></h6> 从大到小的(h1的字体最大)
表现方式:
1.自带换行效果
2.自带加粗效果
3.可以调整水平位置(align来改变)

3.段落标签

作用:在页面中表示一段独立的文本
语法:<p>
表现方式: 自带换行效果 每个段落里面的内容是不自带换行效果的
换行标签 : <br/>

4.分割线标签

作用:在页面上显示一条直线
语法:

<hr size="51" color="green" width="250" align="left"/>
		<!--属性
				尺寸 :size  单位是 px(像素)
				颜色 :color
				宽度 :width
				水平位置:align
		-->

通用属性
id 页面元素独一无二的标识
class 定义元素的选择器
style 定义标签的行内样式
title 鼠标移入到元素(标签)上的时候显示的内容

5.快捷键

快捷键的使用是必不可少的内容,要用到的有如下几项:
1.ctrl + c 复制
2.ctrl + v 粘贴
3.ctrl + z 撤回
4.ctrl + s 保存
5.ctrl + d 删除一行
6.ctrl + x 剪切
7.ctrl + r 运行
8.ctrl + a 全选
9.ctrl + y 反撤销
10.win + d 快速回到桌面
11.alt + F4 关闭当前窗口
12.alt + tab切换页面
13.ctrl+shift+f 格式化代码

6.字体标签

作用:调整文本的表现形式

<!--font  字体标签
				大小:size  (取值范围:1~7 超过数值的时候 按7号来显示)
				颜色:color
				字体:face
	-->
如:
<font size="7" color="yellow" face="华文行楷">君子爱财取之有道</font>

7.超链接标签

作用:用于网页之间的跳转
URL: 统一资源定位符
如:
http://www.baidu.com
<a href=" "> :跳转的地址
<a target=" ">:跳转的方式

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>day1</title>
	</head>
	<body>
		<!--h1——h6标题标签-->
		<h1 align="center">古之圣贤,均有其道</h1>
		<!--屬性
			size:尺寸 單位:px像素
			color:顏色
			width:寬度
			align:水平位置
			title:鼠标悬停显示元素
		-->
		<hr size="10" color="black" width="500" align="right" title="善言"/>
		<h2 align="center">克己复礼,知行合一</h2>
		<!--p段落标签-->
		<p align="center">
		<!--b加粗-->
		<!--br换行-->
		<b>君子</b><br/>
		<!--i倾斜-->
		<i>待人</i><br />
		<!--u下划线-->
		<u>其善</u><br />
		<!--s删除线-->
		<s>温文</s><br />
		<!--sup上标-->
		如<sup>ru</sup>
		<!--sub下标-->
		玉<sub>yu</sub><br />
		<!--font字体标签
			size 尺寸大小 取值范围1-7
			color颜色
			face字体
		-->
		<font size="1" color="crimson" face="華文行楷">溫故而知新,可以為師矣。</font>
		<!--a标签 超链接标签
			href:跳转地址
			target:改变跳转方式
			title:鼠标悬停显示元素
		-->
		<a href="index.html" target="_blank" title="跳轉">跳轉</a><br />
		</p>
		
		
	</body>
</html>

案例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>震惊</title>
	</head>
	<body>
		 <p style="float:left; ">
			 <font size="2" color="darkgray">
			<b> 2019-10-09 09:55:51新京报 记者:许诺 陈维城 编辑:徐超
			</b>
		</p>
		 <p style="float:right; ">
			 <b>原版版权禁止商业转载
			 <a href="zuoye02.html">授权>>
			 </a>
			 <b>
		</font>
		</p>
		 <hr  size="1" color="darkgray" style="float:right; margin-top: 10px;  width: 1650px;"/>
		 <h1 style=" float:left;margin-top: 20px;">
			 三大运营商5G预约用户突破千万</h1>
		 <p style=" float:left;margin-top: 20px;">
		<font size="4" face="黑体">
			新京报讯(记者 许诺 陈维城)截至10月9日9:30左右,中国移动5G预约用户已经达到529万,中国联通5G
		 预约用户数为200万,中国电信5G预约用户数为208万,合计预约用户数突破1000万大关。
		 </font>
		 </p>
	</body>
</html>

案例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>震惊</title>
	</head>
	<body>
		 <p style="float:left; "><font size="2" color="darkgray">
			<b> 2019-10-09 11:03:12新京报 编辑:许腾飞</b></p>
		 <p style="float:right; ">
			 <b>原版版权禁止商业转载
			 <a href="zuoye01.html">授权>>
			 </a>
			 <b> 
		</font>
		</p>
		 <hr  size="1" color="darkgray" style="float:right; margin-top: 10px;  width: 1650px;"/>
		 <h1 style=" float:left;margin-top: 20px;">
			 中央军委批准,武警部队启用新的车辆牌证
		</h1>
		 <p style=" float:left;margin-top: 20px; padding-right: 450px;">
			 <font size="3" color="darkgray" face="黑体">
				 新的车辆号牌与解放军现行车辆号牌外观样式、尺寸颜色保持一致
			</font>
		</p>
			 <font size="4" face="黑体">
				 <p style=" float:left;margin-top: 20px;">
					 经中央军委批准,武警部队统一换发车辆牌证,新的车辆牌证自2019年10月1日起正式使用,
				 现行车辆牌证至2019年10月31日废止。
				 </p>
				 <p style=" float:left;margin-top: 20px;">
				  武警部队换发车辆牌证,是深入贯彻党中央、中央军委对武警部队集中统一领导,全面落实
				  “军是军、警是警、民是民:”的原则,加强部队正规化建设的实际步骤和具体举措。换发中
				  严格按照中央军委通知精神和军车牌证管理相关规定,颁发《武警部队新式车辆牌证换发实
				  施细则》,强化依编按序核发要求,规范牌证换发管理,明确车辆号牌使用范围;同步升级
				  “武警部队牌证管理系统”,进一步完善武警车辆牌证网上审查、核发、查询、管理功能。
				 </p>
				 <p style=" float:left;margin-top: 20px;">
				 在牌证样式上,新的车辆号牌与解放军现行车辆号牌外观样式、尺寸颜色保持一致;新的行车
				 执照、车辆驾驶证等证件照与解放军现行行车执照和车辆驾驶证的等外观样式相同。在号牌使
				 用上,严格按照车辆编制实力申请、制作、核发、严控超编、非编车使用号牌。
				 </p>
				 <p style=" float:left;margin-top: 20px;">
				 据悉,武警部队此次牌证换发,严格执行军车牌证核发管理有关规定,落实军队公务用车标准
				 要求,强化信息化管理手段应用,牌证核发管理进一步规范,使用监管力度进一步加强。牌证
				 换发工作结束后,相关职能部门将组织联合检查,对违规违纪使用武警部队车辆牌证的,一律
				 依法依规严肃处理。
				 </p>
			 </font>
	</body>
</html>
发布了26 篇原创文章 · 获赞 5 · 访问量 1056

猜你喜欢

转载自blog.csdn.net/weixin_45060872/article/details/103393720