什么是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. ScrollView中嵌套GridView,ListView只显示一行的解决办法

    转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...

  2. sublime 插件总结

    sublime的强大之处在于其丰富的插件,记录一下常用的插件. 1.Color Highlighter(识别代码中的颜色) 默认如下显示 做如下修改,打开插件默认设置,并复制到用户设置,将 " ...

  3. [原创]Scala学习:数组的基本操作,数组进阶操作,多维数组

    1.Scala中提供了一种数据结构-数组,其中存储相同类型的元素的固定大小的连续集合.数组用于存储数据的集合,但它往往是更加有用认为数组作为相同类型的变量的集合 2 声明数组变量: 要使用的程序的数组 ...

  4. android开发之使用上下文菜单

    android中的上下文菜单类似于PC上的鼠标右键单击,不同的是android上没有鼠标这一概念,更谈不上右键单击,在android中,一般是长按某个View,调出上下文菜单.与OptionsMenu ...

  5. 关于“创业者与VC见面的10个不成文细节点”

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Will Wang链接:http://www.zhihu.com/question/19641135/answer/50974 ...

  6. 获取生日对应星座的PHP函数

    PHP 获取指定日期对应的星座名称 /** * 获取指定日期对应星座 * * @param integer $month 月份 1-12 * @param integer $day 日期 1-31 * ...

  7. 6、CC2541修改按键调节广播发送功率例程为持续发送4DB的蓝牙基站

    一.目的 在 OSAL操作系统-实验31 从机广播功率修改-(20141029更新).zip 基础上进行修改,该工程是通过5向按键的上下按键来控制广播功率的加减,总共有4个档位.我们的目的是直接用最高 ...

  8. # electron-vue 尝试做个网易云音乐

    当跑起来electron第一刻 我发现这个浏览器头是不是有点丑 是不是可以隐藏起来呢,答案当然是可以的 src/main/index.js mainWindow = new BrowserWindow ...

  9. Hibernate处理事务并发问题

    在Hibernate中设置事务的隔离级别.<property name="hibernate.connection.isolation">2</property& ...

  10. win10安装git

    Git官网下载:https://git-scm.com/download 选择win系统,下载.然后选择安装路径,一路next.安装成功后 打开cmd 输入 git --version 配置信息 设置 ...