我饿了

19 天前

HTML——学习笔记

本文作者:IMWeb 我饿了 原文出处:IMWeb社区 未经同意,禁止转载

HTML——学习笔记

我是next 3期学员dengyu,这是我的HTML学习笔记,欢迎大家指正错误。

1、什么是HTML?

HTML不是一种编程语言,它是一种超文本标记语言(Hyper Text Markup Language),标记语言是一套标记标签(Markup tag),浏览器通过HTML标记标签来构造描述我们访问的网页。

2、什么是HTML标签?

标记标签(Markup tag)通常被称为HTML标签(HTML tag),HTML标签是由<左尖括号+关键词+>右尖括号组成,如:

    <html>

HTML标签通常是成对出现的,第一个标签被称为开始标签(Opening tag),第二个标签被称为结束标签(Closing tag),结束标签和开始标签的内容一样,只是在关键词前添加/正斜杠表示结束,如:

    <html></html>

也有单独出现没有结束标签的标签单标签,如 换行标签:

    <br>

3、HTML文档的基础结构

HTML文档的文件名一般为“文件名.htm”或者“文件名.html”,HTML文档由文档声明和html元素组成,html元素内,只能包含head元素和body元素,例:

<!DOCTYPE html>
<html>
<head>
    <title>基本HTML结构</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>我是一级标题</h1>
    <p>我是一段文本段落</p>
</body>
</html>
  • <!DOCTYPE html>为HTML 5文档声明,告诉浏览器我们现在使用的是HTML 5版本进行解析,编写html文档时千万不要忘记,避免浏览器错误的解析html版本,造成一些页面显示不正确等奇怪的问题。
  • <html></html>:html元素,包裹整个页面的代码,所以被叫做顶级元素或者根元素,html元素内,只能包含head元素和body元素
  • <head></head>:head元素,页面通用信息通常放在head元素中,通用信息也称之为元数据,用来描述html文档本身的信息,比如title描述的是这个页面的名称是什么,title还有一个特别的地方,是显示在浏览器的标签页之上。
  • <body></body>:body元素存放页面的内容,文本,图片,音频,游戏等等。页面内容通常显示在浏览器的页面区域。

4、深入了解head元素

<head>元素用于定义网页的常规信息和元数据,虽然在网页中不可见,但是也是非常的重要。总得来说其里面的子元素大概分为三类,分别是:描述网页基本信息的,指向渲染网页需要其他文件链接的,各大厂商根据自己需要定制的。

网页基本信息

一个网页,首先得有个标题,就跟人有名字一样。除此之外,还可以根据实际需要补充一些基本信息。

  • 文档标题(浏览器标签中显示的文本):
     <title>深入了解 head 元素</title>
  • 编码格式:
     <meta charset="utf-8">

(你可能还看到 gb2312格式,不过不建议使用),如果你的页面出现乱码,那一般就是编码格式不对

  • 视窗设置:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 搜索引擎优化相关内容:
     <meta name="description" content=“帮助你深层次了解HTML文档结构”>
  • IE浏览器版本渲染设置:
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

其他文件链接

一个完整的网页光有 HTML 结构是非常简陋的,就如一个毛坯房。有了结构之后,我们还需要加入样式与行为为网页增添色彩。

  • CSS 文件:<link> 元素经常位于文档的头部,它有2个属性, rel="stylesheet",表明这是文档的样式表,而 href,包含了样式表文件的路径
    <link rel="stylesheet" type="text/css" href="style.css">
  • JavaScript文件:[removed] 部分没必要非要放在文档头部; 实际上,把它放在文档的尾部(在 </body>标签之前)是一个更好的选择 ,这样可以确保在加载脚本之前浏览器已经解析了HTML内容(如果脚本加载某个不存在的元素,浏览器会报错)。
      <script src=“script.js"></script>

厂商定制

比如开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面,可以设置为webkit内核、IE标准,IE兼容三种模式。代码分别为:

    <meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->  
    <meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->
    <meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->

