时间：2016年5月12日
今天我们开始学习的是HTML5的基础。首先我们要学习的web前端它的一个学习大纲如下：
其中web基础知识包括web与internet，web的工作原理，web的相关技术。
什么是web？
web：
web的工作原理：
web的浏览器：
web的相关技术包括了服务器端技术和客户端技术。
A.服务端技术
它运行于服务器端，大多提供了数据库访问的能力。
如：PHP写后台服务器端的 ,JSP java写的 ,ASP.
B.客户端技术
它运行于客户端，由浏览器来解释运行。如：HTML结构 ,CSS, 样式 JAVASCRIPT.逻辑行为
node.js不是js封装的，而是c++写的一个平台，支撑起一个浏览器
了解了web前端是什么了之后，我们进入今天的核心课程：什么是HTML5？
web是一个超文本文件的集合。超文本文件是你web的基本组成单元，也称之为网页或HTML文档，web页等。通常是以.html或者.htm为后缀的文件。web页之间通过超文本中的超级链接组织在一起。
那么，什么是HTML5？
HTML的标记语法：
用于描述功能的符号称为标记，如<p>、<h1>。
标记语法分为单标记和双标记，顾名思义，双标记就是成对出现的，有开始标签就有结束标签。
而单标记就是单身狗，一个人出现如<hr>、<br>.
在众多的单标签，双标签，块标签，行标签，他们各自的属性是一定得记牢，当然不用记忆熟练了更好。
在写网页代码的时候，我们首先得有一个大框架，如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个正规的html</title>
<meta charset="UTF-8">
</head>
<body text="red" bgcolor="gray" >
</body>
</html>
其中<html>和</html>构成框架。<head>和</head>之间的内容在网页中是不显示的。而真正鞥显示的是<body>、和</body>之间的内容。
标准属性
• 每个元素都有⾃自⼰己所特有的属性
• 有些属性是绝⼤大多数元素都⽀支持的属性，称为标准属性（或 通⽤用属性）
– id
– title
– class
– style
注意：标准属性，id是唯一标识符
注释
• 为代码添加适当的注释是⼀一种良好的编码习惯
• 注释只在编辑⽂文档情况下可⻅见，在浏览器展⽰示⻚页⾯面时并不会显⽰示
• 添加注释的语法如下：
– <!-- 注释的⽂文本内容 -->
•1、“<!--”和“-->”之间的任何内容都不会显⽰示在浏览器中
•2、注释不可以嵌套在其他注释中
•3、注释不可以位于嵌在 <>中
<!--注释部分-->
HTML 和 XHTML
• 1999年12⽉月24⽇日，W3C推荐标准HTML 4.01
• XHTML 于2000年的1⽉月26⽇日成为 W3C 标准 – 与 HTML 4.01 ⼏几乎相同
– 更严格更纯净的 HTML 版本
文本样式：
<b>粗体</b>文本
<i>斜体</i>文本
<u>下划线</u>文本
<s>删除线</s>文本
<sub>下标</sub>文本
<sup>上标</sup>
在本次课的末尾结束前，我们要了解的是文本
无论是文本标记的作用，还是文本域特殊字符，文本样式，标题元素<hn>，段落元素<p>，换行元素<br>，分区元素<span>和<div>,行内元素与块级元素，分割线元素，预格式化都给了详细的说明和值得注意的事项。
⾏行内元素与块级元素
• 块级元素 – 默认情况下，块级元素会独占⼀一⾏行，即元素前后都会⾃自动 换⾏行
– 如：<p>、<div>、<hn>
• ⾏行内元素 – 不会换⾏行，可以和其他⾏行内元素位于同⼀⾏行
– 如：<span>、<b>、<i>、<u>
总结：对于我自身来说，专业知识杂乱是我学习过程中的一大特点，也许在别人看来这是一种缺点。但是在学习这门课程的期间，并没有什么觉得是很难的，对我来说，简单的东西一点就通，学习起来的话都是比较轻松自在而且快速有效的。因此，这门课最大的收获就是我的以前三年全都是混过来的，所有的不认真和懒散从此刻开始都会被聚精会神代替，我相信任何一个人遇到喜欢的火星和感兴趣的东西都会在你的生活中成为你的精神食粮，那么，恭喜我的，我找到了。
时间：2016年5月13日
在昨天学习HTML的基础上拓展了知识点和一些必要相关的知识。首先，今天这次课一开始就讲了URL。在我广而杂的专业知识领域里我还是能搜索到这个相关的介绍说明的。那么，首先我们谈论的便是什么是URL。
统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。它最初是由蒂姆·伯纳斯·李发明用来作为万维网的地址。
基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
url第一部分
模式/协议（scheme）：它告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议（Hypertext Transfer Protocol，缩写为HTTP），这个协议可以用来访问网络。
其他协议如下：
http——超文本传输协议资源
ftp——文件传输协议
mailto——电子邮件地址
ldap——轻型目录访问协议
搜索
file——当地电脑或网上分享的文件
news——Usenet新闻组
gopher——Gopher协议
telnet——Telnet协议
url第二部分
文件所在的服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。路径部分包含等级结构的路径定义，一般来说不同部分之间以斜线（/）分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。
有时候，URL以斜杠“/”结尾，而没有给出文件名，在这种情况下，URL引用路径中最后一个目录中的默认文件（通常对应于主页），这个文件常常被称为 index.html 或 default.htm。
URL分类
URL绝对URL
绝对URL（absolute URL）显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关，
URL相对URL
相对URL（relative URL）以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录，那么这个文件的相对URL仅仅是文件名和扩展名，如果目标文件在当前目录的子目录中，那么它的相对URL是子目录名，后面是斜杠，然后是目标文件的文件名和扩展名。
如果要引用文件层次结构中更高层目录中的文件，那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠，从而引用当前文件所在的硬盘上的任何文件，
一般来说，对于同一服务器上的文件，应该总是使用相对URL，它们更容易输入，而且在将页面从本地系统转移到服务器上时更方便，只要每个文件的相对位置保持不变，链接就仍然是有效地。
除了URL查找文件位置或者当前文件所在的目录之外，图像和链接也是一个值得去了解的知识点。大多数人都会选择淘宝或者网上购物。在未来的十年发展也许说人都不用出门，所有人类需要的东西都可以在网站上购买，这是一个发展的必然趋势。于是，在网页中存在大量的图片和网页链接，无论是回到顶部还是链接到商家图片或者该商品的价格都是在网页中可以体现的。这也是学习HTML5的基础关键，比之先前的HTML5的第一课来说，基础二在前面的基础上加深了些，就如同刚进小学是1+1=2，随着年级的增加，我们学的就是方程或者高等数学了。
首先，我们来看看图像格式。
这三种是图片最基本的三种格式，jpg,gif,png.
如果我们想要将图片添加到页面的话我们可以这样写<img src='image/tupian.jpg".
其实无论是网页还图片都可用到链接。比如说我们从一个按钮链接到百度的话我们的网页代码可以这样写：
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
</head>
<body>
<a href=http://www.baidu.com>to baidu</a>
</body>
</html>
值得注意的是：<a>和</a>之间一定得有内容
在链接中值得注意的还有锚点。形如：
如上述图中。
锚点的用法。一定得注意的便是链接会锚点的时候锚点名字前面必须加上#。此时的链接就相当于网页当中的最底层或者某一个地方回到最顶部或者其他地方。
网页中除了图片链接之外，那当属表格了。大部分网页的表格做的还是挺不错的。那么，我们在第二课中还涉及到的知识点就是表格。表格的英文单词table，没错，在写代码的时候就是使用<table></table>实现表格。现在我们来看看它是如何实现的：
表格的常⽤用属性（续1）
• <tr>元素 – align，设置⽔水平对⻬齐⽅方式(left|center|right)
– valign，设置垂直对⻬齐⽅方式(top|middle|bottom)
• <td>元素
– align，设置⽔水平对⻬齐⽅方式(left|center|right)
– valign，设置垂直对⻬齐⽅方式(top|middle|bottom)
– width，设置宽度
– height，设置⾼高度
– colspan，设置单元格跨列
– rowspan，设置单元格跨⾏行
表格标题 <caption>
• 使⽤用 <caption> 元素为表格定义标题 – 默认情况下，标题将在表格上⽅方居中显⽰示
• <caption> 标签必须紧随 <table> 标签之后，且只能对每个表格定义⼀一个标题
对，如上图所示，我们首先应该创建一个表格。然后根据 table，tr，td可以设置他们各自的属性从而能来实现表格的特点。在表格的众多知识点和特点中我觉得这个是值得一说的：
没错，就是表格的嵌套。这相当于我们在wps做表格的时候中的合并单元格。
在繁杂的网页中如果我们想要快速的找到自己需要了解或知道的东西的话，如果一条条的去浏览网页的话，不仅自己会厌烦而且不一定能找到。于是为了解决这个问题我们的网页基本上都有一个搜索引擎栏，无疑它就是用表格完成的。但是还是有一个问题，一个引擎目录栏下的所有东西无序放置的话我们也是很难找到我们所需要的东西的，于是，接下来我们学习的便是列表了。
首先，列表的分类：
有序列表，无序列表，定义列表，列表嵌套。
列表的作用：
有序列表：
有了上述说明，我们来看一个有序列表的例子：
有序列表明显可以看出在网页显示的时候它是有顺序的，不管是数字还是字母都是有序的列表。现在，知道了有序列表，要看看无序列表和它的区别。
无序列表：
看看无序列表的例子并比较它和有序列表的区别：
看出来了吗？有序列表和无序列表在网页呈现出来的是同样的排版但是在列表前面一个是有序的而一个是空心圆或者正方形或者实心圆。
对于列表的嵌套，<ul>是可以嵌套在<li>标签里的。如：
<ul>
<li>web的基础知识
<ul>
<li>web de gongzuoyuanli</li>
</ul>
</li>
</ul>
对于定义列表不常用的话，我们只需知道即可。
定义列表 <dl>
• 定义列表往往⽤用于要给出⼀一类事物的定义的情形，如名词 解释、字典等
– <dl>标记定义一个定义列表
– <dt>标记定义了定义列表中的⼀个术语
– <dd>标记对定义列表中的术语提供定义
总结：今天老师的讲课速度有些慢，对于我来说，个人比较懒散的话，处于松懈的状态我整个人就紧绷不起来。换句话说，我整个人就是没有在状态，这样的慢节奏说实话我从心里是不接受的，但是对于别人来说，这也许很好。所以我认为通过今天的课程进度我应该反思一下我的态度和学习方法，或者说我完全可以往前走，我却把自己处于一种懒散松懈的状态。明天，加油。自己的目标不需要别人赶着你走！
网友评论