什么是HTML

​ HTML其实是 HyperText Markup Language 的缩写，超文本标记语言

HTML的作用

  • 1、首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为 .html，然后再利用浏览器打开

    郑伊健

郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] 

1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。

  • 2、打开之后发现显示的格式不对，不对的原因是因为在纯文本文件中所有文字都是同级别的，浏览器不知道哪些文字代表什么意思。也就是浏览器不知道哪些文字是标题，哪些文字是段落，所以导致了显示的格式不正确

  • 3、正是因为如此，所以 HTML 应用而生。HTML 就只有一个作用，它是专门用来描述文本的语义的。也就是说我们可以利用 HTML 来告诉浏览器哪些是标题，哪些是段落。

    • 这些用于描述其它文本语义的文本，我们称之为标签。并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的

    • 所以正是因为 HTML 的这些标签是专门用来描述其它文本语义的，并且在浏览器中不会被显示出来，所以我们称这些文本为"超文本"，而这些文本又叫做标签，所以 HTML 被称之为"超文本标记语言"

      <h1>郑伊健</h1>

<p>郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。 </p>

<p>1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。</p>

  • 注意事项

    • 虽然我们利用 H1 标签描述一段文本之后，这段文本在浏览器中显示出来会被放大和加粗，看上去我们是利用 HTML 的标签修改了被描述的那段文本的样式。但是一定要记住，HTML只有一个作用，它是专门用来给文本添加语义的，而不是用来修改文本的样式的

  • H1标签它的作用是什么?

    • 错误：H1 标签可以用来修改文字的大小，并且还可以将文字加粗
    • 正确：H1 标签的作用是用来告诉浏览器，哪些文字是标题。也就是 H1 标签是专门用于给指定的文字添加标题语义的

HTML发展史

IETF简介

  • IETF是英文 Internet Engineering Task Force 的缩写，翻译过来就是”互联网工程任务组“
  • IETF 负责定义并管理因特网技术的所有方面。包括用于数据传输的 IP 协议、让域名与 IP 地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

  • W3C 是英文 World Wide Web Consortium 的缩写，翻译过来就是 W3C 理事会或万维网联盟，W3C 是全球互联网最具权威的技术标准化组织
  • W3C于 1994 年 10 月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者 Tim Berners-Lee
  • W3C 负责 web 方面标准的制定，像 HTML、XHTML、CSS、XML 的标准就是由 W3C 来定制的

网页固定格式

  • 1、编写网页和写信一样都有一套规范和要求，这套规范和要求中规定了写信的固定格式
  • 2、写信基本结构
敬爱的湫兮:

      您好!

      正文正文正文正文正文正文正文正文正文正文正文正文

正文正文正文正文正文正文正文正文正文正文正文正文

      此致

敬礼!

                                                             你的朋友 伊健

                                                             2066年6月6日

  • 3、编写网页的步骤：

    3.1、新建一个文本文档

    3.2、利用记事本打开

    3.3、编写THML代码

    3.4、保存并且修改纯文本文档的扩展名为.html

    3.5、利用浏览器打开编写好的文件

  • 4、网页基本结构：

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

    </body>

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

html标签

  • 作用：

    • 用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个 HTML 文档
    • 例如：
      • 指定网站的标题 / 指定网站的小图片
      • 添加网站的 SEO 相关的信息（指定网站的关键字 / 指定网站的描述信息）
      • 外挂一些外部的 css / js 文件
      • 添加一些浏览器适配相关的内容
  • 注意点：
    • 一般情况下，写在 head 标签内部的内容都不会显示给用户查看，也就是说一般情况下写在 head 标签内部的内容我们都看不到

title标签

  • 作用：

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

body标签

  • 作用：

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

meta标签

  • 1、为什么会有乱码现象？

    • 因为在编写网页的时候没有指定字符集
  • 2、如何解决乱码现象？
    • 在 head 标签中添加<meta charset="utf-8" />，指定字符集

HTML标签

HTML标签分类

  • 单标签

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

  • 双标签

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

HTML标签关系分类

  • 并列关系（兄弟 / 平级）
<head></head>

<body></body>
  • 嵌套关系（父子 / 上下级）
<head>

    <meta charset="UTF-8" />

    <title>百度一下，你就知道</title>

</head>

文档声明

  • 什么是文档声明？

    • 由于 HTML 有很多个版本的规范，每个版本的规范之间又有一定的差异。所以为了让浏览器能够正确的编译、解析、渲染我们的网页，我们需要在 HTML 文件的第一行告诉浏览器，当前这个网页是用哪一个版本的HTML规范来编写的。 浏览器只要知道了是用哪一个版本的规范来编写之后，它就能够正确的编译、解析、渲染网页
  • 文档声明格式：
<!DOCTYPE html>
  • 注意事项

    • <!DOCTYPE>声明必须是 HTML 文档的第一行，位于 标签之前
    • <!DOCTYPE> 声明不是 HTML 标签
    • <!DOCTYPE> 声明没有结束标签
    • <!DOCTYPE> 声明对大小写不敏感
    • 这个声明浏览器会看，但是并不是完全依赖于这个声明，浏览器有一套自己的默认的处理机制
      • 不写也能运行
      • H5网页里面用H4也能运行

HTML基础【1】：认识 HTML的更多相关文章

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  5. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  6. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  7. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  8. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  9. .NET基础拾遗（5）多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  10. .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]

    方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...

随机推荐

  1. 更改ORACLE归档路径及归档模式

    更改ORACLE归档路径及归档模式   在ORACLE10g和11g版本,ORACLE默认的日志归档路径为闪回恢复区($ORACLE_BASE/flash_recovery_area).对于这个路径, ...

  2. 21.react 组件通信

    状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...

  3. juqery 回车事件 回车操作 回车搜索

    html <form class="search_wrap" method="post" action=""> <div ...

  4. Luogu 1583 - 魔法照片 - [简单排序题]

    题目链接:https://www.luogu.org/problemnew/show/P1583 题目描述一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人. ...

  5. [dpdk][sysfs][pci] 在dpdk程序中操纵PCI设备

    〇  需求 在DPDK程序运行时,希望能够实时的操纵PCI 网卡设备的驱动绑定与解绑. 本文的目的是为了调查满足以上需求的,kernel提供的,标准的API都有几种,分别是什么.以确定实施方案. 一  ...

  6. python2，python3同时安装时，python3可以安装并升级pip库，python2报错的解决办法

    最近在使用pip安装包的的时候出现下面错误 UnicodeEncodeError: 'ascii' codec can't encode character u'\u258f' 查询资料后发现原因是p ...

  7. Linux之cat的使用

    基本介绍 工作原理 从标准输入读入要 cat 的文件列表,然后逐个打开,读入文件内容,再将内容输出到标准输出上. 使用场景 一次显示整个文件 从键盘创建一个文件 将几个文件合并为一个文件 将一个或多个 ...

  8. mysql新建数据库、新建用户及授权操作

    1.创建数据库create database if not exists test176 default charset utf8 collate utf8_general_ci; #utf8_gen ...

  9. vue.js 之 watch 详解

    接我上篇博客的例子: 在上面代码中,当我们修改 firstName 或 lastName 后,watch 监听每次修改变化的新值,然后计算输出 fullName:此时 watch 的一个缺点是,最初绑 ...

  10. Cocos Creator 资源加载（笔记）

    cc.loader 加载资源动态加载资源要注意两点,一是所有需要通过脚本动态加载的资源,都必须放置在 resources 文件夹或它的子文件夹下.resources 需要在 assets 文件夹中手工 ...