HTML学习笔记

HTML(HyperText Markup Language)超文本标记语言，可以理解为是一种排版语言，用来表示文本和图片以及连接在浏览器上如何显示。

HTML是各个浏览器厂家来进行形成事实上的标准，通过W3C形成规范文本。

早期的dos系统只有三个字母的文件后缀，所以.html有时候又是.htm。

学习准备

准备文本编辑器和浏览器即可。IDE可以管理不同页面间的关系，提供所见即所得的功能。学习阶段应专注，不需要。

HTML语言框架

<!DOCTYPE html>
<html> 
<head>
    <title>我的页面</title>
    <meta charset=utf-8>
</head>
    <body>
    我的第一个html页面
    </body>
</html>

以上是HTML的一个基本框架。

尖括号中表示这是一个HTML的标记。
<head>表示这是源文件的头，放置此源页面相关配置，例如编码格式。
<body>是显示的正文
<!DOCTYPE html>是表示页面支持html5的规范

标记

最新的H5规范，HTML标记用来告诉浏览器，此标记是什么，而不是告诉浏览器这个该怎么显示。该怎么显示由CSS样式层叠表来管理。例如html中的段落标记和标题标记等，提供了整个页面的逻辑结构。避免设计上的冗余。应该记住几个最基本的标记。

1
2
3

<p></p> 段落 paragraph
<br> 换行 break
<h1></h1> 标题 header

字体样式

虽然由CSS来进行样式管理，但是仍然存在用来表达格式的HTML语法。当然，也可以理解为这是一种类型，意为加粗的文字。

<b></b>
<i></i>
<tt></tt>等宽的西文字体
<del></del>中横线，本质上是被删掉的字符
<ins></ins>下划线，本质上是增加的字符，具体的显示都由浏览器表示
<s></s>不推荐的，过时的
<sup></sup>上标
<sub></sub>下标 公式最好还是用其他软件做好，作为图片嵌入
<mark></mark>强调，表现为高亮

短语样式

html5引入了一些短语格式，用来表示文字的意义。这些都是短语样式，所以不会引起分行。

<em>强调</em>
<strong>着重</strong>
<cite>引用</cite>
<code>代码</code>
<kbd>用户输入</kbd>
<samp>示例代码</samp>
<var>变量</var>
<dfn>定义</dfn>

特殊格式

有一些特殊的格式，也比较常用，可以记住

<address></address> 地址
<blockquote></blockquote>缩进
<q></q> 小引用，一般表现为加一个小引号
<pre></pre> 预格式化，原样输出,保留换行和空格

<code>
<pre>
int main(){
	printf("Hello\n");
	return 0;
}
</pre>
</code>

属性

对于各个标记，都可以添加属性。属性值之前是必须要加双引号，但是现在不必加。不过我看了一下各个页面，基本上大家都还是加上了的。

1
2

<hr width=50% align=left size=10> 分割线，显示的效果靠左，50%页面，线的宽度为10 
<abbr title="中华人民共和国">PRC</abbr> 缩写 鼠标放在PRC上时，会出现提示。title这个属性各个标记都有。

转义字符

常用的转义字符，以下四个可以记住。

&lt; 小于号
&gt; 大于号
&amp; and符号
&nbsp; 不可打断的空格

列表

三种列表在HTML中的使用。

<ul> 
    <li>Mirror</li>
    <li>sFlow</li>
    <li>Security</li>
</ul> 无序列表
<ol start=2>
    <li>Mirror</li>
    <li>sFlow</li>
    <li>Security</li>
</ol> 有序列表
<dl>
    <dt>Mirror</dt>
    <dd>端口镜像</dd>
    <dt>sFlow</dt>
    <dd>端口采样</dd>
    <dt>Security</dt>
    <dd>安全</dd>
</dl> 定义列表，类似字典

图片

图片一般支持三种格式，png,jpg,gif。
对于浏览器来说，img标记就是一个字符，我们不加其他的样式指定，则会与其他字符并排在一起。
如果指定了图片大小，那么浏览器在图片尚未加载完成的时候会预先留出图片的位置。
在图片较大，alt属性会在图片尚未加载完成的时候，显示在对应的位置。

1 2	<img src="example.gif" alt="hint" height="500" width="500"> <iframe src="www.baidu.com"></iframe> 内联框架，可以直接嵌入一个网页。

链接

链接是最常用的HTML标记。其中的属性href，一定要把协议http://加上，否则浏览器会认为是当前路劲下的一个文件。属性target=”_blank”，表示在新的页面打开。

1	<a href="http://www.baidu.com">我是一个链接</a>

可以使用ID和#进行页面内具体某个标记位置的精确定位。

1 2	<a href="#page_end">导航到页面尾部</a> <p id="page_end"></p>

表格

基础的表格使用，记住三个元素，表格table，行tr，列td

<table>
    <tr>
        <td>Mirror</td>
        <td>200</td>
        <td>Tianshan</td>
    </tr>
    <tr>
        <td>sFlow</td>
        <td>100</td>
        <td>Tianshan</td>
    </tr>
</table>

这样显示出来没有格式。可以加一点格式，boder是表格的线宽，th是表头，caption是表格的标题。td可以使用colspan来占据一行.

<table border="1">
    <caption>我是表格的标题</caption>
    
    <tr>
    	<th>Module</th>
        <th>Case</th>
        <th>PIC</th>
    </tr>
    <tr>
        <td>Mirror</td>
        <td>200</td>
        <td>Tianshan</td>
    </tr>
    <tr>
        <td>sFlow</td>
        <td>100</td>
        <td>Tianshan</td>
    </tr>
    <tr>
        <td colspan="3">DTEL</td>
    </tr>
</table>

H5增加了thead，tbody，tfoot三个标记，当表格过长的时候，上下滑动，表头和表尾可以不消失。

<table border="1">
    <caption>我是表格的标题</caption>
    <thead>
        <tr>
            <th>Module</th>
            <th>Case</th>
            <th>PIC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mirror</td>
            <td>200</td>
            <td>Tianshan</td>
        </tr>
        <tr>
            <td>sFlow</td>
            <td>100</td>
            <td>Tianshan</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">DTEL</td>
        </tr>
    </tfoot>
</table>

总结

根据浙江大学翁恺老师的HTML教程学习的学习笔记。我是在MOOC上学到的C语言翁恺老师教程。他讲的很清楚，也很实用。

我明白了以下知识点：

HTML负责标记和组织页面上的内容是什么，如何显示由CSS决定
HTML基本框架结构
HTML标记，标记的属性
记住了常用的HTML标记