初学HTML

最新推荐文章于 2024-04-29 11:06:38 发布

大山爱打球

最新推荐文章于 2024-04-29 11:06:38 发布

阅读量102

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zzs11055213/article/details/118873970

版权

1.网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一页，通常是HTML格式的文件，他要通过浏览器来实现。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此将其通俗称为HTML文件。

HTML：超文本标记语言，用来制作网页的一门语言，有标签组成的，比如图片标签，连接标签，视频标签。

2.浏览器

1.常用浏览器：IE浏览器，火狐浏览器，Edge浏览器，谷歌浏览器，Opera浏览器。

2.浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示网页。

3.Web标准

1.Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

2、Web标准的构成：主要包括结构、行为、表现三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为	行为指的是网页模型的定义及交互的编写，现阶段主要学的是Javascript。

Web标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到Javascript文件中。

HTML语法规范

1.1 基本语法规范

1、HTML标签是由尖括号包围的关键词，例如<html>.

2、HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签，标签对中第一个标签是开始标签，第二个标签是结束标签。

3、有些特殊的标签必须是单个标签（极少情况），例如<br />,我们称为单标签。

1.2标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系：

<head>
    <title> </title>
</head>

并列关系：

<head> </head>
<body> </body>

HTML基本结构

1.1 第一个HTML

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置title标签
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主题	元素包括文档的全部内容，页面内容基本都放在body标签中。

第一个页面

<html>
   <head>
	<title>
	    第一个页面
	</title>
   </head>
   <body>
	键盘敲烂，工资过万
   </body>
</html>

1.2 网页开发工具

1、 <!DOCTYPE html>文档类型申明标签，告诉浏览器这个页面采用html5来显示页面。

2、<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示。

3、<meta charset="UTF-8">必须写，采用utf-8来保存文字，如果不写就会乱码。

HTML常用标签

1.1 标题标签 <h1>- <h6>

标签语义：作为标题使用，并且依据重要性递减。

特点：

1、加了标题的文字会变得加粗，字号也会依次变大。

2、一个标题独占一行。

例子

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>
</body>

</html>

1.2 段落标签<p>我是一个段落标签 </p>

标签语义：可以把HTML文档分为若干个段落。

特点：

1、文本在一个段落中会根据浏览器窗口的大小自动换行。

2、段落与段落之间保有空隙。

1.3 换行标签 <br />

标签语义：强制换行。

特点：

1.<br />是个单标签。

2.<br / >标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>东京奥运会开幕式出场顺序：
        <br />希腊第一个出场，难民奥运代表队第二个出场、东道主日本最后出场。</pr>
        <p>根据新规，未来几届奥运会东道主将倒数出场，美国和法国分别排在倒数第三和倒数第二。其余代表团出场顺序将按照日语“五十音”顺序排定。中国代表团第111位出场。</p>
</body>

</html>

大山爱打球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学HTML

1.网页1.1 什么是网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一页，通常是HTML格式的文件，他要通过浏览器来实现。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此将其通俗称为HTML文件。HTML：超文本标记语言，用来制作网页的一门语言，有标签组成的，比如图片标签，连接标签，视频标签。2.浏览器1.常用浏览器：IE浏览器，火狐
复制链接

扫一扫