整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5简单教学第一章(第一节)

家好,我是新媒之声广告工作室的大白,今天我给大家带来的是HTML5文字教学。

首先给大家介绍一下html5的标准语言结构和后缀;

点击右键新建一个文本文档重命名为index(可根据自己来命名但不能用中文)后缀改为html

html5有两种后缀一种为html另一种为htm;

我们来认识一下html5它是html4.0升级而来,相比html4.0来说改的更简单更完善了,html5是一种标签语言

是浏览器可以直接解析的一种语言不像php或是其它语言需要用服务器解析在用浏览器来识别表现出来,一般用来写网站静态页面或是模板,html5现在的地位在慢慢提升,一些app开始使用html5加原生混编开发。

html语言结构分析:

一般html5都是双标签很少有单标签的存在;

<!DOCTYPE html>

<!-- 文档类型 -->

<html>

<!-- html开始标签-->

<head>

<!-- head头部开始标签-->

<!-- 里面可以写一些设置字符的代码和页面标题代码css样式和js样式等 -->

<meta charset="UTF-8">

<!-- 设置字符集 -->

<title>Document</title>

<!-- 页面标题标签-->

</head>

<!-- head结束标签 -->

<body>

<!-- body体开始标签 -->

<!-- body体用于写一些直接解析在浏览器里让用户观看的标签 -->

</body>

<!-- body结束标签 -->

</html>

<!-- html结束标签 -->

由于html5标签使用<>组成所以要用大于号和小于号要非常谨慎,比如要表现2>1必须要用实体符来代替相应的符号。

HTML <!--...--> 注释标签

标签定义及使用说明

<!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。

您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。

您也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中,这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。

<script type="text/javascript"><!-- function displayMsg() { alert("Hello World!") } //--> 
</script>

html 注释代码分析图

