12.13html框架
<! DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset=“GB2312、BIG5”>
<title>
</title>
</head>
<body>
你好吗
</body>
</html>
关于字符集，<meta charset=“UTF-8”>
即解析，存储，若翻译“你好吗”，charset要变成GB2312（简体中文），或BIG5（繁体中文）
或通用（GBK）但UTF-8基本所有语言都包含
14~.html标签的语义化
目的：使结构更加有序，看着清晰。
1，排版标签
标题标签（<h3>文本文档</h3>）
段落标签（<p>段落</p>）
水平线标签（<hr/ >）单身狗标签，即分界线，放在文本下面；
换行标签（<br />）放在话与话之间达到强制换行的效果
div和span标签（<div></div>一行只有一个，<span></span>一行可有好几个并排的产品）
2，文本格式化标签
字体加粗（<b></b>或<strong></strong>，多数情况用strong，有强调语意的效果）
字体倾斜（<i></i>或<em></em>，多数情况用em）
删除线（<s></s>或<del></del>,多睡情况下用del）
下划线（<u></u>或<ins></ins>,所属情况下用ins）
3，图像标签img(重点)
<img 属性1 属性2 。。。 />每个属性之间要有空格。
URL:是显示图片的，放在body那里，<img src=“ 图像URL” />
alt:如果图片不能正常显示，用讲解图片的文字去代替图片；如图
上一个是alt，这个是title，
<h4> 带有title提示文本：鼠标放在图片上，显示的文字</h4>
<img src=“timg.gif(图片文件名)” title=“胡歌还在吹笛子等霍建华” />
修改图片大小（宽度：width；高度：height，）一般只写一个，图片会等比例缩放
<img src=“timg.gif” title="。。。"width="600" />
给图片加上边框
<img src=“timg.gif” title="。。。" width="600" border=“10” />,以后会讲到改变颜色
4，链接
英文缩写，锚：anchor (<a> </a>)
外部链接
<a href=“http://www.baidu.com”>百度一下</a>
内部链接
<a href="demo.html"> 点开链接处的的名称</a>
(demo.html:这里只是链接文件名）
空链接
<a href="#" > 点链接处的名称</a>
把图像变成链接
<a href="http://www.baidu.com"><img src="图像文件" /></a>
有一个很重要的点
之前的链接都是点击后直接覆盖当前页面，所以现在用_blank打开一个新页面
<a href=“http://www.baidu.com” target="_blank">百度一下</a>像这样
5，注释标签
添加注释（在代码中体现，方便看，不出现在浏览器中）
<!--注释内容-->
快捷方式：Ctrl+/这两个键
6,路径
第一层通常是目录文件夹，然后根目录
相对路径，
| 路径分类 | 符号 | 说明 |
| 同一级路径 | 只需输入图像文件的名称即可，如<img src="baidu.gif" />。 | |
| 下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如<img src="data:images/baidu.gif" />。 |
| 上一级路径 | “../” | 在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推， 如<img src="../baidu.gif" />。 |
- 同一级路径：图片引用的时候，直接写图片的名字
下一级路径：直接在文件夹中再建一个文件夹
有两个斜杠杠
3，上一级路径（需要有../）
demo.html先从上一级里出来到html里，然后运用下一级路径的方法弄到images里，再找到图片。
如果有两级，则需要../../,两层，以此类推。
绝对路径
绝对路径用的较少，我们理解下就可以了。 但是要注意，它的写法 特别是符号 \ 并不是 相对路径的 /
DAY2
目的：学习表格表单和列表
表格
- 创建表格
表格主要是为了展示数据
创建：用table创建方格，用tr代表行，用td代表一行上的单元格
<table> 这里是表格内容</table>这里显示的就只是一个四方框框
<table>
<tr>缩进一个tab距离
<td>姓名</td>
<td>年龄</td>
<td>性别</td>再缩进一个tab距离，这里一行上的单元格（为了好看）
</tr>
</table>
2.表格属性
主要是在头头那儿添加属性，就是<table>后面
属性有常见的border（设置边框），width，height，还有align（设置和浏览器页面左对齐left，右对齐right，中间对齐center），还有十分重要的cellspacing(单元格与单元格之间的边框),cellpadding（单元格内容与单元格边框之间的距离）
<table border="2" width="500" height="200" align="center" >
3.表头单元格标签
想要让表头的字体居中加粗，只需要将之前表头两边的<td></td>改为<th></th>
4，表格标题
在<table>和<hr>之间，且与hr对齐那里，写上<caption>表格标题</caption>。
合并单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
三部曲
- 确定是跨行合并还是跨列合并
根据先上到下，先左后右的顺序，找到相应的起始位置，然后输入格式和个数：
(如：跨行：<td rowspan="2">照片</td> 跨列：<td colspan="3">个人简历</td>)
拓展：表格划分结构（浏览器右击 检查）
列表
列表是为了让布局整齐，整洁，好看的，自由。
#无序列表（重点）
格式：(要ul li 二者搭配)每一个点点后面的东西都是并列的，没有排名
<ul>(ul里面只能包含li，像什么<p></p>等都是不能写在里面的)
<li>这里啥都能放，之前的图片格式链接啥的</li>
</ul>
效果图：
#有序列表（类似于排名什么的）（了解）
格式：
<ol>
<li>都OK</li>
</ol>
与无序列表不同于：最后浏览器显示的是1,2,3,4这类排名
#自定义列表
格式：
<dl>
<dt>北京</dt>
<dd>东城区</dd>......
</dl>
表单标签
input用法：制剂室在<body></body>之间输入文本框前面要闻，然后输入type="text".
关于文本框：
<body> <--文本框--> 用户名：<input type="text" value="请输入用户名"> <--密码框--> 密码：<input type="password" value="请输入密码"> </body>
比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
name表单 <--文本框--> 用户名：<input type="text" name="username" value="请输入用户名" /> 昵称：<input type="text" name="nicheng" value="请输入用户名" />
的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
如果想要文本框里一开始就有默认值，用value;
name属性后面的值，是我们自己定义的。
关于单选框和复选框
单选框：
性别：男<input type="radio" name="sex" /> 女<input type="radio" name="sex" />
复选框：
爱好： 唱歌<input type="checkbox" name="hobby"/> 阅读<input type="checkbox" name="hobby"/> 小说<input type="checkbox" name="hobby"/> 旅游<input type="checkbox" name="hobby"/>
如果想要把一些按钮或选项提前设置好，需要在一些属性后面添加（checked="checked"）
还有几个按钮的格式，如上图，其中提交项只需（<input type="submit" />）,就会自动显示提交二字，但要是想更改名字，自行添加value...就OK。
label表单：
textarea文本域（像QQ空间留言之类可容量很多字）
<textarea>.....</textarea>
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
select下拉列表（供选择）
籍贯 <select> <option>北京</option> <option>天津</option> <option>山东</option> <option>江苏</option> </select>
如果想要一开始就固定一个选择项就
<option selected="selected" >北京</option>
加个东西
但大多数时候不用这个select，有缺点，不好看。
form表单域
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
格式如上；
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
