认识元素与标记
html head meta title body 叫元素（标签 标记 tag） html head title body成对标记 meta非成对 成对标记 有开始标记，结束标记 元素分为块级元素 非块级元素(行内元素) 块级元素独占一行
WS使用介绍【部分】
WS快捷键【部分】
自动格式化代码快捷键ctrl alt l 删除整行的快捷键是shift delete
body标签如何格式化代码缩进
body内标签缩进 文件->设置->编辑器->代码样式【html】【删body】
学习第一节课的元素
h1-h6标签使用
所有呈现在页面中的内容都是写在body元素内 标题元素 （成对）h1 h2 h3 h4 h5 h6【都是块级元素】 例如：
代码语言：javascript复制 <h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>注意
h6标签是标题标签，在使用过程中不能作为加粗字体和放大/缩小字体的目的使用
段落标签【p标签】
p是段落标签 块级元素 例如：
代码语言：javascript复制 <p></p>
<p>段落一
<p/>
<p>段落二</p>容器标签【span标签】
span是非块级元素(行内元素) 例如：
代码语言：javascript复制<span>这是span的内容</span>
<span>这里是第二个span</span这里再讲一下换行标签换行标签 br 例如：
代码语言：javascript复制<span>这里是第1个span</span><br/>
<span>这里第二个span容器</span>转义符介绍【部分】
空格，制表符，换行符都叫空白符。 无论有多少空白符，浏览器都作为一个空格处理。 所以这里我们引用了转义符：
代码语言：javascript复制 这是第一行<br/>
这是 第二行<br/>
这是 第三行<br/>
版权符©<br/>
小于符<<br/>
大于符><br/>
双引号""<br/>
空格
版权符 ©
小于符 <
大于符 >
双引号 "pre标签--代码原样呈现
直接上示例：
代码语言：javascript复制 / /
/||/
/ ||
|| /
/||/
/ / 实际代码如下：
代码语言：javascript复制<pre>
/ /
/||/
/ ||
|| /
/||/
/ /
<span></span>
<br>
</pre>上下标标签【上sup，下sub】
他们是一对成对标签 例如：
代码语言：javascript复制 X<sup>2</sup><br/>
H<sub>2</sub>O<br/>列表标签【ul，ol，li】
标签介绍
unordered list; ul 无序列表 块级元素 ordered list; ol 有序列表 块级元素 list item; li 列表项 块级元素
ul标签--无序列表
ul 无序列表标签 元素有属性 属性又有属性值 ul的type的属性值可以是 disc【默认值】 circle square
未嵌套
- 计算机
- 文学
- 数学
- 计算机
- 文学
- 数学
代码如下：
代码语言：javascript复制 <ul type="square">
<li>计算机</li>
<li>文学</li>
<li>数学</li>
</ul>
<ul>
<li type="square">计算机</li>
<li type="circle">文学</li>
<li type="disc">数学</li>
</ul>嵌套无序列表
代码语言：javascript复制计算机
编程
数据库
云计算
文学
中国文学
外国文学
数学代码如下：
代码语言：javascript复制 <ul type="square">
<li>计算机
<ul>
<li>编程</li>
<li>数据库</li>
<li>云计算</li>
</ul>
</li>
<li>文学
<ul>
<li>中国文学</li>
<li>外国文学</li>
</ul>
</li>
<li>数学</li>
</ul>ol标签--有序列表
type属性的属性值 1 A I i
代码语言：javascript复制 计算机
编程
数据库
云计算
文学
中国文学
外国文学
中国文学
外国文学
中国文学
外国文学
数学代码如下：
代码语言：javascript复制 <ol type="A">
<li>计算机
<ol type="i">
<li>编程</li>
<li>数据库</li>
<li>云计算</li>
</ol>
</li>
<li>文学
<ol type="I">
<li>中国文学</li>
<li>外国文学</li>
<li>中国文学</li>
<li>外国文学</li>
<li>中国文学</li>
<li>外国文学</li>
</ol>
</li>
<li>数学</li>
</ol>表格标签【table标签】
表格标签 table 表格行标签 tr (table row，column) 表格单元格 th td table标签的属性值 border width 像素 px(pixel) 1920*1208
代码语言：javascript复制 1
2
3
4
5
6
7
8 表格标题
1
2
1
2
1
2代码如下：
代码语言：javascript复制 <table border="1" width="100px">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
<table border="1" width="100px">
<caption>表格标题</caption>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>2</th>
<th></th>
</tr>
</tbody>
<tfoot>
<tr>
<th>1</th>
<th>2</th>
<th></th>
</tr>
</tfoot>
</table>菜鸟在线工具
上述代码都可以在这边进行调试
菜鸟HTML在线工具【由菜鸟教程提供】
