前言：
前段时间刚学完HTML和CSS，主要方式是通过看视频加自己练手，但是学完总感觉不太熟练。正好现在也空下来了，于是就又买来一本书系统的慢慢复习一遍，就用这篇文章来记录我的复习吧
一.基本的认识：
1.什么是HTML及浏览器如何确定显示HTML?
HTML是超文本标记语言（Hyper Text Markup Language）的缩写。正如其名，HTML就是提供了一种用标记“标示”文本的方法，当然HTML也有另外一个方面,就是“超文本”的,超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本,换句话说超文本就是网页上链接到其他页面的链接。HTML会告诉浏览器相应的版块该放到什么地方，有了这些信息，浏览器会按照内置的默认规则显示各个元素
2.什么是CSS？
CSS是层叠样式表（Cascading Style Sheets）的缩写。CSS提供一种方法来告诉浏览器页面中的元素该如何显示，用来控制HTML的表现。CSS让我们的HTML更加漂亮美观。
3.我的第一个HTML:
<!--
描述：html5必写，h4不用写
-->
<!DOCTYPE html>
<!--
这是注释
html不区分大小写，语法比较松散
-->
<html>
<meta charset="{CHARSET}">
<!--
网页标题
-->
<head>
<title>我的第一个HTML</title>
</head>
<!--
描述：主体
-->
<body>
网页主体部分
hello world！！！
</body>
</html>二.HTML的常用标签
- <p></p>一个段落
- <q></q>引用
- <blockquote></blockquote>长引用
- <h数字></h数字> 标题字。数字可以为 1~7，字体大小依次减小
- <br> 换行标记
- <hr color=red width=50%> 横线，可以设置颜色和宽度
- <pre></pre>预留格式
- 字体：<del></del>删除字 <ins></ins>插入字
- <b></b>粗体字
- <i></i>斜体字
- <sup></sup>出现在右上角，10的二次方
- <sub></sup>出现在右下角
- <font></font>字体标签，可以设置颜色和大小color和size
- 实体符号：
- <；代表实体符号<
- >代表>
-  代表一个空格
- 表格：
<table>
</table>
<!--
描述：设置表格的分割线的厚度宽度高度（可以为像素或者百分比)，
-->
<table border="2px" width="300px" height="300px">
<!--
描述：align对齐方式
-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td align="center">i</td>
</tr>
</table>
<!--
三行三列的表格
-->- 图片：<img\>
<img src="img/bd_logo.416.png" width="100px" title="我是一张图片" alt="图片找不到了“/>
<!--
src为图片的相对路径,width为宽，title为鼠标悬停时显示的信息，alt为图片加载错误显示的信息
-->-
超链接 热链接：
<a> </a>
-
<a href="http://www.baidu.com/">百度</a> <!-- href为链接指向的路径，此处为指向百度的绝对路径. --> <a href="http://www.baidu.com/" target="_self> <img src="../image/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"width="100px/> </a> <!-- 这是一个图片超链接，图片超链接,可以设置图片大小 target可取值_self（默认）:在当前窗口 _blank:新窗口 _top:顶级窗口 _parent:父窗口 -->
列表： 无序：<ul> </ul> 有序：<ol></ol>
<!--
描述：有序列表，可以设置type
-->
<ol>
<li>水果</li>
<li>蔬菜</li>
<ol type="a">
<li>花菜</li>
</ol>
</ol><!--
描述：无序列表，可以设置type
-->
<ul type="circle">
<li>十点</li>
<ul>
<li>呵呵</li>
</ul>
</ul>- 表单：<form> </form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个HTML</title>
</head>
<body>
<!--
描述：可以设置type
-->
<form action="https://www.baidu.com" method="post">
<!--
描述：提交方法为gets不安全会显示，post不会，默认为gets，超链接也会提交数据
-->
<table>
<tr>
<td>用户名</td>
<td><input type="text"/></td>
</tr>
<td>密码</td>
<td><input type="password"/></td>
</table>
性别:</td>
男<input type="radio"name="sex" value="1" checked>
女<input type="radio" name="sex" value="0">
<br />
<!--
描述：radio为选项，name相同的类型只能选一个,单选的value必须要手动添加
代表它传给服务器的值,cheked表示默认选的对象
-->
兴趣爱好:<input type="checkbox" name="hobby"/>农
<input type="checkbox" name="hobby"/>撸
<input type="checkbox" name="hobby"/>原
<!--
描述：value 同上，checkbox表示标签选择，其他同上
-->
<br />
学历<select multiple ="multiple" size="2">
<option value="gz">高中</option>
<option value="xx">小学</option>
<option value="cz">初中</option>
</select>
<!--
描述：select 下拉菜单挑选，option 挑选对象，其他同上 默认selected，如果想要支持多选
multiple ="multiple"选的时候要ctrl ,size="2"表示可以看到的表签数目
-->
<br>
你的自我介绍视频
<input type="file" />
<!--
描述：可以上传文件
-->
<br />
描述一下你自己
<br>
<textarea rows="10" cols="50"></textarea>
<!--
描述：textarea文本域，row and cols分别为长宽，没有value属性，用户填写的就是value
-->
<br />
<input type="hidden" name="userid" value="11" />
<!--
描述：隐藏域，网页上看不到，但会把value传送给服务器
-->
<tr align="center">
<td colspan="2"><input type="submit" value="登录" />
<input type="reset" value="清空"/>
</form>
<!--
描述：input控键：
可以在后面加上readonly和disabled都是只读不能修改，前者能提交给服务器，后者不能
maxlength设置最大可输入的字数
希望提交到服务器+name
-->
</a>
</body>
</html>
- div 和span:
被称为：图层
用来布局，就是一个一个的盒子，来回嵌套，订下x轴和y轴坐标即可
默认情况下div独占一行，span不会独占一行
其他更多标签没讲清楚的属性可以自己翻阅HTML的参考手册：
三.其他：
- .. 表示父文件夹
- 记住要用/来分割路径中的各个部分
- 相对路径是先对于链接的源码指向其他文件的一个链接。相当于地图上的终点相对于起点
- <p>,<ol>等为块元素，它们单独显示内容前后都有换行，<q>,<em>等为内联元素需要和包含元素的其他内容放在一起
- void元素只有一个标记，如<br>，且void元素没有内容，另外如果你要用实体的"&"需要输入&代替
- 很多标签可以嵌套，如<ol><li>
8019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
