<!-- 1.HTML:超文本标记语言，网页内容载体
<html>标签成对出现，开始标签起始标签，结束标签称为闭合标签
html语义化：
在什么情况下我可以使用什么标签才合理
更容易被搜索引擎收录
更容易读出网页内容
-->
<!-- html文档标签
不是html标签
必须放在第一行
-->
<!DOCTYPE html>
<html>
<head>
<!-- 注释内容 -->
<title>我的第一个网页</title>
<!-- 指明标签类型：设置文档编码 -->
<meta charset="utf-8">
<style type="text/css">
body{color:red}
h1{color:blue;}
p.ex{color:green;}
</style>
</head>
<body>
<p>噜啦啦</p>
<h1>我是标题 My First CSS Code</h1>
<p>我是内容</p>
<p class="ex">我是ex的内容</p>
<script type="text/javascript">
var str = "hello.js";
document.write(str);
</script>
i like <code>web and CSS.</code>
</body>
</html>
<!-- 段落标签 p -->
<!-- 所有连续的空格空行浏览器会自动省略
-->
<!-- 标题标签<hx>
<h1>-<h6>
<h1>最大的标签<h6>最小的标签
自动换行并添加空行
-->
<!-- 强调标签
内联标签：不会自动换行
<em>:斜体展示
<strong>:加粗展示
-->
<!-- 引用标签 q -》 “”
短引用标签：<q>标签浏览器会自动加引号，此处重点在于其表示的寓意
长引用标签：<blockquote>长引用在使用时前后会自动换行，浏览器自动缩进
-->
<!-- 换行标签
空标签：<br/>必须含有终止符
分割线标签：<hr/>自动换行加分割线、线条比较粗，颜色为灰色
-->
<!-- 特殊字符
空格：
注册：®
版权：©
商标：™
-->
<!-- 地址标签
地址:address 自动将地址斜体展示
-->
<!-- code标签
代码标签：代码一行时使用
-->
<!-- pre标签
多行代码:文档里面长什么样子，浏览器就展示出什么样。
预显示标签，不会省略空格换行等
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>以下为不同的标题标签</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<em>强调！！！</em>
<strong>强调！！！</strong>
<p>
以下文字、图片引用自
<q>老刘</q>
以下文字摘自于百度百科对于JavaScript的定义
<blockquote>
dsjh,hljd DSA;LDK MNKLwsjkpc;v,;pwl adlmfKSBVM,XZ
</blockquote>
长引用结束
</p>
<p>在同一个p标签中<br/>换行<br/>换行<br/></p>
<p>
java从入门到精通
<hr/>
颈椎病康复指南
</p>
<h1>春晓</h1>
<p>春眠不觉晓<br/></p>
<p> 处处闻啼鸟</p>
<p> 夜来风雨声</p>
<p> 花落知多少</p>
<p>注册：®<br></p>
<p>版权：©<br></p>
<p>商标：™<br></p>
<p>
<address>
未央区草滩街道陕西科技大学
</address>
</p>
<p>
<code>
var i = 5;
</code>
<p>
var i = 5;
</p>
</p>
<p>
<pre>
int i = 5;
int j = 6;
int z = i + j;
</pre>
</p>
</body>
</html>
<!-- 列表标签
1、无序列表：
以黑圈圈表示
<ul>
<li>每一行内容</li>
每一个li内部可以使用段落、换行符、图片、链接、以及其他列表
</ul>
2、有序列表：
以数字表示
<ol>
<li>每一行内容</li>
</ol>
3、自定义列表
自定义列表开始
<dl>
每一项的开始
<dt>
每一行
<dd>
</dt>
<dl>
-->
<!-- HTML块
块级元素：显示时会以新行显示
<div> <hx> <p> <ul> <table>
内联元素：不会换行开始结束
<em> <strong> <a>
-->
<!--div标签
<div class/id>元素：内容自动开始一个新行，class属性可以有多个，id属性只能有一个
-->
<!-- span标签
内联元素，本身没任何含义，与CSS连用时可设置样式，被用来组合HTML中的行内元素
没有固定的格式表现，当使用CSS样式时才会产生视觉上的变化
也可以使用id、class属性
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Java从入门到精通</li>
<li>HTM、CSS、JS从入门到精通</li>
<li>Spring从入门到精通</li>
</ul>
<ol>
<li>Java从入门到精通</li>
<li>HTM、CSS、JS从入门到精通</li>
<li>Spring从入门到精通</li>
</ol>
<dl>
<dt>JavaSE从入门到精通</dt>
<dd>多线程</dd>
<dd>集合类</dd>
<dd>JVM</dd>
<dt>前端从入门到精通</dt>
<dd>HTML基础</dd>
<dd>CSS基础</dd>
<dd>JS基础</dd>
</dl>
<p>一个嵌套列表</p>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<ul>
<li>康师傅冰红茶</li>
<li>哇哈哈冰红茶</li>
</ul>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<h1>Java课程体系</h1>
<div class="javaSE">
<h2>JavaSE课程</h2>
<p>SE需要学会基本语法，多线程、集合类等的使用</p>
</div>
<div class="javaEE">
<h2>JavaEE课程</h2>
<p>SE需要学会Spring、SpringBoot框架</p>
</div>
<div class="Java"></div>
<div class="Java"></div>
<div id="前端"></div>
<p>some text<span>some others</span></p>
</body>
</html>