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.
<caption>学生成绩</caption>
|班级|学生数|平均成绩|
|--|
|一班|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=邮件内容
插入图片标签：
# 下图显示的是插入src地址图片的显示
Markdown和HTML标记语言相通，但存在些许差别，大多数的常用的HTML标签标记直接写在Markdown里都会实现.
上述笔记存在不明白还是查看更官方的教程.
所以：为熟悉HTML语言，以后的Markdown笔记都直接使用HTML语言写
