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 已废弃。定义居中文本。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- 我是一个注释呀! -->
为什么我的眼睛常含泪水?<br>
因为我对这土地爱得深沉!<br>
<h1>我爱ZZU</h1>
<h2>我爱ZZU</h2>
<h3>我爱ZZU</h3>
<h4>我爱ZZU</h4>
<h5>我爱ZZU</h5>
<h6>我爱ZZU</h6>
没有加p标签的段落
没有加p标签的段落
没有加p标签的段落
<br>
<h1>下面是加P标签的段落</h1>
<p>加p标签的段落</p>
<p>加p标签的段落</p>
<p>加p标签的段落</p> <hr color="red" width="200" size="10" align="left"/> <b>我是加粗的文本</b>
<br>
<i>我是倾斜的文本</i>
<br>
<font color="red" size="5" face="楷体">明月沉江春雾晓</font>
<center><font color="red" size="5" face="楷体">明月沉江春雾晓</font></center> </body>
</html>

结果:

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

简单的Demo:

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

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

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

结果:

图片标签

img:展示图片

属性:

  • src:指定图片的位置

演示相对路径:

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

结果:

相对路径

以.开头的路径

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

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

引入网络中的图片:

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

链接

a:定义一个超链接

属性:

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

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

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

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

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

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

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