一、HTML基本介绍
HTML:超文本标记语言,它不是一种编程语言,而是一种标记语言。
HTML基本布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML</title>
</head>
<body>
<!--
<header></header>
<article></article>
<footer></footer>
-->
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素,语言为英文网站,"lang"为"language","en"表示"english"
<head> 元素包含了文档的元(meta)数据 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 页面标题(网页名)
<body> 元素包含了可见的页面内容;细分模块还可以分为header、article、footer
二、HTML标签
<h1>标题</h1> 标题标签
<p>段落</p> 段落标签
<a href=" 网址" target= "_blank">链接名</a> 链接,href为跳转网址或html页面,可以暂时用“#”, target= "_blank"跳转新开一个页面。
<img src="图片地址" alt=“图片名” height="高度" weight="宽度"/> 图片
<strong></strong> 字体加粗,之前用<b></b>
<em></em> 字体倾斜 ,之前用<i></i>
<ol><li></li></ol> 有序列表
<ul><li></li></ul>无序列表
例子:
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>我是段落,段落,段落</p>
<p>我是段落,<strong>段落加粗</strong>,<em>段落倾斜</em></p>
<img src="img/post-img.jpg" aly="Code image" height="200" weight="500" />
<a href="#" target="_blank">我是链接,请点我</a>
<p>水果种类</p>
<ol>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
<p>水果种类</p>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
结果: