HTML5入门以及常用标签

HTML5入门以及常用标签

今日内容

• web技术简介
• 什么HTML？
• W3C
• 浏览器
• 第一个HTML网页

web技术简介

web技术中的三大内容

• HTML【基本内容】
• CSS【界面美化】
• JavaScript【动作交互】

什么是HTML

• HTML：Hyper Test Markup Language【超文本标记语言】
• HTML 指的是超文本标记语言: HyperText Markup Language
• HTML 不是一种编程语言，而是一种标记语言
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面
• 菜鸟教程：www.runoob.com

W3C

• W3C 指万维网联盟（World Wide Web Consortium）

• W3C 创建于1994年10月

• W3C 由 Tim Berners-Lee 创建

• W3C 是一个会员组织

• W3C 的工作是对 web 进行标准化

• W3C 创建并维护 WWW 标准

• W3C 标准被称为 W3C 推荐（W3C 规范）

  W3C 是如何创建的？

  • 万维网（World Wide Web）是作为欧洲核子研究组织的一个项目发展起来的，在那里 Tim Berners-Lee 开发出万维网的雏形。

  • Tim Berners-Lee - 万维网的发明人 - 目前是万维网联盟的主任。

  • W3C 在 1994 年被创建的目的是，为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作，并得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持。

浏览器

• 浏览器是网页的载体，网页需要在浏览器中使用

常用浏览器

• 

浏览器请求网站的过程原理

*

上网三大组成部分

• 客户端【浏览器】
• 服务器
• HTTP服务

第一个HTML网页

• 第一部分：文档声明： //可以省去，但是不建议
• 第二部分：网页主体====，在头部中写配置文件
• 文档内容
  • 头部： 写配置文件
  • 体部：写网页内容

HTML5常用标签

什么是标签

• 在HTML中，使用<>来包裹，是具有特殊含义的单词；
• 作用：使文本内容以特定的格式显示；

标签的分类

• 双标签：例如====
• 单标签：例如==
  ==自结束标签

如何学习HTML5

• 菜鸟教程：www.runoob.com
• W3school：www.w3school.com

常用标签逐一讲解

• 标题标签：

  -

  • 使用文本内容以标题的格式表示
    *

• 注释标签：

  • 对于代码功能的解释说明，不想使用户看到，使用注释标签注释起来
  • 快捷键：ctrl+/ 如果不选中注释内容，会把光标所在行全部注释，选中后只会注释掉选中的内容

• 页中生成横线：

  ---

  ，是一个单标签，用于分割内容
  • “

    ---

    ” 改变横线的颜色
  • “

    ---

    ”改变横线的大小
  • “

    ---

    ”改变横线的大小和颜色

• 快速复制光标所在行：Ctrl+d

• HTML中的颜色：

  • 英文字母：red 、blue、 yellow
  • 十六进制 #000000,#+6个数字
  • RGB表示法：rgb(255.255.0) 三个十进制数，范围是0-255

• 使内容居中显示：

  要居中的内容

• 段落标签：

  内容

  • 作用：将文本内容分为多段
  • 选择一整行快捷键：光标定位在行首 按住shift+end

• 换行标签：
一个br换一行，写在要换行的文字末尾

• 字体标签：对字体进行设置

  • • img 单标签
    • src：指定图片路径
    • width：指定宽度，单位px
    • height：指定高度，单位px
      • 设置宽和高时，一般只设置一个属性，另外一个属性会根据原始图片的比例自缩放
      • 可以设置百分比，依赖于图片所在的范围【容器】
    • 作用：在文档中引入图片
    • 路径：来自网络资源，来自本地（相对位置/绝对位置）
      • 引入网络资源
      • 相对位置
      • 绝对位置

  • 超链接标签：

    • href：指明跳转路径
    • 引入网络资源，需要添加HTTP协议头
      • 文字
    • 引入本地

  • 列表标签：

    • 无序列表：
      • 无序列表不标明顺序
    • 有序列表：
      • 有序列表自动添加序号

  • 自定义列表：

    • 自定义列表以

      标签开始。每个自定义列表项以

      开始。每个自定义列表项的定义以

      开始。

      • dl：自定义列表

      • dt：自定义列表头

      • dd：自定义列表项

      • 水果

        ``

        苹果

        `

        香蕉

  • 空格标签：