HTML Basics 🐣
2020-04-06
HTML和CSS是最基本的网页构成元素。HTML负责记述网页结构和内容，CSS负责记述这些内容的排版，字体，及风格等。
HTML原子的基本结构
HTML的构成原子，是一个一个的tag语句。这些语句的基本构成元素是：
起始tag
结束tag（有些tag是不需要结束的，比如<img>，<br>，这种叫做self-closing）
内容
属性（optional）
<!-- 以下是一个简单的p元素 -->
<!-- class是这个tag的一个属性;实用中class常被用来分组各种元素 -->
<p class="article"> Be real. </p>
<!-- 比如在CSS中可以这样抓取同为article组的元素 -->
.article{
font-size : 16px;
}
所谓的属性(attribute)也就是上面例子中的class,或者经常会用到的id, style = "..."之类，主要是用于给tag做区分，便于CSS和Javascript抓取。
注意属性在起始tag之内，与tag名用空格隔开，属性的值最好用引号包括起来。常用的属性有以下这些：
id: 元素的ID，一般ID是特殊的，不会有相同ID的两个元素
class: 表示元素的组别，同一个组别可以有多个元素。比如我可以给一个div元素一个container的class，然后在CSS中抓取这个class来做格式化。
href: 也就是URL地址，是链接<a>必须要有的属性。
src: 表示文件的地址，是<img>必须要有的属性。
HTML网页的Boilerplate
Boilerplate就是一个基础模板，在很多现代编辑器中都有很便捷的快捷键对应。比如在Visual studio code里，只要在一个空白的html文件中键入!并键盘输入Tab，就会返回如下的模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.开头的DOCTYPE是告诉浏览器html版本的声明，在过去有很多版本林立的时候，需要写HTML VER 4.0之类复杂的声明，但是HTML5以后这一切都被简化，
现在只需要写html即可，默认是HTML5.
2.<head>中存放的是一些关于网页的管理信息，比如网页的标题，CSS文件和Javascript文件的位置等
3.<meta>中的charset是一个重要的设定，决定了文件的编码格式。现在绝绝大多数网页都采用了UTF-8编码，可以对应基本所有的
人类语言。在一些比较旧的日语或者中文网页偶尔会发现浏览器乱码，原因就是网页采用了比较旧的编码格式，那些编码对应到UTF-8就是一些
奇怪的符号，所以就产生了文字化け。另外，UTF-8还包括了很多emoji，比如本页的标题:)
4.其他还有一些meta标签，比如description，keyword之类，也是帮助浏览器认识网页用的，Google会利用这些标签来帮助其搜索内容。
一些基础的Tag
这里插一条VS Code的小技巧：由于在html网页编辑过程中，不能直接使用<符号，会被认为是标签而不显示，因此必须用特殊转义符号
<，这样拷贝来的html代码要一个一个手动换成lt就会非常麻烦，这个时候可以使用replace功能。我所用的Emacs风格keybinding
中，替换的快捷键是M-%。
<h3>Heading</h3>
<p>Paragraph</p>
<!-- img图片是不需要closing tag的-->
<img src="../path/to/image">
<!-- href是链接到的地址 -->
<a href="link/to/website">Link text</a>
<hr> <!--Horizontal line-->
<strong> Bold text </strong>
<em> Italic text </em>
<!-- Unordered list-->
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<!-- Ordered list-->
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
My test page
My main title
My top level heading
My subheading
My sub-subheading
```
#### 2. 段落
```html
"When someone seeks," said Siddhartha, "then it easily happens that his eyes see only the thing that he seeks,
and he is able to find nothing, to take in nothing because he always thinks only about the thing he is seeking,
because he has one goal, because he is obsessed with his goal.
Seeking means: having a goal. But finding means: being free, being open, having no goal."
― Herman Hesse, Siddhartha
```
#### 3. 列表
无序列表ul，有序列表ol，列表条目li。
```html
Data structure
Algorithm
Operating system
```
#### 4. 链接
在a tag的属性中添加href属性，注意链接地址最好包含http://。
```html
New Game!!
```
### 4. Table的写法
Table即是表格，用来显示格式化的数据。这里值得一提的是，曾经有用Table来进行HTML页面规划的方法，但是这种方法缺乏柔软性，且在写HTML时需要引入大量的Table Tag，修改起来也很麻烦。更为现代的方法是使用CSS来处理页面的空间设计，用表格进行规划的方法已经过时且应尽量被避免。
所有的表格内容都用table tag包括起来，其中每一行用tr(table row），每个元素用td（table data）表示。
```html
Breed
Jack Russell
Poodle
Streetdog
Cocker Spaniel
Eating Habits
Eats everyone's leftovers
Nibbles at food
Hearty eater
Will eat till he explodes
```
### 5. Form的写法
与上述的HTML元素不同，Form的目的是由用户向服务器方发送信息。其方式可以多种多样，比如文本输入区域，下拉列表，选择按钮等。
## :koala:CSS Basics
CSS与HTML一样并不是编程语言，而是一种用来进行对网页格式和风格进行管理的语言。CSS的基本工作原理就是对HTML中的元素进行指定性地定制。比如，将HTML中所有的p元素（段落）变成红色的CSS写法是
```css
p {
color: red;
}
```
可以观察到这种语法多少有点类似于c，每个元素用{}包括，每个语句都用；进行断句。
利用CSS时，需要将CSS代码保存到文件中，并在HTML的head中进行如下的指定。
```html
```
### 2. HTML文件整体结构
1. !DOCTYPE html ： 一个默认的文件头，告诉浏览器这是html。
2. html : 包括整个文件的内容。
3. head : 文件的编码，网页在浏览器中显示的标题。
4. body : 网页的内容。
head和body是平行处于html之下的。
```html