同样分享页面到QQ的聊天窗口,有些页面直接就是一个链接,但是有些页面有标题,图片,还有文字介绍。为什么区别这么明显呢?其实就是看有没有设置下面这三个内容(具体参阅:腾讯移动WEB开发平台)。

    <meta itemprop="name" content="这是分享的标题"/>
    <meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
    <meta name="description" itemprop="description" content="这是要分享的内容" />

还有IOS也定制了一些移动开发设置如下:

    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-startup-image" href="/startup.png">

5、常用的<meta>元素

<meta name="参数" content="具体的描述">描述HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。

  • description(网站内容的描述)用于告诉搜索引擎,你网站的主要内容。
    <meta name="description" content="这是我学习前端的第一篇学习笔记">
  • keywords(关键字)用于告诉搜索引擎,你网页的关键字。
    <meta name="keywords" content="学习,前端,html,笔记">
  • viewport(移动端的窗口)这个属性常用于设计移动端网页,相关属性如下:

1.width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

2.height:和 width 相对应,指定高度。

3.initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

4.maximum-scale:允许用户缩放到的最大比例。

5.minimum-scale:允许用户缩放到的最小比例。

6.user-scalable:用户是否可以手动缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • robots(定义搜索引擎爬虫的索引方式)robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。 具体参数如下:

1.none : 搜索引擎将忽略此网页,等价于noindex,nofollow。

2.noindex : 搜索引擎不索引此网页。

3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。

5.index : 搜索引擎索引此网页。

6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

    <meta name="robots" content="none">
  • author(作者)用于标注网页作者
    <meta name="author" content="email:xxx@xx.com">
  • copyright(版权)用于标注版权信息
    <meta name="copyright" content="xxxxx"> //代表该网站为xxxxx个人版权所有。
  • revisit-after(搜索引擎爬虫重访时间)如果页面不是经常更新,为了减轻搜索引擎爬虫对服务器带来的压力,可以设置一个爬虫的重访时间。如果重访时间过短,爬虫将按它们定义的默认时间来访问。
    <meta name="revisit-after" content="7 days" >

<meta http-equiv="参数" content="具体的描述">相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content。

  • content-Type(设定网页字符集)(推荐使用HTML5的方式)用于设定网页字符集,便于浏览器解析与渲染页面
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML,不推荐
    <meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
  • X-UA-Compatible(浏览器采取何种版本渲染当前页面)用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
  • expires(网页到期时间)用于设定网页的到期时间,过期后网页必须到服务器上重新传输。
    <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
  • refresh(自动刷新并指向某页面)网页将在设定的时间内,自动刷新并调向设定的网址。
    <meta http-equiv="refresh" content="2;URL=http://www.xxxxx.com/"> //意思是2秒后跳转到指定网站
  • Set-Cookie(cookie设定)如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
    <meta http-equiv="Set-Cookie" content="name, date"> //格式

    <meta http-equiv="Set-Cookie" content="User=xxxxx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

节选自HTML meta标签总结与属性使用介绍

6、什么是HTML元素?

HTML元素(HTML Element)是由开始标签(Opening tag)+内容(Content)+结束标签(Closing tag)组成,如以下的h1元素:

    <h1>我是一个一级标题</h1>

7、什么是HTML注释?

“当我写下这段代码的时候,只有我和上帝能看懂。现在只有上帝能了。”这是不写注释的程序员们经常说的,所以拥有良好的注释习惯,就能避免和减少在我们写下代码之后再回看我们自己写的代码时,不至于一时看不明白,重新费时的去解读之前写过的代码。

HTML注释不会显示在浏览器页面中,是给我们程序员看的,一般用于对代码的说明和注释代码不让代码执行。HTML的注释语法很简单,注释开始符“<!--”+“注释的内容”+注释结束符“-->”,这样的注释语法是HTML独有的,如:

    <!--注释的内容-->

8、简单的了解一下HTML属性

HTML属性包含元素的额外信息,这些信息不会出现在实际的内容中,HTML属性大致分为3类:全局属性(id、class、style、title)、某一类元素属性、某一个元素属性。HTML属性写在HTML元素开始标签中,与标签名用空格分隔,然后就是我们元素的属性,属性一般为属性名="属性值",属性值必须用双引号包裹,也有单独出现的属性如input的布尔属性disabled。

