HTML5基本介绍

Posted Tiger老师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5基本介绍相关的知识,希望对你有一定的参考价值。

一.网页固定格式

1.编写网页的步骤:

  • 新建一个文本文档
  • 利用记事本打开
  • 编写THML代码
  • 保存并且修改纯文本文档的扩展名为.html
  • 利用浏览器打开编写好的文件

1.1 WebStorm常见快捷键

  • 如何在WebStorm中利用快捷键创建一个新的.html的文件

    • 同时按下键盘上的Ctrl + Alt + Insert
  • 如何在WebStorm中让光标移动到当前行的末尾

    • 按下键盘上的End键即可
  • 如何在WebStorm中让光标移动到当前行的最前面

    • 按下键盘上的Home键即可
  • 如何在WebStorm中让光标在多行中闪烁

    • 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
  • 如何在WebStorm中快速的复制光标所在的那一行

    • 按下键盘上的Ctrl + D
  • 如何在WebStorm中快速的删除光标所在的那一行

    • 按下键盘上的Ctrl + X
  • 如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签

    • 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可

2.网页基本结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视频测试</title>
</head>
<body>

</body>
</html>
  • 通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

二.网页标签

1.HTML标签

  • 作用: 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
注意点: 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

2.head标签

  • 作用:
    用于给网站添加一些配置信息
  • 例如:

    • 指定网站的标题 / 指定网站的小图片
    • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
    • 外挂一些外部的css/js文件
    • 添加一些浏览器适配相关的内容
注意点:
一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

3.title标签

  • 作用:
    专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点:
title标签必须写在head标签里面

4.body标签

  • 作用:
    专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点:
虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

5.meta标签

  • 作用 : 在编写网页的时候指定字符集,可避免出现乱码现象
<meta charset="UTF-8">

GBK(GB2312)和UTF-8区别

  • GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
    体积比较小
  • UTF-8里面存储的世界上所有的文字,提交比较大

个人推荐:所有一律都写UTF-8

三.HTML标签分类

1.单标签

  • 只有开始标签没有结束标签, 也就是由一个<>组成的
<meta charset="UTF-8" />

2.双标签

  • 有开始标签和结束标签, 也就是由一个<>和一个</>组成的
<html>
</html>

四.HTML标签关系分类

1.并列关系(兄弟/平级)

<head>
</head>
<body>
</body>

2.嵌套关系(父子/上下级)

<head>
      <meta charset="UTF-8" />
      <title>音视频测试</title>
</head>

以上是关于HTML5基本介绍的主要内容,如果未能解决你的问题,请参考以下文章

HTML5的基本入门格式介绍

HTML5基本介绍

html5的基本介绍

HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段

如何获取 HTML5 视频中加载的当前片段百分比?

HTML5可预览多图片ajax上传(使用formData传递数据)