Django:web框架的学习(4:番外篇)

HTML语言的学习

学习技术的第一层面： what

学习技术的第二层面： how

学习技术的第三层面： why

1：第一层理解

本质上一种文本标记语言.
甚至可以说和我们熟悉的Markdown的标记语言有点类似.
Markdown标记语言转换成HTML就是和HTML标记语言一样的语法.

目前接触的标记语言
- Markdown: 书写文字排版的标记语言
- HTML/CSS/JavaScript: HTMl 显示网页信息，CSS 对网页信息进行修饰，JavaSript 对于网页显示动态信息
- LaTex: 主要使用在科学和数学领域对文字和数学公式等排版

本质都是标记语言：约定一定的语法，实现某种表现形式

2：第二层理解

主要的内容包括：

|序号|内容|说明|
|---|
|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语言写