语法和规范:

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> 定义最小的标题。

实例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 水平线

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

hr 元素可用于分隔内容。

实例

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML 段落

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

HTML 段落

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

实例

<p>This is a paragraph</p>
<p>This is another paragraph</p>

注释:

HTML 注释

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

HTML 注释标签

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

实例

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

HTML 链接

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

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

实例

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

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

HTML 超链接(链接)

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

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

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

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

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

延伸阅读:什么是超文本?

HTML 链接语法

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

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

href 属性规定链接的目标。

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

实例

<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 地址。

定义图像的语法是:

<img src="url" />

HTML 表格

你可以使用 HTML 创建表格。

实例

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

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

表格

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

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下:

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

HTML 列表

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

实例

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

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

无序列表

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

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

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下:

  • Coffee
  • Milk

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

有序列表

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

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

<ol>
<li>Coffee</li>
<li>Milk</li>
</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. 09Cookie&Session

    1.会话技术 1. 会话:一次会话中包含多次请求和响应.  一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止2. 功能:在一次会话的范围内的多次请求间,共享数据3. 方式: 1 ...

  2. Mongodb的基本操作-数据库 集合 文档的增删改查

    数据库操作: //查看有哪些数据库 > show dbs local  0.078GB mydb   0.078GB //use操作将切换到一个数据库 如果数据库存在将直接切换 如果不存在 那么 ...

  3. Java I/O(三)各种Reader和Writer读写器、RandomAccessFile随机访问文件、序列化

    2019 01/01 八.Reader和Writer读写器 前面讲的输入输出流的基本单位都是字节,因此可以称为“字节流”,读写器是以字符为基本单位,可以称为“字符流”.它们的使用方法非常相似,因此我考 ...

  4. 记二进制搭建k8s集群完成后,部署时容器一直在创建中的问题

    gcr.io/google_containers/pause-amd64:3.0这个容器镜像国内不能下载容器一直创建中是这个原因 在kubelet.service中配置 systemctl daemo ...

  5. 手机端css实现active伪类

    今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...

  6. struts2没有打印日志原因和No result defined for action XXXAction and result input

    在项目中调用一个action的方法的时候发生了一个错误,但是在catalina.out和配置的log4j都没有打印异常,后来在执行的action中加了logger.error("XXXXX& ...

  7. CSS之运算,Sass 之运算(加、减、乘、除)

    1. 加减法 加减法不是重点,重点是在SassScript中用到的两种单位之间的转换:绝对单位:px, pt, pc, in, mm, cm...绝对单位都能运算:相对单位:ex, em, rem.. ...

  8. 15.DRF学习以及相关源码阅读

    1.http请求协议 代码很枯燥,结果和奇妙. 1.cbv django.vuews import View classs LoginView(View): def get(self,requset) ...

  9. ubuntu1804 安装Nvidia驱动-nvidia-docker

    操作 看显卡 lspci | grep N 01:00.0 3D controller: NVIDIA Corporation GM107M [GeForce GTX 960M] (rev a2) 0 ...

  10. Open Cascade 转化为OpenSceneGraph中的Mesh

    #include <osgDB/ReadFile> #include <osgViewer/Viewer> #include <osgGA/StateSetManipul ...