Resource
HTML
freecodecamp
System structure
B/S: Browser/Server
what languages do the Browser support?
Ans: HYML, CSS, JavaScript
what languages do the Server support?
Ans: Java, Python, C, C++
what advantages and disadvantages does the B/S strcuture?
Adv: easy to upgrade–just upgrade the codes in Server, Low maintenance cost
Disadv: low speed, bad experience, not cool
C/S: Client/Server
what advantages and disadvantages does the C/S strcuture?
Adv: high speed, good experience, cool interface
Disadv: difficule to upgrade, high maintenance cost
many systems for entertainment use C/S structure
我的个人理解：
所有用浏览器打开的程序都是B/S结构。
而需要单独下载到手机里进行安装的程序，比如王者荣耀，比如微博等，还有需要安装在特殊机器上的程序，比如银行办卡的机器，ATM机等，都是C/S结构。
浏览器内核
Web标准的构成
The most popular browsers(Top 5)
IE, Edge, Opera, Safari, Chrome, Firefox
常用的编程工具
- Sublime
- WebStorm
- Hbuilder
- Visual Studio Code【推荐】
- DreamWeaver
what’s the HTML?
HTML is a markup language that uses a special syntax【语法】 or notation【符号】 to describe the structure of a webpage to the browser.
HTML elements usually have opening and closing tags that surround and give meaning to content. For example, different elements can describe text as a heading, paragraph, or list item.
Hyper Text: not just text, it contains such as flow media, pictures, videos, audios and etc.
We can use simple text editor to write HTML documents, and the File extension is .html or .htm. In most cases, the professionals prefer to use sophisticated text editor to code, such as VScode and Sublime.
It’s easy to run HTML code, just open it in your browsers such as Google Chrome.
The W3C set the stardard of HTML. Each manufacturers of Browser will obey it.
W3Cschool 和W3C没有关系，是中国人搭建的，且为中国程序员提供方便的一个社区。
Web 标准是W3C组织和其它的标准化组织制定的一系列标准的集合。
相对路径和绝对路径
相对路径："…/img.jpg"
绝对路径：以盘符开始的文件路径"D:\log.gif" 或者，网络地址"http://www.baidu.com/img.jpg"
我已经弄清楚了，不再赘述，值得注意的是两者斜线的方向。
图片来源于B站pink老师
VScode小技巧:
复制过来的文字过长怎么办？——查看菜单：自动换行。
HTML的基本标签
<!--这是注释
html 不区分大小写，语法松散不严格 -->
<!doctype html>文档类型声明标签，不是HTML标签，作用是告诉浏览器用哪种html来显示网页
<html lang="en">告诉浏览器此网页的内容是什么语言，en表示英语，zh-CN表示中文
<head>
<meta charset="UTF-8">设置字符集，UTF-8被称为『万国码』基本包含了所有国家的字符
<title>title</title>
</head>
<body>
<h1>标题6级选</h1>标题
<h2>加粗一行显</h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!-- 段落标签中的文字会根据浏览器窗口的大小自动换行。
段落与段落之间自动会有空隙。-->
<p></p>段落标签
<br>单标签，强制换行，只是新开一行，并不会有段落之间的空隙
<hr>横线
<hr width="50%" color="red">属性
<pre></pre>预留格式
<strong></strong>加粗,推荐
<b></b>加粗
<em></em>倾斜,推荐
<i></i>
<del></del>删除线,推荐
<s></s>删除线
<ins></ins>下划线,推荐
<u></u>下划线
<!--这是注释
盒子标签，没有语义-->
<div></div>单独占一行
<span></span>在一行上可以放多个span
</body>
</html>
图像标签, 单标签
<img src="URL" />src是图像的必须属性，指定路径和文件名
除此之外，还有alt【替换文本】，title【鼠标放上去的提示文字】，
width,height【设置图片宽高】，在开发中宽高选择一个修改即可，另一个会等比例进行缩放。
border【设置图像的边框】
属性之间没先后顺序，彼此间隔一个空格，采用key="value"格式
<!--这是注释
超链接标签-->
<a href="URL" target="目标窗口的弹出方式"></a>
target="_self当前窗口 _blank新窗口"
内部链接：跳转到网站内的其它页面
外部链接：跳转到其它网站
空链接：href="#"
下载链接：href="压缩包或者文件地址"
网页元素链接: 图片，视频，音频，表格等
锚点链接：跳转到页面内某个位置，href="#name", 目标位置添加属性：id="name"
特殊字符
空格
大于 >
小于 <
其余的需要用到请自行查询
表格标签
表格标签是用来展示数据，不是用于布局的,tr:table row; td:table data;th:table head表头单元格，加粗居中显示;
表格结构：thead, tbody
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
表格属性：
【对齐方式】align: left/right/center
【表格边框】border: 1px;
【内容和边框之间的空白距离】cellpadding: 1px;
【单元格之间的空隙】cellspacing: 2px;【默认是2px】
合并单元格：
跨行：rowspan="合并单元格的个数"
跨列：colspan="合并单元格的个数"
跨行合并：把代码写在上面那个单元格里
跨列合并：把代码写在左边那个单元格里
合并完成后，删除多余单元格
理解table跨行和跨列的写法：
图片来源于B站pink老师
列表标签
列表用来布局，分为：无序列表，有序列表，自定义列表
无序列表：
<ul>中只能出现<li>标签，但是<li>标签相当于小盒子，可以放其它任何标签
<ul>
<li></li>
</ul>
有序列表：
<ol>中只能出现<li>标签，但是<li>标签相当于小盒子，可以放其它任何标签
<ol>
<li></li>
</ol>
自定义列表：对名词或术语进行解释，没有项目符号
<dl>中只有<dt><dd>标签，<dt><dd>是大哥和小弟的关系，非嵌套
<dl>
<dt>关注我</dt>
<dd>微信</dd>
<dd>QQ群</dd>
<dd>微博</dd>
</dl>
表单标签
使用表单的目的是为了收集用户信息
一个完整的表单有3部分：表单域，表单元素，提示信息
表单域：
<form>元素会把范围内的表单元素的信息提交给服务器
常用属性
<form action="" method="" name=""></form>
action:服务器的url地址
method:get/post，提交方式
name:表单的名字，和其它表单区别
表单元素
<input type="" />单标签
type属性有很多可选的值:
button, 不提交数据，常和JS搭配使用；file,上传某个文件； hidden等。其中submit，提交表单；reset，重置表单内容；
其它属性：
name给表单取名，其中单选框必须name一样，才可以实现多选一
value：表单中的提示值
注意要点：name, value主要是给后台人员使用的
单选框和复选框的name要一致
checked="checked"默认被选中，主要针对单选框和复选框
maxlength:最大长度
<!--这是注释
label标签-->
label可以绑定一个input标签，这样，点击label标签时，光标会自动转到绑定的input元素上，增加用户体验
<label for="male>男</label>
<input type="radio" name="gender" id="male">
label标签的for属性的值要和input中id属性的值一致
<!--这是注释
select标签，下拉列表-->
select标签也应包含在form标签里
<select>
<option select="selected"></option>
<option></option>
<option></option>
</select>
<!--这是注释
textarea，文本域标签，输入多行文字-->
textarea标签也应包含在form标签里，cols,rows只做了解，开发时使用CSS来设置
<textarea cols=50 rows=5></textarea>
