欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【网页--HTML使用教程】

程序员文章站 2022-03-22 18:00:22
...

先来大概了解一下创造自己的炫酷的网页都需要掌握哪几项基础技能吧~
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。

  1. HTML是网页内容的载体，就是网页制作者放在页面上想要让用户浏览的信息，包含文字、图片、视频等。
  2. CSS样式是表现。就是对网页的装修。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有图片的轮换。简单说，就是有动画的，有交互的一般都是用JavaScript来实现的。

什么是 HTML？

  • HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)。
  • HTML 不是一种编程语言，而是一种标记语言。
  • 标记语言是一套标记标签，HTML 使用标记标签来描述网页。

  • “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

    网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。

HTML文档 = 网页

  • HTML 文档描述网页, HTML 文档也被称为网页
  • HTML 文档包含 HTML 标签和纯文本
  • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
  • 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML语言整体结构

  • 一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。
  • 标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
  • 标记符<html>,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而</html>,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

HTML的文档结构

<!DOCTYPE html>                   <!--声明一个html文件-->

<html>                            <!--HTML文件的开始 --> 

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

<meta charset="UTF-8"> 　 

<title> </title>  　　　　   　     <!--文件的标题 --> 

</head>   　　　　                 <!--头部结束 -->

<body>    　　                   　<!--主体的开始 -->

</body>    　　                  　<!--主体的结束 -->

HTML 元素语法

  • HTML 元素以开始标签起始，以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性
  • HTML标记格式：<开始标记 属性名=“属性值”>内容<结束标记>

头部内容

  • <head></head>这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。
  • 以下表格列出了 HTML head 元素：
标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

主体内容

<body></body>,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

书写要求

  1. 文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。
  2. 超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。
  3. 大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“&nbsp（注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。
  4. 标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。
  5. HTML注释由”< !–”号开始，由符号”–>“结束结束，例如<!–注释内容–>。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。

在学习HTML之前，先学习一下怎么来创建自己的第一个网页吧~

  1. 先在编译器(或记事本)中输入自己的代码。
    【网页--HTML使用教程】
  2. 保存，保存路径自己选择，文件名任意，注意文件类型。

【网页--HTML使用教程】
3. 保存成功之后，桌面上就已经出现了你的网页图标，双击打开。
【网页--HTML使用教程】
4. 打开后显示的就是我们自己写的网页啦，可以在网页中单击鼠标右键选择查看网页源代码哦~

【网页--HTML使用教程】

现在开始学习标签，开始动手创造一个属于自己的网页吧~
推荐大家几个讲解的非常详细的还可以边学习边练习标签的网站吧~
W3school
慕课网
菜鸟教程
大家在这些网站上可以多练练，其实最重要的还是练习和积累，所以加油哦~

标签大概就是酱

<h1>This is a heading</h1>  <!-- 标题标签 -->
<p>This is a paragraph</p>  <!-- 段落标签 -->
<h2 style="background-color:red">This is a heading</h2>
<!-- HTML样式实例，为元素定义了背景颜色-->
<a href="url">Link text</a>
<!-- 调用链接语法 -->
![](url)  <!-- 显示图片语法 -->

如果，你已学完HTML，接下来该学习什么呢？

  • 学习 CSS
    CSS被用来同时控制多重网页的样式和布局。
    通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。
  • 学习 JavaScript
    JavaScript 可以让你的网页更加生动。
    如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。
    JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。
相关标签： 前段-初

上一篇： 监督分类：用随机森林做遥感影像像素级分类（更新：多分类实现）

下一篇： Linux 自动设置IP

推荐阅读