学过XML的话HTML可以很快上手
目录
扫描二维码关注公众号,回复:
9055201 查看本文章
什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.
实例
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML 段落
HTML 段落是通过标签 <p> 来定义的.
实例
<p>这是一个段落</p>
<p>这是另外一个段落</p>
HTML 链接
HTML 链接是通过标签 <a> 来定义的.
实例
<a href="https://blog.csdn.net/qq_41895747">我的CSDN博客</a>
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
实例
<img src="/images/logo.png" width="258" height="39" />
注意引用文件的路径:
1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下:
<img src="file:///f:/*.jpg" width="300" height="120"/>2、*.html 文件跟 *.jpg 图片在相同目录下:
<img src="*.jpg" width="300" height="120"/>3、 *.html 文件跟 *.jpg 图片在不同目录下:a、图片 *.jpg 在 image 文件夹中,*.html 跟 image 在同一目录下:
<img src="image/*.jpg/"width="300" height="120"/>b、图片 *.jpg 在 image 文件夹中,*.html 在 connage 文件夹中,image 跟 connage 在同一目录下:
<img src="../image/*.jpg/"width="300" height="120"/>4、如果图片来源于网络,那么写绝对路径:
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
上述实例合集:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>我的第一个段落</p>
<a href="https://blog.csdn.net/qq_41895747">我的CSDN博客</a>
<br><!--换行-->
<img src="image/icon.png" width="100" height="100">
</body>
</html>
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
注意:
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
常用属性:
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
注释
<!-- 这是一个注释 -->
水平线
<hr />
常用标签
标签 | 描述 |
---|---|
<html> | 定义 HTML 文档 |
<body> | 定义文档的主体 |
<h1> - <h6> | 定义 HTML 标题 |
<hr> | 定义水平线 |
<!--...--> | 定义注释 |
改变字体大小
<font size = "1">1号字体文本</font>
HTML输出省略多余空格
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
例子: