要开始做数据库大作业了，要学一些前端相对的知识，打算用vue，先学一下html和css. 关于html，从html出发，到html5
html learning
html依靠标签(markup tag)来描述网页，其本质为标记语言(markup language)
markup tag
也成为 HTML tag,是由<>包围的关键词，如<html>, 一般是成对出现，如<html></html>，分别为开始标签和结束标签。
HTML document
其就是网页， Web浏览器就是读取HTML document来显示网页，不显示其中的tag，会依靠tag来解释页面的内容
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<!--表示框架协议，声明使用html文档--->
<meta charset="UTF-8">
<!--部分浏览器中中文乱码，需要声明GBK or UTF-8----->
<html>
<body>
<h1> 标题 </h1>
<p> 段落 </p>
</body>
</html>
效果如下：
<html>与</html>之间的文本描述网页<body>与</body>之间的文本是可见的页面内容<h1>与</h1>之间的文本被显示为标题<p>与</p>之间的文本被显示为段落
基本元素
其中开始标签称为opening tag，结束标签为closing tag 以前的html忘了结束标签不影响HTML的正确显示，但html5不允许省略结束标签。
标题
通过<h1>-<h6>来声明不同等级的标题
其中<hr />可以用作分隔符
它有着有关格式对齐的相关的属性，但并不建议用，应该用样式来取代
段落
利用<p> & </p> 来框出一定的段落。
浏览器一般会在段落的前后添加空行，且不要用<p></p>来插入空行，用下文说的空元素
链接
依靠<a>进行定义
格式如下：
1
2
<a href = website_link> text content</a>
,<a href="https://logiclee0902.github.io/">my website</a>
href 为属性，后续会细说
图像
<img>标签，不需要结束标签，<img />表示开始结束
1
<img src="dir or img link" width=a, height=b />
空元素
无内容的html元素，在opening tag中关闭，如<br>（换行标签），但正如前文所说html5中所有标签都需要关闭，因此后续中一般标为<br/>，此外它还有一个用处就时在不产生新段落的情况下换行。但是， <br>一般不会用来分割段落
1
2
3
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
注释
格式如下
1
<!-- comment -->
属性
标签的相关特性，提供更多有效信息，总是以键值对的形式出现name = "value"，在开始标签中规定，如上文的href, img， 给更多的属性在后续介绍具体属性时会说明。
value必须在引号中（单双都行），如果其中的值需要用双引号，则最外层用单引号
此外，除了一些个性化的属性之外，还有些几乎所有元素都有的属性，被称为标准属性。
| 属性 | 描述 |
|---|---|
| accesskey | 规定激活元素的快捷键 |
| class | 元素的类名（引用样式表中的类） |
| contenteditable ~ | 规定内容是否可以编辑 |
| contextmenu ~ | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| dir | 规定元素中内容的文本方向。 |
| draggable ~ | 规定元素是否可拖动。 |
| dropzone ~ | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
| hidden ~ | 规定元素仍未或不再相关。 |
| id | 规定元素的唯一 id。 |
| lang | 规定元素内容的语言。 |
| spellcheck ~ | 规定是否对元素进行拼写和语法检查。 |
| style | 规定元素的行内 CSS 样式。 |
| tabindex | 规定元素的 tab 键次序。 |
| title | 规定有关元素的额外信息。 |
| translate ~ | 规定是否应该翻译元素内容。 |
~ 代表html5新增
样式
即为HTML中的style属性，其是可以改变所有HTML元素的样式的通用方法，为HTML4引入的。其除了可以直接将样式添加到HTML元素当中，也可以间接地在独立的样式表中（CSS文件）进行定义。
避免使用的标签和数学
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确：请避免使用这些被废弃的标签和属性！
应该避免使用下面这些标签和属性：
标签| 描述|
—-|——|
<center> | 定义居中的内容。
<font> 和 <basefont>|定义 HTML 字体。
<s> 和 <strike>| 定义删除线文本
<u>| 定义下划线文本|
| 属性 | 描述 |
|---|---|
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
要用样式来代替这些标签和属性，可以使用 CSS。
常用设置的实例
style中的多个属性利用;隔开
对于背景色的设置
利用background-color属性，其值为颜色的名称或者十六进制值
1
2
3
4
5
6
<html>
<body style="background-color:cyan">
<h2 style="background-color:#B03060">This is a heading</h2>
<p style="background-color:lightgreen">This is a paragraph.</p>
</body>
</html>
对于字体的设置
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。同样color可以用16进制表示
1
2
3
4
5
6
<html>
<body>
<h1 style="font-family:times;color:#8B5F65">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
文本对齐
利用text-align属性，其值为left、right、center
1
2
3
4
5
6
7
8
9
10
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>上面的标题相对于页面居中对齐。</p>
<h2 style="text-align:left">This is a heading</h1>
<p>上面的标题相对于页面左对齐。</p>
<h3 style="text-align:right">This is a heading</h1>
<p>上面的标题相对于页面右对齐。</p>
</body>
</html>
文本格式化
对文本进行一些格式化，如加粗、斜体、下划线等
有以下属性可以用来格式化文本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
<br/>
This text contains
<del>deletion</del>
<br/>
This text contains
<ins>insert</ins>
</body>
</html>
预格式文本
利用标签<pre>
计算机输出标签
常用来显示编程代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>
地址
<address>表示地址属性,里面可以继续嵌套
缩写和首字母缩写
就是将鼠标放到缩写的字母上,会有一个框补充完整
缩写是<abbr title="Complete Word">abbreviation</abbr>, 首字母缩写是<acronym title="complete">acronym</acronym>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
此外有个功能类似的定义<dfn>，其鼠标放上去也有效果，其也可以看作一种缩写
1
2
3
<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
引用
<blockquote>长引用, <q>短引用, 使用 blockquote 元素的话，浏览器会插入换行和外边距, 使用q只会在引用的文字加个引号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<body>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
Look at this。
</q>
</body>
</html>
###
文字方向控制
支持 bi-directional override (bdo)的浏览器，可以控制文字从左到右输出还是从右到左输出
1
2
3
4
5
6
7
8
9
10
<html>
<body>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
有关颜色
如之前所说，颜色可以用名字也可以用16进制， 但注意：只有16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值
HTML CSS
在HTML4.0中，可以使用style属性来定义HTML元素的样式，但是这种方法不推荐使用，因为这种方法会使HTML和CSS混合在一起，使得HTML代码变得难以维护。因此也可以通过外联样式表的方式来定义HTML元素的样式。
样式表的使用
有三种方式插入样式表
外部样式表
外部样式表可以让你把样式写在一个单独的文件中，然后在HTML文档中通过<link>标签来引用它。
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性， 也就上文提到的style属性。样式属性可以包含任何 CSS 属性
