|序号|内容|说明| |---| |01|HTML,CSS的关系|分工明确| |02|初始HTML标签|了解大框架概念| |03|标签的语法|--| |04|代码注释|每种语言都有特定的注释约束| |05|语义化|有些是网页不显示，但利于跳转和搜索| |06|body|主体内容的存放| |07|各种标签的含义和使用|--|

HTML：网页内容的载体
- HTML 指的是超文本标记语言(Hyper Text Market Language)
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页
- 经过浏览器的渲染而显示出个各种内容
CSS：是表现
- CSS指的是层叠样式表(Cascading Style Sheets)
- 样式定义了如何显示HTML元素
- 样式通常储存在样式表中
- 外部样式表可以极大的提高工作效率
JavaScript：用来实现网页上的特效效果
- JavaScript 是属于网络的脚本语言

HTML 标记语言学习：

<html>
    <head>  </head>
    <body>  </body>
</html>

1: 整体布局

<html></html>: 称为根标签，所有的内容都在里面，同时可以看到成对出现的标签形式.

<head> </head>: 用于定义文档的头部，是所有头部信息的容器，一般的头部信息有：title(网页标题)、script、style(css样式)、link、meata

<body></body>: 是存放网页的主要内容，主要的标签有：h1(一级标题)、p(段落)、a(链接)、img(图片信息)

1465112435061.png

2: 标签的学习

标签的用途以及标签在浏览器中的默认样式

<body>网页上显示的内容的主题部分</body> 网页上显示的内容的主题部分
<p>段落标签</p><p>段落标签</p>
<hx>x(1-6)级标题</hx><h6>6级标题</h6>
<em>强调的文本显示斜体</em><em>强调的文本显示斜体</em>
<strong>强调的文本显示粗体</strong><strong>强调的文本显示粗体</strong>
<span>设置单独的样式，配合css</span><span>设置单独的样式,配合css</span>
<q>短文本引用，自动添加引号</q><q>短文本引用</q>
<blockquote>长文本引用</blockquote><blockquote>长文本引用</blockquote>
<br />添加回车<br />
前面有两个空格前面有两个空格
<hr / >添加横线<hr />添加横线
<address>上海市静安区:默认显示斜体</address><address>上海市静安区:默认显示斜体</address>
<code>def f():pass</code> <code>def f():pass</code>
<pre>def f():pass</pre><pre>def f():pass</pre>

1: 无序和有序列表

<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol>

2: 分块

<div>将一些独立的逻辑部分划分出来，分块，相当于一个容器</div><div>容器一</div><div>容器二</div><div>容器三</div>

3: 表格：默认不存在表框，需要配合CSS使用

<table>表格的标签</table>
<tbody>网页表格全部下载完成才会显示</tbody>
<tr>表示行</tr>
<th>表格表头</th>
<td>表格的一个单元</td>
<table summary="表格简介文本"></table>
<caption>标题文本</caption><caption>标题文本</caption>

<table>
  <tbody>
    <caption>学生成绩</caption>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
        </tr>
  </tbody>
</table>

Markdown语法自动渲染出了表格边框，网页显示默认没有,需要配合CSS.

|班级|学生数|平均成绩| |--| |一班|30|89| |二班|35|85| |三班|32|80|

4：标签属性值

添加网址：

<a href="http://www.w3school.com.cn/html/index.asp" title="点击进入HTML教程">点击进入HTML教程</a> <a href="http://www.w3school.com.cn/html/index.asp" title="点击进入HTML教程" >点击进入HTML教程</a>
<a href="http://www.w3school.com.cn/html/index.asp" title="点击进入HTML教程" target="_blank">点击进入HTML教程</a> <a href="http://www.w3school.com.cn/html/index.asp" title="点击进入HTML教程">点击进入HTML教程</a>

两者在网页中的差别是前者在原网页中加载目标网址，后者新建一个标签页打开目前网址

邮件：

<a href="mailto:1156143589@qq.com?subjec=研究汇报&body=空间模糊神经网络研究汇报进展">邮件</a><a href="mailto:1156143589@qq.com?subjec=研究汇报&body=空间模糊神经网络研究汇报进展">邮件</a>

mailto后为收件人地址，cc后为抄送地址，bcc后为密件抄送地址，subject后为邮件的主题，body后为邮件的内容，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。下面是一个完整的实例:mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容

插入图片标签：

![](https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-238663.jpg)
# 下图显示的是插入src地址图片的显示

Markdown和HTML标记语言相通，但存在些许差别，大多数的常用的HTML标签标记直接写在Markdown里都会实现. 上述笔记存在不明白还是查看更官方的教程.

所以：为熟悉HTML语言，以后的Markdown笔记都直接使用HTML语言写