JavaWeb学习——简单学习HTML5（一）

阅读量：3941 次

发布时间：2019-05-24

本文共 2562 字，大约阅读时间需要 8 分钟。

JavaWeb学习——简单学习HTML（一）

今天，我们来学习HTML中标签的简单使用。这里给大家推荐两个学习网站:

①w3school:http://www.w3school.com.cn/

②菜鸟教程：https://www.runoob.com/

HTML发布者：万维网联盟（World Wide Web Consortium）

HTML定义：超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。其中的超文本包括：图片、链接，甚至音乐、程序等非文字元素。

HTML语言的特点：

①简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

②平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

③通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

HTML文件后缀名（我们在写好HTML代码后将其后缀名改为.html即可）：.html

1.HTML的基本结构：

    
       Title

在HTML中是以各种各样的标签组成的，其中大多数标签都是成对出现的，但也是有单独的标签的。那么HTML的基本结构都有些什么，我们来看一下。

①DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于标签之前。

②< html > 与 < /html > 标签限定了文档的开始点和结束点

③< head > 标签用于定义文档的头部，它是所有头部元素的容器。< head > 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

④< meta > 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。< meta > 标签位于文档的头部，不包含任何内容。< meta > 标签的属性定义了与文档相关联的名称/值对。其中这里charset="UTF-8"是< meta >标签的属性，用于指定字符集

⑤< title >用于定义网页的标题

   这是一个标题

就和于百度主页的标题一样：

⑥body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

2.网页的基本标签

①标题标签

这是一个一级标签
    这是一个二级标签
    这是一个三级标签
    这是一个四级标签
    这是一个五级标签
    这是一个六级标签

显示结果：

②段落标签

红尘来呀来，去呀去

都是一场梦

显示结果：

③换行标签

红尘来呀来，去呀去 
都是一场梦

显示结果：

要注意的是换行只是普通的换行，但是段落段落标签是将文本分成几个段落，是不一样的，从文字间的间距也能看出来

④水平线标签

这是一条水平分割线
   
这是水平分割线的下方

显示结果：

⑤注释

在HTML中注释如下：

注释虽然在页面中看不见，但是当在网页查看源代码时是可以看见注释的

显示结果：

⑥特殊符号

空格：     结束 
大于号：> 
小于号：< 
引号：" 
版权符号：©

显示结果:

⑦加粗和斜体

这是一行加粗的文字这是一行斜体的文字

在这里插入图片描述

3.图片标签

一般情况下，我们会在我们的web项目下创建一个resource目录用来存放资源，比如图片、视频、音频…

显示结果：

4.超链接标签

①普通链接


   点击跳转百度

结果显示：

点击后：

②图片链接

图片链接其实和普通链接道理一样，只是将< a >标签中的文字用图片替换

在这里插入图片描述

点击图片也可以跳转

③锚链接

锚链接指的是跳转到相应位置，一般在页面内部创建一个标记，然后将链接地址指向该标记，点击就可以跳转到标记位置。一般我们浏览网页时，回到顶部，去底部等这些按钮链接就是锚链接。


   锚链接标记
   点击跳转到标记处

5.列表标签

①无序列表


       
    java
    
    C/C++
    
    Linux
    
    Python

显示结果：

②有序列表


       
    java
    
    C/C++
    
    Linux
    
    Python

结果显示：

③自定义列表

结果显示：

6.表格：


   
   
                           1               2               3          
                       4               5               6          
                       7               8               9