Web学习第一天——HTML简介及常用标签(文本标签)

一、 HTML简介

1. 什么是HTML

HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 由浏览器负责解析执行
超文本: 指不仅仅可以表示文本,还超出了文本的范围,还可以显示图片音频视频超链接等等。

2. HTML的编写工具

记事本(不推荐,开发效率低)
Notepad++
HBuilder(推荐,开发效率高)

3. HTML的文档结构

根标签<html></html>告诉浏览器从这里开始解析
头部标签<head></head> 浏览器和搜索引擎需要的相关信息
主体标签<body></body> 显示内容
根标签下有且仅有头部与主体两个标签

以下是符合**“W3C”标准**的HTML文档结构
在这里插入图片描述

4. W3C标准

万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)
结构的标准语言是HTML,XML
表现的标准语言是CSS
行为的标准语言是ECMAScript

二、HTML中的常用标签

(一). head标签

head标签内的内容主要提供给浏览器和搜索引擎使用不显示在浏览器中,用户无法看见!

1. head中的常用标签

①meat标签
<meat charset="utf-8" />编码格式标签,告诉浏览器网页的编码格式(不告诉浏览器编码格式,有可能导致乱码)
<meat  name="keywords" content=“北京尚学堂,···”/> “keywords”关键字标签,搜索引擎检索网页时用到。各关键字以逗号分割。
<meta name="description" content="淘宝网- 亚洲较大的网上交易平台···"/>“description”网页描述标签。一般用来描述网页或者网站内容!
② title标签

显示网页标题

<title>我的第一个网页</title>网页标题标签   用于显示当前网页名称,显示在浏览器标签栏

显示效果

③link标签

链接外部资源(包括网上资源和本地资源)
一般链接CSS文件和Script文件,以及项目中的其它资源

<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
将百度网页标题的图标拿来作为自己网页标题图标(链接外部资源)
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
使用img文件夹下的favicon.ico文件作为自己网页标题图标(链接内部资源)
④script标签(网页的行为)

网页与人机交互或弹出效果等的实现

<script>
		function test(){
			alert("你好,世界")
		}
</script>
弹窗效果
⑤style标签(网页的表现)

调控网页的显示样式,让网页更美观

<style>
		body{background: blue;}
</style>
将网页背景设置为蓝色

(二). body标签

body标签中的内容是浏览器显示给用户看的。

1. body中的常用标签(文本标签)

① 段落标签

常用于标记整段文字

<p>这是一个段落 </p> 特点是独占一行,一行放不下,自动换行 ,默认字体大小
② 标题标签

常用于文章标题

 <h1></h1>·····<h6></h6>特点:独占一行,字体加粗,字体由h1最大到h6最小
③ 格式化标签

加粗、倾斜、上标、下标、预格式文本等等

<b>文字</b>加粗  (现推荐使用<strong>文字</strong>效果一样)
<i>文字</i>倾斜  (现推荐使用<em>文字</em>效果一样)
<sub>文字</sub>上标
<sup>文字</sup>下标
<del>文字</del>删除线
<ins>文字</ins>下划线(常与del标签一起使用,表示更正)
<pre>代码</pre>预格式文本(常用于显示计算机代码)
④ 其它标签
<br />换行
&nbsp 空格

三、源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的第一个网页</title>
		<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
		<meta name = "keywords" content = "谷歌一下"/>
	</head>
	
	<script>
		function test(){
			alert("你好,世界")
		}
	</script>
	
	<style>
		body{background: beige;}
	</style>
	
	<body onload="test()">
		<h1><b>天道酬勤</b>(一级标签)</h1>
		
		<h2>双氧水分解反应(二级标签)</h2>
		<p>
			2H<sub>2</sub>O<sub>2</sub>=2H<sub>2</sub>O+O<sub>2</sub>
		</p>
		
		<h3>平方差公式(三级标签)</h3>
		<p>
			<del>(a-b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></del><br />
			<ins>(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup></ins>
		</p>
		
		<h4>无题<sub>&nbsp;&nbsp;李商隐&nbsp;&nbsp;</sub>(四级标签)</h4>
		<p>
			<b>相见时难别亦难,<i>东风无力百花残。</i></b> <br />
			 <strong>春蚕到死丝方尽,<em>蜡炬成灰泪始干。</em></strong> <br />
			 <b>晓镜但愁云鬓改,<em>夜吟应觉月光寒。</em></b> <br />
			 <strong>蓬山此去无多路,<i>青鸟殷勤为探看。</i></strong> <br />
		</p>
		
		<h5>Java Code(五级标题)</h5>
		<p>
			<pre>
				public class HelloWorld{
					public static void main(String[] args){
						System.out.println("Hello World!");
					}
				}
			</pre>
		</p>
	</body>
</html>

四、运行效果

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值