语法和规范：

1.所有的HTML文件后缀名都是以.html或者.htm结尾的，建议使用.html结尾

2.整个html文件分别由头部分<head></head>和体部分<body></body>组成

3.html标签都是由开始标签和结束标签组成<br />

4.html标签忽略大小写，建议大家使用小写

HTML相关标签的学习

1.标题标签

HTML 标题

在 HTML 文档中，标题很重要。

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

实例

  1. <h1>This is a heading</h1>
  2. <h2>This is a heading</h2>
  3. <h3>This is a heading</h3>

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例

  1. <p>This is a paragraph</p>
  2. <hr />
  3. <p>This is a paragraph</p>
  4. <hr />
  5. <p>This is a paragraph</p>

HTML 段落

可以把 HTML 文档分割为若干段落。

HTML 段落

段落是通过 <p> 标签定义的。

实例

  1. <p>This is a paragraph</p>
  2. <p>This is another paragraph</p>

注释：

HTML 注释

注释标签 <!-- 与 --> 用于在 HTML 插入注释。

HTML 注释标签

您能够通过如下语法向 HTML 源代码添加注释：

实例

  1. <!-- 在此处写注释 -->

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

实例

创建超级链接
本例演示如何在 HTML 文档中创建链接。
将图像作为链接
本例演示如何使用图像作为链接。

（可以在本页底端找到更多实例）

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

延伸阅读：什么是超文本？

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

  1. <a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

  1. <a href="http://www.w3school.com.cn/">Visit W3School</a>

上面这行代码显示为：Visit W3School

点击这个超链接会把用户带到 W3School 的首页。

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 图像

通过使用 HTML，可以在文档中显示图像。

实例

插入图像
本例演示如何在网页中显示图像。
从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。

（可以在本页底端找到更多实例。）

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

  1. <img src="url" />

HTML 表格

你可以使用 HTML 创建表格。

实例

表格
这个例子演示如何在 HTML 文档中创建表格。
表格边框
本例演示各种类型的表格边框。

（可以在本页底端找到更多实例。）

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  1. <table border="1">
  2. <tr>
  3. <td>row 1, cell 1</td>
  4. <td>row 1, cell 2</td>
  5. </tr>
  6. <tr>
  7. <td>row 2, cell 1</td>
  8. <td>row 2, cell 2</td>
  9. </tr>
  10. </table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML 列表

HTML 支持有序、无序和定义列表

实例

无序列表
本例演示无序列表。
有序列表
本例演示有序列表。

（可以在本页底端找到更多实例。）

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

  1. <ul>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. </ul>

浏览器显示如下：

  • Coffee
  • Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

  1. <ol>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. </ol>

浏览器显示如下：

  1. Coffee
  2. Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

字体标签

字体标签使用<font></font>

Web01_HTML的更多相关文章

  1. 【javaweb学习笔记】WEB01_HTML

    案例一:网站信息显示页面1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它 ...

  2. 【JAVAWEB学习笔记】01_HTML

    案例一:网站信息显示页面1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它 ...

  3. HTML01

    1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它不是编程语言) 2.为什 ...

随机推荐

  1. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. H5 2次重定向301

    测试环境http ,生产https,导致请求重定向.加之H5自己的一次请求重定向,一共2次.

  3. IDEA查看JDK源代码

    之前已经讲解过如何使用Eclipse查看源代码,IDEA作为一个集成开发环境越来越流行,今天学习以下如何使用Eclipse查看JDK的代码. File->Project Structure,选择 ...

  4. js 动态获取高度 设置距离

    var boxs = document.getElementById('m2-head');var Height = boxs.clientHeight||o.offsetHeight;console ...

  5. re模块的小练习

    1.匹配标签 1 import re 2 ret = re.search('<(?P<tag_name>\w+)>\w+</(?P=tag_name)>','< ...

  6. win10 去掉资源管理器左侧的Creative Cloud Files

    open regedit 依次打开HKEY_CLASSES_ROOT\CLSID\{0E270DAA-1BE6-48F2-AC49-95A54E35F3C4} 双击{0E270DAA-1BE6-48F ...

  7. 命令行执行while语句

    while true;do echo hello world;sleep 1;done

  8. npoi 导入

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CusImport.aspx ...

  9. [Linux系统] (4)脚本编程

    一.bash shell 可以理解为一种解释器和启动器,解释命令文本,并执行命令. 命令来源: 用户交互输入 文本文件输入 1.示例,写一个最简单的文本 vi test.txt 写入以下内容: ech ...

  10. JavaScript 数组2—关联数组

    ㈠什么是关联数组 可以自定义下标名称的数组 ㈡为什么 索引数组中的数字下标没有明确的意义 ㈢何时 只希望每个元素都有专门的名称时 ㈣如何:2步 1)创建空数组 2)向空数组中添加新元素,并自定义下标名 ...