什么是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. java爬取网站信息和url实例

    https://blog.csdn.net/weixin_38409425/article/details/78616688(出自此為博主) 具體代碼如下: import java.io.Buffer ...

  2. git链接到远程github上

    Git链接到自己的Github(1)简单的开始 好长时间没上来弄东西了,今天回来先开始弄下Git,之后再继续写uboot与kernel的编译,在版本控制下更加宏观地观察每次的变化. 1.在ubuntu ...

  3. Django1.11加载静态文件

    Django版本1.11网站通常需要js,css,images等文件,在Django中,我们把这些文件称为“静态文件”(static files).Django提供django.contrib.sta ...

  4. day20 二十、加密模块、操作配置文件、操作shell命令、xml模块

    一.加密模块 1.hashlib模块:加密 ①有解密的加密方式 ②无解密的加密方式:碰撞检查 -- 1)不同数据加密后的结果一定不一致 -- 2)相同数据的加密结果一定是一致的 import hash ...

  5. python-获取当前工作路径

    1.sys.argv[0] import sys print sys.argv[0]#获得的是当前执行脚本的位置(若在命令行执行的该命令,则为空) 运行结果(在python脚本中执行的结果): F:/ ...

  6. MVC的HTTP请求处理过程(IIS应用程序池、CLR线程池)

    主要内容 本文讲解的是:服务器接受Http Request请求之后,是如何进入.Net CLR,从而进一步操作的. 我们大家都知道,IIS必须先接受请求,然后才能有机会进入CLR,但对请求(reque ...

  7. Linux：dd命令

    dd:“data duplicator” 意为数据复印机,它可以用来拷贝和转换数据. 备份和恢复整个硬盘或分区 备份MBR(主引导记录) 在ASCII和EBCDIC格式之间转换 也可以为Linux内核 ...

  8. NodeJS笔记（二）- 修改模块默认保存路径

    参考:nodejs prefix(全局)和cache(缓存)windows下设置 假设nodejs根目录为“D:\nodejs” 如下所示,新建“node_cache”文件夹用来存放全局缓存 该路径下 ...

  9. Ubuntu 使用命令行连接无线网

    一.查看可以使用的无线网: nmcli dev wifi 二.连接无线网: nmcli dev wifi connect ‘essid’(网络名称) password ‘password’(密码) 可 ...

  10. python摸爬滚打之day026----网络通信流程

    1.了解概念 C\S架构: 客户端(client)和服务端(server)之间的通信. B\S架构: 浏览器(browser)和服务端之间的通信. 为什么只用一个浏览器就可以访问很多网站?  这是因为 ...