您的位置: 首页  >  文章  >  HTML5入门以及常用标签

HTML5入门以及常用标签

分类: 文章 • 2023-11-14 19:16:58

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）的支持。

浏览器

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

常用浏览器

  • HTML5入门以及常用标签

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

*HTML5入门以及常用标签

上网三大组成部分

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

第一个HTML网页

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

HTML5常用标签

什么是标签

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

标签的分类

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

如何学习HTML5

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

常用标签逐一讲解

  • 标题标签：<h1>-<h6>

    • 使用文本内容以标题的格式表示
      *HTML5入门以及常用标签HTML5入门以及常用标签

  • 注释标签：

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

  • 页中生成横线：<hr/>，是一个单标签，用于分割内容

    • “<hr color = "颜色 "/>” 改变横线的颜色
    • “<hr size ="大小"/>”改变横线的大小
    • “<hr color="颜色" size="大小"/>”改变横线的大小和颜色

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

  • HTML中的颜色：

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

  • 使内容居中显示：<center>要居中的内容</center>

  • 段落标签：<p>内容</p>

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

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

  • 字体标签：<font></font>对字体进行设置

    • <font size="大小" color="颜色" face="字体样式”>文字</font>
      • size：设置字体小
      • color：设置字体颜色
      • face：设置字体样式

  • 文本格式化【一般的字体格式都是使用双标签，样式之间可以相互嵌套】

    • 加粗： b标签 <b></b>
    • 倾斜： i标签 <i></i>
    • 加粗并倾斜：<b><i></i></b>
    • 下标：sub标签 <sub></sub>
    • 上标：sup标签 <sup></sup>
    • 加粗：<strong></strong>
    • 删除线：<del></del>

  • 图片标签：<img src="图片路径" alt="提示" width="宽度px" height="高度px">

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

  • 超链接标签：

    • href：指明跳转路径
    • 引入网络资源，需要添加HTTP协议头
      • <a href="http://www.baidu.com">文字</a>
    • 引入本地
      • <a href="本地相对位置"></a>

  • 列表标签：

    • 无序列表：<ul><li></li></ul>
      • 无序列表不标明顺序
    • 有序列表：<ol><li></li></ol>
      • 有序列表自动添加序号

  • 自定义列表：

    • 自定义列表以

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

      • dl：自定义列表

      • dt：自定义列表头

      • dd：自定义列表项

      • <dl>

        <dt>水果</dt>

        ``

        苹果
        `

        <dd>香蕉</dd>

        </dl>

  • 空格标签：&nbsp;

相关推荐