赞
踩
HTML (HyperText Markup Language)
不是一门编程语言, 而是一种用来告诉浏览器如何组织页面的标记语言。
<!DOCTYPE html>
<html>
<head>
<!-- 网页解码方式 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>Title</title>
</head>
<body>
</body>
</html>
描述: 每个语言都是有自己的语法规则。例如: 按照规范的英语语法编写,对方可以理解明白你所要表达的意思。HTML 也一样,按照规范的语法编写,浏览器可以理解你所要表达的意思。
<!DOCTYPE html>
<html>
<head>
<!-- 网页解码方式 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>Title</title>
</head>
<body>
<p>My cat is very grumpy</p>
</body>
</html>
在 HTML 文档中 标签也可以叫做元素, 它两表达的是同一个意思。
上面内容在 body 元素里添加了一个 p 元素, 下面让我们来看看这个 p 元素
<!DOCTYPE html>
<html>
<head>
<!-- 网页解码方式 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>Title</title>
</head>
<body>
<p class="editor-note">My cat is very grumpy</p>
</body>
</html>
在元素上也可以添加属性,属性包含元素的额外信息, 这些信息并不会出现在实际的内容中。
属性必须包含如下内容:
描述: 注释的主要目的是给开发者看的。例: 如果你看到很久之前编写代码或者别人编写的代码感到 疑惑时。这个时候注释是很有用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 注释的内容 -->
没有注释的内容
</body>
</html>
描述: <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>
描述: 定义段落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>段落</p>
<p>段落</p>
</body>
</html>
描述: 向网页中插入图片
属性:
src: 图片的 URL
alt: 图像显示出错的替代文本
width: 图像宽度
height: 图像高度
注意点:
1. 默认显示图像正常宽高
2. 图像只设置宽度,高度自适应
3. 图像只设置高度,宽度自适应
4. 图像同时设置宽和高, 可能会导致图像变形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片">
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片" width="500px;">
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片" height="500px;">
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片" width="100px" height="500px;">
</body>
</html
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。