第三章：初探HTML

来源：互联网发布：李娃传知乎编辑：程序博客网时间：2024/06/05 20:28

3.1使用元素

1.这里用粗体标明元素，code为标签，其中<code>为开始标签，</code>为结束标签；<code>apples</code>标签与元素一起称为code元素

I like <code>apples</code> and bannner

注意：有些html标签会改变呈现形式，例如<code>，尽量不要这样，未使用css，让内容和呈现分离开来

2.使用空元素

有些元素为空时是没有意义的，但他任然为有效的HTML代码。

I like <code></code> and bannner

3.使用自闭和标签

元素可以简洁的只用一个元素表示，下面就是只用一个标签表示空元素

I like </code> and bannner

4.虚元素

有些元素只能使用一个标签表示，在其中放置任何内容都是不符合HTML规范的。这些元素为
虚元素。
他有两种表示方法：
1）开始标签

I like apples and bannner,<hr>I like  bannner

2)结束标签

I like apples and bannner,<hr/>I like  bannner

提一句：hr也是带有呈现形式含义的元素，他会显示为一条横线

3.2使用元素属性

元素可以使用属性（attribute）进行配置。
href为属性名，它专属于a标签，表示跳转的地址；"/app.html"为属性值

I like <a href="/app.html">apple</a> and orange.

3.2.1一个元素对应多个属性

一个元素可以对象多个属性，他们之间用空格隔离开，且没有先后顺序

   I like <a href="/app.html" id="firstlink" class="a-link">apple</a> and orange.

3.2.2使用布尔属性

有些属性属于布尔属性，这些属性不需要设定一个值，只需要将属性名添加到元素中就可以了。
例如下面：布尔属性为disabled，其实就是disabled=“true”，

  your name：<input disabled>

与下面的代码等价

 your name：<input disabled=""> your name：<input disabled="disabled">

3.2.2使用自定义属性

用户可以自定义属性，这种属性必须以data-开头。加data-是为了以免将来出新属性和你的一样，比如出了hcd属性，避免不必要的冲突

  your name：<input disabled="" data-hcd="hcd">

3.3创建html文档

html文档大部分是针对浏览器创建的。用于处理HTML文档的各种软件有一个共同的名称叫做用户代理。浏览器是最为流行的用户代理，但是不是唯一的一种

3.3.1外层结构

HTML的外层结构由两个元素确定:DOCTYPE和html

<!DOCTYPE html><html lang="en"></html>

上例中的DOCTYPE元素让浏览器明白处理的是HTML文档，
以html开头,告诉浏览器直到html结束标签，所有的内容都应当按照html来处理

3.3.2元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部

1. 设置文档标题

 <!DOCTYPE html>    <html>        <head>            <title>this is title</title>        </head>    </html>

这里的<title></title>为浏览器窗口或标签页的名称。

2. 用元数据说明文档

元素meta 局部属性：name，content，charset，http-equiv
1）指定名/值元数据对

            <!DOCTYPE html>            <html lang="en">                <head>                    <meta name="author" content="haochangdi">                    <meta name="description" content="a simple example">                    <title>Document</title>                </head>                <body>                                </body>            </html>

            name属性用来表示元数据的类型，content来提供值。
           元数据名称              说明
           author                   作者
           description                 当前页的说明
           keyword                     一般用逗号隔开，用来描述页面的内容
           application name         当前页面所属web应用系统的名称

           robots                   告诉搜索引擎如何对待该文档（noindex表示不要索引本页，noarchive表示不要将本页存档或缓存，nofollow表示不要顺着本页的链接继续搜索下去）
           注意：keyword现在越来越不是很有用了，因为可以被滥用，造成假象，现在搜索引擎都有自己的关于关于优化网页和整个网站的说明。

       2）声明字符编码
           <meta charset="UTF-8">

       3）模拟HTTP标头字段
           http-equiv属性的用途是指定所要模拟的标头字段的名称。

http-equiv属性允许使用的值：

refresh：

以秒为单位指定一个时间间隔，每过这个时间段就从服务器重新载入当前页面。也可以另行指定一个url载入,<meta http-equiv="refresh" content="5;www.baidu.com">

dafault-style: 指定页面优先使用的样式表。

3.3.3内容

文档的第三部分是文档的内容，这也是最后一部分，放在body元素之中，主要放置向用户显示的内容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    I like <code>apple</code> and orange.</body></html>

