20180607-前端系统学习-HTML简介和语法之元素分类、文档标题、元数据

一、HTML简介

HTML为Hyper Text Markup Language即超文本标记语言。HTML文档给浏览器进行解析渲染。

HTML发展史：1991年第一次出现HTML，1995年第一个HTML标准出现，到至今使用的是2017年的html5.2标准。

HTML文档结构：

<!DOCTYPE html>   //文档声明（首航顶格写）告知浏览器按照什么标准解析文档
<html>              //
<head>                //文档头部，大部分不在浏览器显示
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>      //文档主体
    我是正文
</body>
</html>

二、HTML语法

①语法

1. 结构

正常情况下结构如下

但是并不是所有的标签都有结束标签，没有结束标签的元素有：img、input、link、area、hr、br、col、base、embed、param、source、track、wbr。

2. 属性

<a href=test.html>测试</a>

用属性=属性值的方式表示，属性名对大小写不敏感。如果包含（空格 ”’` = < >）等需要用引号包含起来。

有些属性值为空的时候可以省略，如

<button disabled>提交</button>

空值属性写法常见于布尔属性，出现为true，不出现为false。

<button disabled=disabled>提交</button>

或者

<button disabled="">提交</button>

常见的布尔属性还有checked、readonly、required、selected。

3. 嵌套

注意闭合顺序

4. 注释

<!-- 我是注释 --> 即用<!--开头， 用-->结尾，中间是注释内容，主要目的是描述代码如何工作。

②全局属性

id属性：具有唯一性 <div id = "nav"></div>，一个文档只能出现一次。
class属性：规定元素的类名。<div class = "time"></div> 可以在文档出现多次。
style属性：规定元素的行内样式。<div style = "display:none"></div>
title属性：规定元素的额外信息。<div title = "收藏"></div>

除此之外还有：accesskey、contenteditable、dir、draggable、hidden、lang、spellcheck、tabindex、translate。

③实体字符

1. 实体字符表示

&entity_name; 如 
&entity_number;如

2. 常用实体

空格 :    
引号": " "
大于>: > >
小于<: < <
版权标识©: © ©
与&: & &

三、HTML元素分类

元素可以分为根元素、文档元素数据、内容分区、分组内容、文本级语意、嵌入内容、表格、表单、脚本、交互、编辑、

1. 根元素

html，顶级元素。其他元素是html的后代。

2. 文档元数据

包含head、title、base、link、meta、style。

3. 内容分区元素

包含body、article、section、nav、aside、h1,h2,h3,h4,h5,h6、header、footer。

4. 分组内容

包含p、address、hr、pre、blockquote、main、div、ol、ul、li、dl、dt、dd、figure、figcaption。这些对可访问性及SEO有用。

5. 文本级语义

常用的有a、span、em、strong、cite、q、br、i、b、u、code、small、s、sub、sup。

不常用的有var、samp、kbd、mark、dfn、abbr、data、time、bdi、bdo、wbr、ruby、rb、rt、rtc、rp。

6. 嵌入内容

包含picture、source、img、iframe、embed、object、param、video、audio、track、map、area、template、canvas。

7. 表格

包含table、caption、colgroup、col、tbody、thead、tfoot、tr、td、th。

8. 表单

包含form、label、input、button、select、datalist、optgroup、option、textarea、output、progress、meter、fieldset、legend。

9. 脚本

script 定义内嵌或者外联脚本，可以创建动态内容。
noscript 定义当前页面脚本不受支持或者浏览器关闭脚本情况下显示的内容。

10. 交互

包含details、summary、dialog。有助于创建交互式用户界面对象，比如弹窗可以用dialog。这些元素比较新，浏览器的支持不度是很好。

11. 编辑

用于标记某个文档被更改过的部分。ins表示新插入的内容，del表示文档删除内容。

四、文档标题

<title>文档的标题或者名称
一个文档最多一个标题
<title></title>中的元素内容全部当作文本处理
也可以通过脚本设置、获取标题：document.title。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
    <!-- <script>
        alert(document.title); //获取标题“我是标题”
    </script> -->
    <script>
        document.title = '动态设置标题'; //设置标题为“动态设置标题”
    </script>
</body>
</html>

应用案例--进度提示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <script>
        var percent = 0;  //定义进度变量percent
        var title = "我的第一个网页";  //定义了一个标题
        var timer = setInterval(function () {  //定时器
            if (percent >= 100) {
                document.title = title;
                clearInterval(timer);
            } else {
                percent = percent + 1;
                document.title = "【" + percent + "%】" + title;
            }
        }, 1000);  //触发频率
    </script>
</body>
</html>

五、元数据

1. meta的作用

--描述文档的元数据

2. meta的属性

包含charset、content、name、http-equiv

3. 属性charset

声明当前文档所使用的字符编码
只有一个
推荐写在第一行
推荐写UTF-8

4. 属性content

为name或者http-equiv属性提供与其相关的值得定义

5. 属性name

属性值包含如下：

description 描文档内容，里面为文字
keyboards 描述文档内容，里面为关键字
viewport 移动页面viewport缩放
application-name 网页App的名字
author 手动添加作者名字
generator 软件自动生成的软件名称
referrer 从HTTP请求中返回文本的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
    <meta name="keywords" content="音乐,QQ音乐,在线听歌,音乐下载,音乐播放器,音乐网站,MV,巅峰榜,音乐排行榜,翻译歌曲,热门歌曲,经典老歌,无损音乐,无损曲库">
    <meta name="description" content="QQ音乐是腾讯公司推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、空间背景音乐设置、MV观看等，是互联网音乐播放和下载的优选。">
</head>
<body>
   我真的好用吗？ 
</body>
</html>

其中viewport中content的值可以包含这些内容：width、height、initial-scale、maximum-scale、minimum-scale、user-scale。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

代表和设备宽度一致，初始缩放为1。

6. 应用案例

播放器页面自适应

防盗链。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>referrer</title>
    <!-- <meta name="referrer" content="never"> -->
</head>
<body>
    <img src="http://b25.photo.store.qq.com/psu?/41e942eb-6e91-4b94-a736-196e663f1666/kForrvREu9pdwmv1F5WZwS4SnfKREXjL970lewz92Cc!/b/Ye0jTRG3YAAAYpT39Q7*qQAA&a=29&bo=NwIfAwAAAAABAA4!&rf=viewer_4">
</body>
</html>

7. 属性http-equiv

refresh 指定多久页面重新刷新一次或者刷新后跳转到另一个页面
content-language 定义页面使用的默认语言。现在建议使用html中的lang属性定义。
content-type 定义页面字符编码，和charset的作用一样
default-style 规定要使用的预定义样式表
set-cookie 设置页面cookie，现在不建议这样使用。应该使用HTTP头设置
X-UA-Compatible IE自己定义的属性值，可以定义IE浏览器呈现的网页方式，可以确保网页在将来的版本中有一致的外观。

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

ie=后面不可为空

20180607-前端系统学习-HTML简介和语法之元素分类、文档标题、元数据

猜你喜欢