HTML概述

概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本:

  • 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

标记语言:

  • 由标签构成的语言。<标签名称> 如 html，xml
  • 标记语言不是编程语言

HTML语法

基础语法：

  1. html文档后缀名 .html 或者 .htm
  2. 标签分为
  • 围堵标签：有开始标签和结束标签。如 <html> </html>
  • 自闭和标签：开始标签和结束标签在一起。如 <br>
  1. 标签可以嵌套：

    需要正确嵌套，不能你中有我，我中有你

    错误：<a><b></a></b>

    正确：<a><b></b></a>
  2. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来 -- 要么都是单引,要么都是双引,我选单引
  3. html的标签不区分大小写，但是建议使用小写。

基本标签

文件标签:

1. 文件标签：构成html最基本的标签

操作:

自动生成:

UTF_8支持中文的字符编码

2. 文本标签：和文本有关的标签



还有一些格式标签:

<i> 定义斜体文本

<b>定义粗体文本

<font>HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色

关于<hr>标签

属性：

  • color：颜色
  • width：宽度
  • size：高度
  • align：对其方式
    • center：居中
    • left：左对齐
    • right：右对齐

关于 <font>:字体标签

属性：

  • color：颜色
  • size：大小
  • face：字体

属性定义：

  • color：
  1. 英文单词：red,green,blue
  2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
  3. 值1值2值3：值的范围：00~FF之间。如： #FF00FF
  • width：
  1. 数值：width='20' ,数值的单位，默认是 px(像素)
  2. 数值%：占比相对于父元素的比例

<center>标签 HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文本标签</title>
  6. </head>
  7. <body>
  8.     <!-- 我是一个注释呀! -->
  9.     为什么我的眼睛常含泪水?<br>
  10.     因为我对这土地爱得深沉!<br>
  11.     <h1>我爱ZZU</h1>
  12.     <h2>我爱ZZU</h2>
  13.     <h3>我爱ZZU</h3>
  14.     <h4>我爱ZZU</h4>
  15.     <h5>我爱ZZU</h5>
  16.     <h6>我爱ZZU</h6>
  17.     没有加p标签的段落
  18.     没有加p标签的段落
  19.     没有加p标签的段落
  20.     <br>
  21.     <h1>下面是加P标签的段落</h1>
  22.     <p>加p标签的段落</p>
  23.     <p>加p标签的段落</p>
  24.     <p>加p标签的段落</p>
  26.     <hr color="red" width="200" size="10" align="left"/>
  28.     <b>我是加粗的文本</b>
  29.     <br>
  30.     <i>我是倾斜的文本</i>
  31.     <br>
  32.     <font color="red" size="5" face="楷体">明月沉江春雾晓</font>
  33.     <center><font color="red" size="5" face="楷体">明月沉江春雾晓</font></center>
  35. </body>
  36. </html>

结果:

个人笔记,这里就多展示一些内容叭

简单的Demo:

这里关键是想引入一下字符表格

还有很多特殊的字符,用到的时候,再进行查阅,这里展示的都是比较常见的.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>郑州大学网上新闻与公告</title>
  6. </head>
  7. <body>
  8.     <h3 align="center">意大利文化部电影司中国事务部专员亚历桑德罗·希尔维斯特里一行来校访问</h3>
  9.     <hr color="#ddd700">
  10.     <p>4月12日，<font color="#b22222">意大利文化部电影司中国事务部专员亚历桑德罗·希尔维斯特里(Alessandro Silvestri)一行</font>来校访问。<b>校党委常委、副校长韩国河</b>会见了来访客人，国际交流与合作处、对外联络办公室、国际学院负责同志参加会见。</p>
  11.     <p>韩国河介绍了学校的基本情况，与桑德罗·希尔维斯特里就在电影学科领域开展国际合作、河南省历史文化与文物保护现状等内容进行了深入交流，并希望双方在科学研究、师生交流、电影拍摄制作实践和文物保护等方面加强合作。</p>
  12.     <p>亚历桑德罗·希尔维斯特表示，他此次来访代表意大利文化部，旨在与河南高校在文物保护、博物馆交流以及合拍电影等方面开展合作。</p>
  13.     <p><i>亚历桑德罗·希尔维斯特里现任意大利文化部电影司中国事务部专员，曾参与多部著名电影的制作和发行。</i></p>
  14.     <hr color="#ddd700">
  15.     <font color="gray" size="2">
  16.         <center>郑州大学&nbsp;网上新闻与公告<br>
  17.         版权所有&copy;&nbsp;郑州大学 2000-2019<center>
  18.     </font>
  19. </body>
  20. </html>

结果:

图片标签

img：展示图片

属性：

  • src：指定图片的位置

演示相对路径:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>郑州大学网上新闻与公告</title>
  6. </head>
  7. <body>
  8.     <!-- 相对路径 -->
  9.     <image src="images/image_demo.jpg" align="left" alt="登山" width="500" />
  10. </body>
  11. </html>

结果:

相对路径

以.开头的路径

./ 代表当前目录./image/1.jpg

(两个点)/ 代表上一级目录

引入网络中的图片:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>郑州大学网上新闻与公告</title>
  6. </head>
  7. <body>
  8.     <image src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-278444.jpg" align="left" alt="登山" width="500" />
  9. </body>
  10. </html>

链接

a:定义一个超链接

属性：

  • href：指定访问资源的URL(统一资源定位符)
  • target：指定打开资源的方式
    • _self:默认值，在当前页面打开
    • _blank：在空白页面打开

上面 引用网络上的图片就是src的作用之一

关于link 比较容易理解 等写CSS的复习笔记的时候,会用到

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到