最近做iOS开发的过程中, 发现要涉及到JS和原生OC(Swift)的交互, 作为一个Developer, 本着克服一切问题的原则, 开始学习HTML, 在这里记录下自己的学习笔记, 方便以后的复习, 和新手初学的参考.
HTML不同于过去学过的各种面向对象语言, 函数式语言, 它不像其他语言有明确的上下文的逻辑关系. 所以并不像其他语言一样需要有什么特定的基础, 希望这句话能让你远离学习过别的语言的阴影.
HTML和CSS以及JavaScript的关系
1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息, 可以包含文字, 图片, 视频等.
2. CSS样式是表现. 就像网页的外衣. 比如，标题字体, 颜色变化, 或为标题加入背景图片, 边框等. 所有这些用来改变内容外观的东西称之为表现.
3. JavaScript是用来实现网页上的特效效果, 如: 鼠标滑过弹出下拉菜单. 或鼠标滑过表格的背景颜色改变. 还有焦点新闻（新闻图片）的轮换. 可以这么理解, 有动画的, 有交互的一般都是用JavaScript来实现的.
1, 语义化
接触过HTML, 或者初学HTML, 我想接触的第一个专业词汇不是标签就是语义化了, 语义化的意义通俗点说就是明白每个标签的用途(不同的标签, 在什么情况下用, 怎么用, 这些就是语义化需要考虑的事情), 比如网页上的文章的标题, 想要在网页上体现的图表, 栏目名称, 段落等等, 都是标签能够实现的, 通过基本的标签加上CSS, 就可以写出一些很优美的页面.
语义化的好处:
1, 更容易被搜索引擎收录.
2, 更容易让屏幕阅读器读出网页内容.
2, 从最简单的程序解释下HTML
作为一个程序员, 大家都应该知道"hello, world", 不管是学C, java, OC等等我想大家写出的第一个都应该是打印函数, 不过HTML是没有函数的, HTML主要是一种文本的显示, 类似于一个文本编辑器, 通过加上恰当的标签, 让文本排布成我们想要的样子, 所以下面是不会出现打印函数的(以后的JavaScript会有).
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>我的第一个网页</title> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 </body> 10 </html>
上面的就是HTML的Hello World.
简单的介绍一下这段代码
首先, 我们从代码中可以发现, 大部分的标签都是成对出现的, 所以分为开始标签和结束标签, 结束标签比开始标签会多出一个" / ", 比如上文中的<html>和</html>.
然后, 我们可以看到, 代码中的标签是可以互相嵌套的, 但是不可以交叉, <html>中就嵌套了成对的很多标签, 但是却没有任何标签彼此交叉. 例如<html><body></body></html>这样就可以, 而<html><body></html></body>这样就是不合法的.
<html></html>称为根标签, 所有的网页标签都在<html></html>中.
<head></head>标签用于定义文档的头部, 文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者, 他是所有头部元素的容器. 头部标签有标题标签<title>, JavaScript内嵌标签<script>, css样式标签<style>, 文件关联标签<link>, <meta>等. 以后会对标签进行逐一的介绍.
<title></title>标签, 在<title>和</title>标签之间的文字内容是网页的标题信息, 它会出现在浏览器的标题栏中. 网页的title标签用于告诉读者和搜索引擎这个网页的主要内容是什么, 搜索引擎可以通过网页标签, 迅速的判断出网页的主体. 每个网页的内容都是不同的, 每个网页都应该有一个独一无二的title.
<body>标签, 顾名思义, body也就是身体, 主体, 也就是说网页上面显示在界面上面的内容, 他也是内容标签的容器, 常见的内容标签有分级标题标签<h1> ~ <h6>, 段落标签<p>, <a>, 图片标签<img>等. 这些标签中的内容会在网页上面直接的体现出来.
<h1></h1>标题标签, 网页中有很多的标题, 比如这篇博客的2, 从最简单的程序解释下HTML就是一个标题, 而标题也有着不同的大小尺寸, HTML中定义了标题的标签分别为<h1>到<h6>, 他们会默认加粗, 然后逐级减小字体.
3, 其他的标签
<p></p>段落标签, 在文章中, 我们需要条理清晰的一个一个段落, 这个时候我们就需要段落标签了, 默认样式中<p></p>前后都会有空白, 但是并不是我们正常使用中的首行缩进, 它通常不会让我们满意, 所以我们需要用css样式(<style>标签)来删除或者改变它.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> <p>标签</title>
6 </head>
7 <body>
8 <p>我的第一个段落.</p>
9 <p>我的第二个段落.</p>
10 <style>
11 p{
12 color:#940;
13 }
14 </style>
15 </body>
16 </html>
<strong>和<em>强调标签, 这两个标签用于强调网页中文本的特定词语或者段落, 但是两者在语气上有区别, <strong>更假强烈, 表现形式会是使用粗体, 而<em>会是斜体.
<span>标签, <span>标签是没有任何语义的, 大家也许会想, 那它有何作用, 但是正是因为没有语义, 才体现了它的强大之处, 也就是自定义, 它标签内的文本配合上css或者是JS能够高度的进行特定文本的自定义, 这在以后的学习中可以称之为最重要的标签之一.
<q>短引用文本标签, 这个标签比较冷门, 当你在引用某名人名言等时候, 会用到的标签, 浏览器会对你引用的文字自动加双引号, 所以你并不需要自己为之加双引号.
<blockquote>长引用文本标签, 这个和上面的标签使用同理, 但是适用于长的段落性引用, 在实际效果中会是缩进的, 单独段落的引用效果, 并不会增加双引号.
<address>地址标签, 可以定义一个地址, 可以是邮箱, 签名, 或者是文档的作者身份. 标签中的文字在浏览器上的样式默认为斜体, 使用css样式表可以自定义.
<code>代码标签, 在一些技术网站, 比如我们的博客论坛网站, 需要展示一行代码的时候, 就会用到code标签. 但是多行代码的时候就不可以了.
<pre>代码段标签, 在需要插入大段的代码时, 需要使用<pre>标签, 它可以将我们代码中的回车, 缩进等完整的体现出来, 避免了HTML不识别多空格和回车的问题.
空标签(单一标签, 不存在开始结束标签)
<br />换行标签, 在HTML中是不识别多空格(可以识别单个空格作为一个文本形式)和换行的, 所有的文本都会是连续的, 所以有了段落标签<p>, 空格 <br />在HTML中也就是等价于ASCII中的" \n ".
<hr />水平横线标签, 在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。