注释:命令行最后的两个正斜杠(//)是 JavaScript 注释符号。这确保了 JavaScript 不会执行 --> 标签。

除了在源文档中有非常明显的作用外,许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档,从传统的 HTML/XHTML 注释中找到特定的字符序列,然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单的包括其他文件中的文本(即所谓的服务器端包含,server-inside include),也可能是复杂地执行其他命令去动态生成文档的内容。

所有主流浏览器都支持 <!--...--> 注释标签。


HTML 4.01 与 HTML5之间的差异

无。


标准属性

<!--...--> 注释标签不支持任何标准属性。

如需更多有关 HTML 标准属性的信息,请访问 标准属性。


事件属性

<!--...--> 注释标签不支持任何事件属性。

如需更多有关 HTML 事件属性的信息,请访问 事件属性。


HTML注释的作用

一套完整的代码可以让人眼花缭乱,当程序员想要对某些部分进行修改的时候,可能要花很多的时间去找出那部分的代码。就像我们在文章中给重要的部分进行标记、做记号一样,在代码里可以使用到“注释标签”来对一些代码进行注解。注释标签不会在可视化界面当中显示,因为它只是程序员们用来标注说明的一个小玩意,用来对一些代码程序进行解释,也方便后来者能够快速地接手并且理解其用处。

网页的开发必定却少不了颜色的组成,html5颜色属性标签:

HTML 颜色

目前所有浏览器都支持以下颜色名。

141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。

提示: 17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜色。:

颜色属性标签共分为四种:

1.英文 2.十进制 3.十六进制

red rgb(255,0,0); #ffffff(#fff) 白色

green rgb(0,255,0); #ff0000(#f00) 红色

blue rgb(0,0,255); #00ff00(#0f0) 绿色

4.带有透明度 #0000ff(#00f) 蓝色

rgba(255,0,0,0.5); #000000(#000) 黑色

rgba(0,255,0,0.5); #ffff00(#ff0) 黄色

rgba(0,0,255,0.5); #00ffff(#0ff) 青色

#ff00ff(#f0f) 紫色

html颜色属性标签:

<style type="text/css">

h1{

color: red;

}

</style>

注意:这里用的十六进制全写和缩写表达的是一个意思#ff00aa只要十六进制颜色有两位重复可以只写一个#f0a。

body体背景颜色:

<body bgcolor="#aaf"></body>

注意:css样式有三种写法这里用到前两种,后面讲解css的时候会介绍;

嵌入式样式(属于内部样式表)
特征:
1、样式的属性内容以代码的形式[放在 ]写在网页代码中!
2、首先,通过【格式】→【样式】设置样式的属性内容!
3、在合适的地方使用 class="样式名" 调用具体的样式效果!
如: <style type="text/css">
 h1{
 color: red;
 }
</style>

内联式样式(属于内部样式表)
特征:
1、样式的属性内容直接跟在将要修饰的文字标记里[如:
2、具体格式: <body bgcolor="#aaf"></body>
例如:修饰单元格里的文字特征:1、有一个单独的CSS文件存在![如:001.css]2、首先,通过【格式】→【样式表连接】与CSS文件[001.css]建立连接!3、在合适的地方使用 class="样式名" 调用具体的样式效果!如:<link href="001.css" type="text/css" rel="Stylesheet"/>嵌入式样式(属于内部样式表)

如果需要课件和今天用到的文件可以加关注私聊我。

neAnime是精美的动漫在线观看网站HTML5模板,也可以作为动漫新闻和博客网站的界面。模板使用紫黑色的UI设计,看起来很漂亮。模板编码基于Bootstrap v4.1.3框架,很容易自定义。
主要特色

  • Bootstrap v4.1.3
  • 响应式布局
  • 时尚的UI设计
  • themify字体小图标
  • 无控制台错误
  • SEO友好的代码
  • 动漫动漫观看动漫新闻动漫博客黑紫色oneanime

时尚的蓝紫色动漫网站HTML模板(共124个文件)

  • assets
  • anime_details.html
  • anime_video.html
  • blog.html
  • category.html
  • elements.html
  • genres.html
  • index.html
  • single-blog.html

TML 或超文本标记语言 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而,值得注意的是,HTML 不能被视为一种编程语言,因为它不能创建动态功能。

HTML有很多用例,即:

  1. 网页开发。开发人员使用 HTML 代码来设计浏览器如何显示网页元素,例如文本、超链接和媒体文件。
  2. 互联网导航。由于 HTML 被大量用于嵌入超链接,因此用户可以轻松地在相关页面和网站之间导航和插入链接。
  3. 网络文档。HTML 使组织和格式化文档成为可能,类似于 Microsoft Word。
  4. 还值得注意的是,HTML 现在被视为官方 Web 标准。万维网联盟 (W3C)维护和开发 HTML 规范,同时提供定期更新。

本文将介绍 HTML 的基础知识,包括它的工作原理、优缺点以及它与 CSS 和 JavaScript 的关系。

什么是 HTML?

HTML(代表超文本标记语言)是构成大多数网页和在线应用程序的计算机语言。超文本是用于引用其他文本片段的文本,而标记语言是告诉 Web 服务器文档的样式和结构的一系列标记。

HTML 是如何工作的

在国内的网站上找了一圈,这应该是介绍历史最细致的,长按保存手机里翻译

html文件

平均每个网站包含几个不同的信息 HTML 页面。例如,主页、关于页面和联系页面都将具有单独的 HTML 文件。

HTML 文档是以 .html 或 .htm 扩展名结尾的文件。Web 浏览器读取 HTML 文件并呈现其内容,以便互联网用户可以查看它。

html元素的三个部分

所有 HTML 页面都有一系列 HTML 元素,由一组标签和属性组成。HTML 元素是网页的构建块。标签告诉 Web 浏览器元素在哪里开始和结束,而属性描述元素的特征。

元素的三个主要部分是:

  • 开始标签 - 用于说明元素开始生效的位置。标签用左尖括号和右尖括号包裹。例如,使用开始标签 <p> 创建一个段落。
  • 内容——这是其他用户看到的输出。
  • 结束标签 - 与开始标签相同,但在元素名称前有一个正斜杠。例如,</p> 结束一个段落。

这三个部分的组合将创建一个 HTML 元素:

<p>这是在HTML中添加段落的方法。</p>

HTML 元素的另一个关键部分是它的属性,它有两个部分——名称和属性值。名称标识用户想要添加的附加信息,并且属性值给出进一步的说明。

例如,添加紫色和 font-family verdana 的样式元素将如下所示:

< p style= "color:purple;font-family:verdana" >这是在HTML中添加段落的方法。< /p >

另一个属性,HTML 类,对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。 例如,我们将对标题 <h1> 和段落 <p> 使用相同的样式。样式包括背景颜色、文本颜色、边框、边距和填充,在 .important 类下。要在 <h1> 和 <p> 之间实现相同的样式,请在每个开始标记后添加 class=”important”:

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多数元素都有一个开始标签和一个结束标签,但有些元素不需要结束标签即可工作,例如空元素。这些元素不使用结束标签,因为它们没有内容:

< img src= "/" alt= "图像" >

这个图像标签有两个属性——一个src属性,图像路径,和一个alt属性,描述性文本。但是,它没有内容,也没有结束标签。

最后,每个 HTML 文档都必须以 <!DOCTYPE> 声明开头,以告知 Web 浏览器文档类型。使用 HTML5,doctype HTML public 声明将是:

< !DOCTYPE html >

最常用的 HTML 标签和 HTML 元素

目前,有 142 个 HTML 标签可以用于创建各种元素。尽管现代浏览器不再支持其中一些标签,但学习所有可用的不同元素仍然是有益的。

第二节将讨论最常用的 HTML 标签和两个主要元素——块级元素和内联元素。

块级元素

块级元素占据页面的整个宽度。它总是在文档中开始一个新行。例如,标题元素将位于与段落元素不同的行中。

每个 HTML 页面都使用这三个标签:

  • <html>标签是定义整个 HTML 文档的根元素。
  • <head> 标签保存页面标题和字符集等元信息。
  • <body>标签包含了页面上出现的所有内容。
<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的块级标签包括:

  • 标题标签 - 这些范围从 <h1> 到 <h6>,其中标题 h1 的大小最大,当它们向上移动到 h6 时变得越来越小。
  • 段落标签——全部使用 <p> 标签括起来。
  • 列表标签——有不同的变体。<ol> 标签用于有序列表,<ul> 用于无序列表。然后,使用 <li> 标记将各个列表项括起来。

内联元素

内联元素格式化块级元素的内部内容,例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。

例如,一个 <strong> 标签会以粗体呈现一个元素,而 <em> 标签会以斜体显示它。超链接也是使用 <a> 标记和 href 属性来指示链接目标的内联元素:

<a href="https://www.icodingdeu.com/" >点我!</a> 

HTML 演变——HTML 和 HTML5 有什么区别?

HTML 的第一个版本由 18 个标签组成。从那时起,每个新版本都带有添加到标记中的新标签和属性。迄今为止,该语言最重大的升级是 2014 年引入的 HTML5。

HTML 和 HTML5的主要区别在于HTML5 支持新类型的表单控件。HTML5 还引入了几个语义标签,可以清楚地描述内容,例如 <article>、<header> 和 <footer>。

HTML 的优点和缺点

就像任何其他计算机语言一样,HTML 有其优点和局限性。以下是 HTML 的优缺点:

优点:

  • 初学者友好: HTML 具有干净且一致的标记,以及较浅的学习曲线。
  • 支持领域广:该语言被广泛使用,拥有大量资源和庞大的社区。
  • 无障碍:它是开源的并且完全免费。HTML 在所有 Web 浏览器中本机运行。
  • 灵活的:HTML很容易与PHPNode.js等后端语言集成。

就像任何其他计算机语言一样,HTML 有其优点和局限性。以下是 HTML 的优缺点:

缺点:

  • 静止的 该语言主要用于静态网页。对于动态功能,您可能需要使用 JavaScript 或 PHP 等后端语言。
  • 单独的 HTML 页面 用户必须为 HTML 创建单独的网页,即使元素相同。
  • 浏览器兼容性 一些浏览器采用新特性的速度很慢。有时较旧的浏览器并不总是呈现较新的标签。

HTML、CSS 和 Javascript 是如何相关的

HTML 用于添加文本元素并创建内容结构。然而,仅仅建立一个专业的和完全响应的网站是不够的。因此,HTML 需要借助层级样式表 (CSS)和JavaScript来创建绝大多数网站内容。

  • CSS 负责样式,例如背景、颜色、布局、间距和动画。
  • JavaScript 添加了动态功能,例如滑块、弹出窗口和照片库。这三种语言是前端开发的基础。

结论

HTML 是 Internet 上的主要标记语言。每个 HTML 页面都有一系列创建网页或应用程序内容结构的元素。

HTML 是一种对初学者友好的语言,有很多支持,主要用于静态网站页面。HTML 与用于样式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我们还向您展示了一些在线教学课程,它们将有助于提高您的 HTML 知识或提供对 HTML 的基本理解。

如果您有任何其他喜欢的资源来学习 HTML,请在评论部分告诉我们。