什么是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. git 的相关知识

    参考文章 git checkout HEAD <file> :  master/HEAD -> index -> work directory index 暂存区有两行信息.分 ...

  2. 【C++/函数】实验2

    1.实验内容 函数声明和函数定义: 形参和实参: 主调函数把实参的值传送给被调函数的形参从而实现主调函数向被调函数的数据传送. 形参:形式参数,表示主调函数与被调函数之间的联系.标识了在形参出现的位置 ...

  3. java学习（二）--- 变量类型

    变量声明 type identifier [ = value][, identifier [= value] ...] ; 局部变量: 1.局部变量声明在方法.构造方法.语句块中 2.局部变量在方法. ...

  4. Codeforces 1114 - A/B/C/D/E/F - (Undone)

    链接:http://codeforces.com/contest/1114 A - Got Any Grapes? 题意:甲乙丙三个人吃葡萄,总共有三种葡萄:绿葡萄.紫葡萄和黑葡萄,甲乙丙三个人至少要 ...

  5. RoR - MetaProgramming

    ruby是动态语言,它有动态语言的优势与劣势 动态语言,像python与ruby 你不用提前去定义method - they need to only be "found" whe ...

  6. Mac快捷键大全及cheatsheet插件

    常用快捷键 CheatSheet 在微信上看到一篇文章分享了一款小软件,觉得有必要推荐一下.名叫CheatSheet.如果你想知道某程序的所有快捷键,只需在Mac上安装CheatSheet,然后长按住 ...

  7. postman 做接口测试之学习笔记

    Postman 之前是作为Chrome 的一个插件,现在要下载应用才能使用. 以下是postman 的界面: 各个功能区的使用如下: 快捷区: 快捷区提供常用的操作入口,包括运行收藏夹的一组测试数据, ...

  8. HttpWebRequest请求http1.1的chunked的解析问题记录

    问题:我的请求获取不到URL对应的内容(换个浏览器可以). 第一步对比wirshark截包看HTTP请求头,发现我这缺失一部分请求头. 对着官方文档添加即可.https://msdn.microsof ...

  9. Python基础(十二) 类私有成员和保护成员

    python中的protected和private python中用 _var :变量名前一个下划线来定义,此变量为保护成员protected,只有类及其子类可以访问.此变量不能通过from XXX ...

  10. caffe运行报错：datum channel>0(0:0)

    caffe在运行的时候报错:datum channel>0(0:0) 错误原因:数据通道错误,caffe不能识别 解决方案:不告诉你