3.3.4父元素，子元素，后代元素和兄弟元素

例如：

<ul>    <li>        <span>this is span</span>    </li>    <li> this is li</li></ul>

上面的代码中:ul --- li的父元素，
           li --- span的父元素，
           span--- ul的后代元素，
           li --- li的兄弟元素

3.3.5了解元素类型

   HTML元素：1.元数据元素   2.流元素   3.短语元素
   1.元数据元素：用来构建HTML文档的基本结构，以及对该如何处理文档向浏览器提供信息和指示。
   2.流元素和短语元素的用途是确定一个元素的合法的父元素和子元素的范围。短语元素是HTML的基本成分。流元素是短语元素的超集。就是说所有的短语元素都是流元素，而流元素不一定是短语元素。

3.4HTML5全局属性

每种元素都可以规定自己的属性，这种属性称为局部属性。每一个局部属性都可以用来控制元素独有行为的某个方面。
全局属性：他们用来配置多有元素共有的行为，全局属性可以用在任何一个元素身上。

3.4.1 accesskey属性

使用accesskey可以设定一个或者几个用来选择页面上的元素的快捷键。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <form>        Name:<input type="text" name="name" accesskey="n">        <br>        password:<input type="password" name="password" accesskey="p">        <br>        value<input type="text" name="value" accesskey="s">    </form></body></html>

对于上面的代码，在window系统中，利用 Alt+accesskey属性值可以快速切换，例如Alt+s可以快速切换到value的input，Alt+n可以快速切换到name的input

3.4.2 class属性

给元素定义一个类，对这个类进行操作，或是增加样式或是js操作

3.4.3 contenteditable

contenteditable是HTML5中新增的元素，其用途是让用户能够修改页面上的内容。属性值为true为可以修改，false为不可修改

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <p contenteditable="true">this is a big apple</p></body></html>

3.4.4 id

给元素的唯一标识，id应当是唯一的。

3.4.5 lang

说明元素内容使用的语言。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <p lang="en">hello - how are you</p>    <p lang="fr">Bonhjir - asdas </p>    <p lang="es">Holar asdsdd </p></body></html>

lang属性值必须用ISO语言代码。

3.5指定外部元素

link可以在HTML文档和外部资源之间建立联系。

属性                                      值                  描述
href       URL               规定被链接文档的位置。
media      media_query   规定被链接文档将被显示在什么设备上。
rel                   规定当前文档与被链接文档之间的关系。
            alternate      链接到文档的另一版本，比如另一语言的版本
              author                    链接到文档的作者
                                            help                         链接到当前文档的说明文档
              icon           指定图标资源
              licence          链接到当前文档的相关许可证
              pingback                 指定一个回探服务器.从其它网站链接到博客的时候或通知
          prefetch    预先获取一个资源
           stylesheet   载入外部样式表

1.引入外部样式
<link rel="stylesheet" type="text/css" href="style.css">
2. 为页面定义网站图标
<link rel="shortcut icon" type="text/css" href="...">

3.6 使用脚本元素

分为两类:1.script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
       2.对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。
（注意：浏览器一遇到script就会暂停对HTML文档的加载,而去执行脚本文件）
1. script元素
   必选的属性
   属性         值             描述
   type          MIME-type    引用或定义的脚本的类型。对于js可省略

   非必选
   属性         值                  描述
   async          async         规定异步执行脚本（仅适用于外部脚本）。
   defer           defer          规定是否对脚本执行进行延迟，直到页面加载为止。
   src               URL            规定外部脚本文件的 URL。

3.6.1 文档内嵌脚本

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <script type="text/javascript">         document.write("this is js")     </script> </head> <body>     </body> </html>

3.6.2 载入外部脚本库

3.6.3 推迟脚本的执行

   可以用async和defer对脚本的执行方式加以控制。
   1）defer属性告诉浏览器要等页面加载和解析完成后才执行脚本。(还可以将script标签放在body的最下面)
   <script type="text/javascript" src="" defer></script>
   2）浏览器一遇到script就会暂停对HTML文档的加载,而去执行脚本文件，但是如果有async属性的话，就会变为异步加载，不会阻碍HTML文档的加载，但是我们也将无法控制加载js的顺序，也就说如果js2用到了js1中的某些函数或者值的话，就不宜在使用async
   <script type="text/javascript" src="" async></script>

阅读全文

0 0