HTML学习笔记第一天

2017-12-02 本文已影响5人 coderhlt

认识浏览器

1.浏览器的作用：渲染绘制网页的内容给用户看；供用户对网页的内容进行交互；
不同的浏览器有不同的浏览器内核，浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现。
常见的浏览器及内核：

IE内核 Trident
谷歌内核 WebKit / Blink
火狐内核 Gecko
Safarri内核 WebKit
欧朋内核 Presto
2.浏览器访问网页时是有真实的、物理的文件传输的
网页不是一个文件，而是一堆文件组成的
我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地

电脑上的一个文件是可以"同时"被多个软件打开的, 不同的软件打开可能会有不同的效果
例如: 同一个index.html文件可以被多个浏览器和记事本一起打开
例如: .html文件通过浏览器打开不可以编辑, 通过记事本打开可以编辑
4.什么是纯文本文件?
我们Windows电脑上有一款默认安装好的软件叫做记事本. 这款软件就是专门用来打开纯文本文件的, 所以只要能够被记事本打开, 并且能够正常显示的文件都是纯文本文件
.html的文件可以被记事本打开, 并且能够正常显示，因此.htm文件是纯文本文件
5.什么是HTML？
HTML其实是HyperText Markup Language的缩写, 超文本标记语言。
HTML是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.
这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的，所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

一.HTML发展史

141512956507_.pic_hd.jpg

二 .DTD文档声明

什么是DTD文档声明？
-由于HTML有很多个版本规范,每个版本的规范志坚又有一定的差异,所以为了让浏览器能够正确的编译/解析/轩然我们的网页,,我们需要在HTML文件的第一行告诉浏览器,我们当前这个网页是用哪一个版本的HTML编写的,浏览器只要知道了我们是用哪一个版本的规范来编写之后,它就能够正确的编译/解析/渲染我们的网页。
常见的DOCTYPE有如下几种：

HTML4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5: 
<!DOCTYPE html>

3 .关于DOCTYPE文档的其他疑惑：
通过实验发现DOCTYPE文档不写也能运行，这是因为浏览器有一套自己的默认的处理机制并不是完全依赖于这个声明, 但是W3C规定第一行必须写上DTD文档,为了遵守规定,我们第一行一定要写上DTD文档。
虽然说有很多类型DOCTYPE文档声明，但HTML5的时代已经到来,以后都用HTML5类型的文档声明, HTML5向下兼容记住HTML5的DTD文档声明就好：<!DOCTYPE html>

三、html5整体认知

<!DOCTYPE html>//这是html5的DTD文档声明；DTD文档声明，必须是HTML文档的第一行位于 <html> 标签之前；DTD文档声明，不是HTML标签；DTD文档声明对大小写不敏感（大小写无所谓）；W3C规定第一行必须写上DTD文档,为了遵守规定,我们第一行一定要写上DTD文档。

<html lang="en">  //<html>标签作用：html是HTML文档的根元素，一个文档中只能有一个，其他所有的元素都是它的后代元素。W3C标准建议为html元素增加一个lang属性，作用是帮助语音合成工具确定要使用的发音，帮助翻译工具确定要使用的翻译规则。lang = "en"告诉浏览器：这个HTML文档的语言是英文。lang = "zh"表示这个HTML文档的语言是中文。
<head >//head元素里面的内容是一些"元数据"(元数据:描述数据的数据)一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
<meta charset="UTF-8"> 符集。//字符编码，meta标签指定字符集，让浏览器更精确地显示每一个文字，不设置或设置错误会导致乱码，一般都使用UTF-8编码
<title>冷武橘的网页</title>//title标签专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题，title标签必须写在head标签里面
</head>
<body>//body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
</body>
</html>

常见的字符集有：GBK(GB2312)、UTF-8；GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文，体积比较小；而UTF-8里面存储的世界上所有的文字体积比较大。
在企业开发中，如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快；如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8；
四、标签的分类
单标签：<meta charset="UTF-8" />
双标签：<html></html>

并列关系(兄弟/平级)
<head>
</head>
<body>
</body>
嵌套关系(父子/上下级)
<head>
<meta charset="UTF-8" />
<title>百度一下,你就知道123</title>
</head>

四、htm 和 .html扩展名的区别：

DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的，所以htm是为了兼容过去的DOS命名格式存在的。

五、常见简单标签

1. h （标签作用：定义 HTML 标题）
  <h1>我是h1</h1>
  <h2>我是h2</h2>
  <h3>我是h3</h3>
  <h4>我是h4</h4>
  <h5>我是h5</h5>
  <h6>我是h6</h6>
  h标签一共有6个，超过6则无效；在企业开发中，一定要慎用H系列的标签，特别是H1标签，在企业开发中一般情况下一个界面中只有一个h1标签。
  h元素有助于网站的SEO(Search Engine Optimization)优化，可以促进关键词排名。建议在网页中最多只有1个h1元素。乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎以为作弊，最后导致K站。
1. strong标签
  用于强调某些文本，粗体的显示效果。

<p>
    时光如水，岁月无声。<strong>你若安好，便是晴天</strong>。
</p>

1. hr ( 标签在 HTML 页面中创建一条水平线)

 /<hr  />  
 <hr  >  
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
HTML5是向下兼容的，因此hr标签结束加不加”/“都可以，以后在开发中，我们只需要根据高级开发工具的提示就好。在开发中很少使用hr标签，因为标签是用来描述语义的，画横线可以通过cs来定义

1. p(定义段落的)
  <p>这是一段内容</p>
  <p>这是第二段内容</p>
  <p>这是第三段内容</p>
1. br(定义简单的折行)
  br标签的注意点:
  多个br标签可以连续使用, 使用了多少个br标签就会换多少行
  由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签.比如说一段文字没有结束就需要换行就可以通过br实现
1. pre
  在默认情况下，HTML代码中的大多数空格都会被浏览器压缩，比如一段连续的空格会被压缩成1个空格，如果想保留HTML代码中的空格、换行，可以用pre元素

<body>
<pre>
   测试测试测试    测试
    测试测试
    测试测试测试   测试测试测试     测试测试测试
</pre>
<p>
   测试测试测试    测试
    测试测试
    测试测试测试   测试测试测试     测试测试测试
</p>
</body>
</html>