我爱编程

HTML使用教程

2017-03-31  本文已影响0人  木子酱花生豆

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

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

虽然本篇只是简单介绍HTML的使用。但是良好的开端是成功的一半。积土成山，积水成渊~你一定会写出属于自己的网页的。

什么是 HTML？

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

HTML文档 = 网页

HTML语言整体结构

HTML的文档结构

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

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

<head>   　　　　　　　            　<!--头部开始 --> 
   
<meta charset="UTF-8"> 　 
 
<title> </title>  　　　　   　     <!--文件的标题 --> 
     
</head>   　　　　                 <!--头部结束 -->

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

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

HTML 元素语法

头部内容

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

主体内容

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

字符集

在网页中除了可显示常见的美国信息交换标准代码（外语缩写：ASCII）字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，二是键盘上没有的字符。HTML字符可以用一些代码来表示，代码可以有2种表示方式。即字符（命名实体）和数字代码（编号实体）。字符代码以“&”符开始，以分号";"结束，其间是字符名，如®。数字代码也以“&#”符开始，以分号";"结束，其间是编号，如®。
下表为HTML的字符集

书写要求

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

说了这么多来看一个实例吧~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML使用教程</title>
</head>
<body>
<h1>怎样才能学好html呢？。</h1>
<h2>这里是一个标题。</h2>
<p> 这里是一个段落。</p>
</body>
</html>

在网页中显示的就是下面的样子（有没有感觉这些标签很神奇呢）~



实例解析：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
这里写代码片

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

  1. 先在编译器(或记事本)中输入自己的代码。


  2. 保存，保存路径自己选择，文件名任意，注意文件类型。

  1. 保存成功之后，桌面上就已经出现了你的网页图标，双击打开。


  2. 打开后显示的就是我们自己写的网页啦，可以在网页中单击鼠标右键选择查看网页源代码哦~


现在开始学习标签，开始动手创造一个属于自己的网页吧~
推荐大家几个讲解的非常详细的还可以边学习边练习标签的网站吧~
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学习思维导图

现在，你已学完HTML，接下来该学习什么呢？

希望大家早日写出自己的网页~

上一篇下一篇

猜你喜欢

热点阅读