HTML入门

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

各大浏览器厂商对H5的支持
市场的需求
跨平台

二、HTML的基本结构

<html>......</html> HTML文档的开始和结束标记。
<head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
<title>……</title>：设置浏览器的窗口上标题。
<body>……</body>：页面可见内容。

三、HTML的基本标签

标题标签

h1~h6

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果

段落标签和换行标签

p标签为段落标签，br标签为换行标签

源代码

<!DOCTYPE html>

<head>

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>

浏览器预览效果图

水平线标签

hr标签为水平线标签

源代码

<!DOCTYPE html>

<head>

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>

浏览器预览效果图

字体样式标签

em为斜体标签，strong为字体加粗标签

源代码

<!DOCTYPE html>

<head>

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>

浏览器预览效果图

注释和特殊符号

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

源代码

<!DOCTYPE html>

<head>

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是测试空格的

</body>

</html>

浏览器预览效果图

以上就是HTML的简单入门，后续带大家更深入的了解HTML

、www：

万维网，建立在internet上，全球性的、交互、多平台、分布的信息资源。

wwwf组成：

url：统一资源定位器，通俗来说就是访问地址
HTTP：超文本传输协议
HTML：超文本标记语言

2、网页的后缀名：html和htm

3、标签：

双标签：<标签名>内容</标签名>

单标签：<标签名 />

注释标签：

各种标签，以html文档结构来做：

<!doctype html> <!--文档类型标签-->
<html> --最外层的标签
<head> <!--头部标签，包含编码、标题等-->
	<title>标题</title> <!--标题标签-->
	<meta charset="utf-8"/> <!--编码格式-->
</head>
  <body> <!--主体标签，里面显示的内容-->
  	<h1>哈哈哈哈</h1>
  </body>
</html>

4、标题标签

h1~h6,h1最大的，h6最小的

属性：align,对齐方式

属性值：left-左对齐，center-居中，right-右对齐

示例：

<h1 align="left">标题左对齐</h1>

5、段落标签：

属性：

-title:提示信息

-style:行内样式

-dir:文字方向，默认从左向右，ltl或者rtl

示例：

<p title="这是提示信息" dir="ltl"></p>

6、换行标签：<br/>

7、水平线标签：<hr/>

属性：

align:对齐方式，默认center居中对齐

color:颜色

width:宽度，可以取值百分比或者像素

size:高度，只能取值像素

noshade:取消阴影

示例：

<hr color="red" width="50%" size="10"/>

8、强调标签：加粗字体

9、图片标签：<img />

属性：

src:图片路径

alt:图片加载错误时提示信息

title:鼠标放在图片上提示信息

width:宽度

border:边框

示例：

<img src="1.jpg" alt="图片加载失败" title="提示信息"/>

10、超链接：<a>文本</a>

属性：

href：要跳转的地址

示例：

<a href="https://www.baidu.com">百度一下</a>

页编程之文字标题。

同学们好，今天分享的主题是文件标题标签。我们将从高到低分别介绍H1、H2到H6，其中H6为最小。让我们看看具体的实现效果。现在网页上出现了6行文字，自动换行，并以H1到H6的顺序排列。这些文字展示了标签的用法和效果。接下来，让我们看看实现代码。标题标签的写法非常简单，没有任何需要讲解的内容。

选择标题标签的原因是它是最简单的围堵标签之一，不需要任何自带的属性，只需要将标签的内容围堵起来就可以了。这个标签是对各位标签写法的一个巩固。标题标签的作用是标记定义了html文档中的标题，字体相对较大并且加粗。需要注意的是，我们展示的内容通常用于新闻或公示的页面。除了用于定义目录和索引页面的不同层次外，标题标签还可以用于定义不同层次的标题。对于我个人来说，H1标签是最常用的。H3之后，我基本上没有使用过。现在，大多数时候使用CSS来自定义网页的字体样式。因此，了解这个标签的含义就足够了。

从本节课开始，我们将进入html主体部分的讲解，不再抽象地介绍配置信息。今天的分享就到这里，希望各位同学能够按照示例进行练习，不看视频也能写出来。如果需要相关文档和案例，请联系我。下期见。

如果您想学习编程，请关注我。

在线咨询

上一篇：建站要注意的对齐原则
下一篇：wxPython和PyQt谁才是最赞的Python GUI库

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML入门

、什么是HTML

二、HTML的基本结构

三、HTML的基本标签

、www：

2、网页的后缀名：html和htm

3、标签：

4、标题标签

5、段落标签：

6、换行标签：<br/>

7、水平线标签：<hr/>

8、强调标签：加粗字体

9、图片标签：<img />

10、超链接：<a>文本</a>

您的项目需求