2020-10-18

最新推荐文章于 2024-08-20 19:23:57 发布

王敏0000

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量187

点赞数

分类专栏： html基础文章标签： html

本文链接：https://blog.csdn.net/w962684575/article/details/109144016

版权

html基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.HTML

1.什么是HTML?

HTML超文本标记语言,是一种用来描述网页的标记语.

2.HTML作用？

制作网页【界面】

3.HTML的编辑工具

记事本
HTML作用？
1. 新建记事本文件
2. 写入html代码

3. 修改记事本文件的名称【以“.html”结尾】

缺点：没有提示，所有的代码内容都需要手动输入，效率极低。

专业的IDE[集成开发环境] 提高开发效率

Notepad++：http://www.html.cn/tool/edit/2.html

Sublime Text：http://www.html.cn/tool/edit/6.html

WebStorm:https://www.html.cn/tool/edit/8.html

HBuilderX: https://www.dcloud.io/hbuilderx.html [我们学习时使用的开发工具]

文件---新建---html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html1</title>
	</head>
	<body>
		<h1>这是我的第一个html网页</h1>
	</body>
</html>

运行---运行到浏览器----自己的浏览器

4.Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

5.HTML 网页结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

我们在HTML 网页结构中出现了<html></html>/<body></body>......,那么这些东西都是html标签/html标记。【HTML超文本标记语言】

注意:只有 <body> 区域 (白色部分) 才会在浏览器中显示。

6.HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

格式：<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

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

注意:html的标签不是自己胡乱编写出来的，他是html语法规定的。

我们学习html，就是在学习html语法规定的这些标签的使用。

二.Html常用标签

1.Html的结构标签

H<!DOCTYPE html>----html声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
TML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.<head></head>--HTML的头标签 【为浏览器显示网页提供附加信息】

3.<html></html>----HTML文档标记

4.<meta>---指定网页的字符编码，网页描述，关键词，文件的最后修改时间，作者，和其他元数据。

指定网页的字符编码---<meta charset=”utf-8”>

5.<title></title>---设置网页标题的标记

6.<body></body>----html身体标记

出现在body这个标记中的内容都是可以被显示出来的

body将来就是我们的主要操作区域。

2.HTML 段落与文字

（1）标题标签

在 HTML 文档中，标题很重要。标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。其中<h1> 定义最大的标题，<h6> 定义最小的标题。

HTML中的标题标签通过<h1>-<h6>来设置，越往下标题越小

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>通过h1 - h6 等标签进行定义的</h1>
		<h1>h1定义最大的标题，h6定义最小的标题。</h1>
		<h1>测试h1的标题标记</h1>
		<h2>测试h2的标题标记</h2>
		<h3>测试h3的标题标记</h3>
		<h4>测试h4的标题标记</h4>
		<h5>测试h5的标题标记</h5>
		<h6>测试h6的标题标记</h6>
	</body>
</html>

（2）段落标签

在HTML中段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。

<h1>通过p标记来定义一个段落，可以将html分割成很多个块</h1>
		<h1><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标记</title>
	</head>
	<body>
由于p标记是一个块级标签，所p标记的前后会自动多出空行</h1>
		<h2>雪中悍刀行</h2>
		<p>
			北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，
			在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座
			以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
			难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些
			居心叵测的，更诛心地丢了顶“二皇帝”的帽子。今天王府很热闹，位高权重的北凉
			王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是
			来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是
			天大的福缘，北凉王府都解释成傻人有傻福。
		</p>
		<p>
			可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒
			是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，
			这不就如约而至了。王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡
			须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘
			二字，谁看都要由衷赞一声世外高人呐。但此番收徒显然遇到了不小的阻碍，倒不
			是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对
			付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总
			该有的吧。连堂堂大柱国北凉王都得蹲在那里好言相劝，循循善诱里透着股诱拐，
			“儿子，去龙虎山学成一身本事，以后谁再敢说你傻，你就揍他，三品以下的文官
			武将，打死都不怕，爹给你撑腰。”
		</p>	
	</body>
</html>

（3）文本格式化

HTML可定义很多供格式化输出的元素，例：使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，从而显示粗体或者斜体。

文本进行格式，从而显示粗体或者斜体。

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

王敏0000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-18

一.HTML1.什么是HTML?HTML超文本标记语言,是一种用来描述网页的标记语. 2.HTML作用？制作网页【界面】 3.HTML的编辑工具记事本 HTML作用？新建记事本文件写入html代码 3. 修改记事本文件的名称【以“.html”结尾】缺点：没有提示，所有的代码内容都需要手动输入，效率极低。专业的IDE[集成开发环境] 提高开发效率Notepad++：http://www.html.cn/tool/edit/2.html...
复制链接

扫一扫