半小时速成HTML(一)：https://blog.csdn.net/qq_41895747/article/details/104243943
半小时速成HTML(二)：https://blog.csdn.net/qq_41895747/article/details/104258303
HTML CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
<body style="background-color:yellow;">
字体颜色和字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1><p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<h1 style = "text-align: center;">居中对齐的标题</h1>
表格标签
有序列表和无序列表
<h4>无序列表</h4>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
区块
- div用于分隔区块
<div style = "color:violet">
<h3>测试div</h3>
</div>
- span用于组合行内元素，内联元素
<p>HTML比较<span style="color: black;">简单</span>就是比较<span style="color: coral;">烦</span></p>
框架
类似于嵌入式页面，等同于Qt中的QStackedwidget.
- 语法
<iframe src="URL"></iframe> 该URL指向不同的网页。
所有以上测试源码
<!--学习2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习实例</title>
<style type = "text/css">
h2 {color:red;}
p {color:blue;}
body {background-color:tomato;}
</style>
</head>
<body style = "background-color: yellowgreen;">
<h1 style = "text-align: center;">居中对齐的标题</h1>
<h2>文本化格式标签</h2>
<b>定义粗体文字</b>
<br>
<em>定义着重文字</em>
<br>
<i>定义斜体文字</i>
<br>
<small>定义小号文字</small>
<br>
<strong>定义加重语气</strong>
<br>
<sub>定义上标签</sub>
<br>
<sup>定义下标签</sup>
<br>
<ins>定义插入字</ins>
<br>
<del>定义删除字</del>
<br>
<em>定义强调内容</em>
<hr>
<h2>计算机输出标签</h2>
<code>
一段计算机代码
</code>
<br>
<kbd>定义键盘码</kbd>
<br>
<samp>定义计算机代码样本</samp>
<br>
<var>定义变量</var>
<br>
<pre>定义预文本格式</pre>
<hr>
<h2>引文、引用标签</h2>
<abbr>定义缩写</abbr>
<address>定义地址</address>
<bdo>定义文字方向</bdo>
<blockquote>定义长的引用</blockquote>
<q>定义短的应用</q>
<br>
<cite>定义引用、引证</cite>
<br>
<dfn>定义一个定义项目</dfn>
<hr>
<a href="https://blog.csdn.net/qq_41895747"style="text-decoration:none">我的CSDN</a>
<br>
<a href="https://blog.csdn.net/qq_41895747/article/details/104243943"target = "_black"rel="noopener noreferrer">HTML速成笔记</a>
<br>
<a id="tips">提示部分</a>
<a href="#tips">访问有用的提示部分</a>
<p>创建图片链接
<a href="https://blog.csdn.net/qq_41895747"><img src="image/icon.png"width="100"height="100"></a>
</p>
<p>发送电子邮件
<a href="mailto:[email protected]?Subject=Hello%20again" target="_top">发送邮件</a>
<b>注意：单词之间的空格需要用%20来代替</b>
</p>
<h4>无序列表</h4>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<div style = "color:violet">
<h3>测试div</h3>
</div>
<p>HTML比较<span style="color: black;">简单</span>就是比较<span style="color: coral;">烦</span></p>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
</div>
</body>
</html>
