首页 > 代码库 > 【学习笔记】HTML基础
【学习笔记】HTML基础
【学习过程遇到疑问和延伸阅读】
1.文本编码
除了html标记外的文本，需要规定其编码规则<meta charset="utf-8">，告知给浏览器，
否则浏览器选用电脑默认的编码方式，或者是按照“自动选择/检测”编码的设置。
这里注意到有个概念，浏览器自动选择的设置，若设置了以后优先按照该设置。
2.html标记语言是由浏览器的xxx来解析的？“浏览器解析html源码”？
同一概念：网页浏览器引擎，浏览器内核，排版引擎，渲染引擎
参考理解，浏览器解析HTML的过程及DOM的树形结构
http://www.qdfuns.com/notes/15102/7e915575d17fe8112c99f43b567b314a.html
3.自然语言和程序语言
现有的编程语言当中，哪些和自然语言更接近？from 知乎
https://www.zhihu.com/question/19701701?sort=created
4.图片可以看作为一个字符占据页面中？
图片为行内元素。
扩展理解：网页的排列规则，在不使用其他的与排列和定位相关的特殊CSS规则时，是标准流。
HTML文档中的元素可以分为两大类：行内元素和块级元素。
（1）行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。
（2）块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。
【新概念，重要概念】
列表：一种非常有用的数据排列工具，它以清晰直观的形式来显示数据。
FTP：FTP是文件传输协议，服务器中存有大量的共享软件和免费资源，要想从服务器中把文件传送到客户机上或者把客户机上的资源传送至服务器，就必须在两台机器中进行文件传送，此时双方必须要共同遵守一定的规则。FTP就是用来在客户机和服务器之间实现文件传输的标准协议。它使用客户/服务器模式，客户程序把客户的请求告诉服务器，并将服务器发回的结果显示出来。而服务器端执行真正的工作，比如存储、发送文件等。
【实操知识点脉络】
1.html基础
1.1什么是html
每天都在接触HTML
HyperTextMarkupLanguage
页面有链接其他页面，这些其他页面也有链接，
把这些所有页面连接在一起，组成一个内容的网络。
这些内容组成超文本。
HTML是说这些页面长成什么样子的语言。
最初的HTML从排版语言发展而来。
1.2.html的标准
是由W3C的组织所维护的。
实际标准由比较大的浏览器厂商所推动的。
是浏览器厂家在改进浏览器的过程中不断互相接受和融合，而形成的事实标准。
而W3C在最后把它们写成文本。以文字的形式确定下来。
HTML ，HTML5的关系：不是割裂的，是一脉相承的东西。HTML5也在发展当中。
1.3.html编辑软件
Sublime Text2
新建html文件，在浏览器打开
文本编码：utf-8编码 ，不支持国标码GBK
1.4.浏览器的调试功能
调试：即检查编写的内容有没有问题
4.1编写html文件，并在浏览器打开，调试查看
2.HTML文件框架
2.1文件框架
标记语言，在文本中加入标志，而不是正文
html：
head：告诉浏览器预先配置的东西
body：告诉浏览器要显示的东西，文本可见信息
2.2html字符编码问题
电脑是国标码，浏览器认为html也是国标码
在head里，加上meta charset=utf-8 Unicode统一编码
2.3html-声明html5
<!DOCTYPE html>
3.段落标记
3.1<p>表示段落
html与css关系
3.2<br>断行break，不需要对应的</br>
与<p>的区分
3.3<h1-6>标题，章节标题
head多级标题，数字越大，级别越低
3.4<hgroup>
标题标记是告知浏览器，文本内容的结构，一个重要的标记首段。
4html格式
html需要表达内容，表达结构，而不是格式，但早期
html还是遗留下来有表达格式的tag。
4.1基本格式
文字格式
<b><i><tt><small><del>
注意：要加上结束的slash tag，否则格式就会应用到标记开始往后的所有的文本
建议：还是使用css来表达格式
4.2段落格式
用在一段内容当中的格式，告知浏览器表达这段内容是什么样的内容
<em>强调，表示重要
<strong>表示着重
<dfn>表示定义
<code>表示code代码，适用于在英文语言的技术文章当中容易标记出来某些函数名
<samp>表示samp例子代码
<kbd>表达kbd用户输入
<var>variable变量
<cite>cite引用
实践截图
4.3其它格式
有些又表达结构，又带有一定格式的tag
<address>可放多行内容，也可被浏览器认识，可作为检索的一部分。
<blockquote>缩进，可嵌套
<q>引用号包裹文字
<pre>premated，按照原本的格式显示
5深入格式
5.1.HTML标记的属性
5.1.1HTML属性
除了html标记本身，还可以加入一些东西，html属性
<hr>
html标记的属性，变量等于值的式子，可以形成不同的视觉效果
<hr width=50% align=left size=50>
曾经属性值需要加引号，html5可以不加，目前所有浏览器都支持不加
<abbr title="中华人民共和国">PRC</abbr>
<p title="">...</p>
<h1 title="">...</h1>
<bdo dir=rtl>...<bdo>
<bdi>...<bdi>
5.1.2HTML转义字符
在文本里面想要表达小于号<,而这个符号刚好为html标记的开始符号，
这怎么办呢？
<
>
字符实体，变号字体，也是用一些特殊的符号（即<）来表达那个单独符号(<)
还有哪些？
& ： &
： none breakable space
加两个小点的于：üÜ
当然还有很多。
5.2列表与图片
5.2.1列表
<ul>unorder list，在每一个list item前用圆点表示
<ol>order list，在每一个list item前用编号表示
<li>list item,每一个list每一项的内容
注意：浏览器不管html标记之间的缩进，换行，这些缩进只是为了更好地阅读源文件。
<ol>有一个属性start，可以调整编号的起始值。
<dl>defination list，由两部分组成：<dt>defination term,<dd>defination description
5.2.2图片
怎么在页面当中放入图片？
用标记<img />
<img src="http://www.mamicode.com/在当前html页面底下的目录里的图片路径" />
注意理解：对于html来说，图片是一个字符。跟页面中的其他字符连在一起，一个个排过来。
它们的基线是在同一水平线上。这是默认的对齐方式，还有其他的对齐方式，html5标准后，
一般通过css来决定。
<img>的属性 width,height，位置浏览器预先留下位置，alt提示文字
src可以取内部图片，也可以取外部图片。
浏览器能支持的图片格式，有三种GIF，JPEG，PNG。
5.2.3iframe
与img接近的东西，也是占据一个字符，也是从外部去资源。
有结束标记。
效果：在当前的网页开了一个小窗口把其他网站的内容取过来了。
5.3超链接
5.3.1超链接
怎么在页面当中放一个链接，然后点击链接，就去到链接的页面
<a href="http://news.163.com">网易新闻</a>
打开当前目录底下的另一个页面
<a href="http://www.mamicode.com/a.html">页面</a>
target属性，值有_blank等
5.3.2页面内连接
还有一种链接的目的地
首先需要在到达位置的地方，添加上id属性，成为链接能到的目的地
而链接的href属性值为"#id值"
5.3.3 图片定位链接
曾经流行的标记
<map name="映射图像名称">
<area shape="点击区域形状" coords="区域坐标" href="http://www.mamicode.com/链接地址">
</map>
需要在img下设置映射名usemap="映射图像名称"
5.4表格
html的一个比较复杂的结构
<table border="1">
<caption>表格标题</caption><!--位于整个表格的第一行-->
<thead>
<tr>
<th>OS</th><!--表格中的头，针对单元格，里面的字体比td的粗一些-->
<th>Chinese</th>
<th>French</th>
</tr>
</thead>
<tbody>
<tr><!--table row-->
<td>iOS5</td><!--一行当中的格子-->
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td colspan="3">Windows</td><!--列合并-->
</tr>
</tbody>
<tfoot>
</tfoot>
注意：一个表格对于html来说，也是一个字符。
表格前面和后面的字符分别在表格区域的上一行和最后一行。
表格的结构：thead,tbody,tfoot
【学习笔记】HTML基础