下面是一个a元素和它的属性:

    <a href="index.html" title="首页">首页</a>
    <!--a 元素有一个href属性,这个属性指定了超链接目标是index.html,还有个title属性,在我们浏览器中,鼠标移动到这个a元素上,会显示一段文本“首页”-->

9、常用的基本元素

标题(Heading)

    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

段落(Paragraph)

    <p>这是一段文字</p>

图片(image)

    <img src="imweb-log.png" alt="IMWeb" width="184" height="43">

链接(anchor)

    <a href="http://imweb.io" target="_blank">我是一个超链接,指向IMWeb学院</a>

有序列表(order list)

    <ol>
        <li>首先把冰箱门打开</li>
        <li>然后把大象关进去</li>
        <li>最后把冰箱门关上</li>
    </ol>

无序列表(unorder list)

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

div(division)元素,一般包裹块级元素,用来分区

    <div>
        <h2>区块标题</h2>
        <p>区块描述文字</p>
    </div>

span元素,一般包裹行内元素

    <div>
        <span>作者:xxx</span>
        <span>发布时间:xx-xx-xx</span>
        <span>浏览量:xxxx</span>
    </div>

10、块级元素和行内元素

在HTML中有两种你需要知道的重要元素类别,块级元素和行内元素。

块级元素默认占据整行宽度,在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进行内元素中,但可以嵌套在其它块级元素中,如(p、div、hn、ul、ol、li)。

行内元素同行显示,默认宽度由内容决定,通常出现在块级元素中并包裹文档内容的一小部分,而不是一整个段落或者一组内容。行内元素不会导致文本换行:它通常出现在一堆文字之间例如超链接元素或者强调元素

11、HTML嵌套

如以下代码,p元素被body所包裹,body元素嵌套与html元素之中,这样包裹的结构我们称之为嵌套,不管互联网上页面是多么复杂,它们都是由一个一个的元素通过嵌套这样的方式堆叠而成的。

    <!DOCTYPE html>
    <html>
    <head>
        <title>基本HTML结构</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>我是一级标题</h1>
            <p>我是一段文本段落</p>
    </body>
    </html>

12、HTML树

如以下代码,

    <!DOCTYPE html>
    <html>
    <head>
            <title>基本HTML结构</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>我是一级标题</h1>
        <p>我是一段文本段落</p>
    </body>
    </html>
  • html元素是head和body的父元素(Parent)
  • head元素是title元素的父元素(Parent),body是h1元素和p元素的父元素(Parent)
  • head元素和body元素同属于一个父元素html所以它们是兄弟元素(Sibling),同样h1元素和p元素同属于一个父元素body所以它们是兄弟元素(Sibling)
  • 反过来html元素的子元素(Child)有head元素和body元素
  • head元素的子元素(Child)只有title元素
  • body的子元素(Child)有h1元素和p元素

以上的从属关系,构成了HTML树结构

13、HTML字符实体

预留字符

在 HTML 中,某些字符是预留的不能直接使用,如小于号(<)和大于号(>),直接使用会误认为它们是标签。

所以如果我们希望正确地显示预留字符,那必须在 HTML 源代码中使用字符实体(character entities),如可以使用\<表示小于号(<),\&表示大于号(>)。

空格

浏览器总是会截短 HTML 页面中的连续空格。所以如果你在HTML代码中连续输入多个空格,最后也只会显示一个空格。

那么如何才能实现连续多个空格呢?这就需要用到我们的\ 字符实体了。

简单示例如下:

    <p>空格            好多啊,但是只显示成一个</p>
    <p>空格     好多啊,全部显示</p>

常用字符实体

字符实体可以有两种方法表示:一种为实体名称,一种为实体编号。如小于号(<)既可以用实体名称&lt;表示,也可以用实体编号&#60;表示。

常用几个字体字符如下:

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
© 版权(copyright) &copy; &#169;
× 乘号 &times; &#215;
0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。