• web前端 --- HTML基础


    HTML基础:

    • 初识html

    • html颜色介绍

    • html规范

    • html结构规范

    一、初始html

    1.web准备介绍:

      w3c:万维网联盟组织,用来制定web标准的机构(组织);

      web标准:制作网页遵循的规范;

      web准备规范的分类:结构标准、表现标准、行为标准

      结构:html。表示:css。行为:Javascript;

    2.web准备总结:

      结构标准:相当于人的身体。html就是用来制作网页的;

      表现标准: 相当于人的衣服。css就是对网页进行美化的;

      行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的;

    3.各浏览器内核:

      IE:trident

      chrome:blink

      火狐:gecho

      safari:webkit

      ps:浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,渲染引擎是兼容性问题出现的根本原因;

    4.HTML介绍

    4.1 HTML的概述

      html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式。比如字体、颜色、大小等。

      超文本:音频、视频、图片称为超文本;

      标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成;

      作用:HTML是负责描述文档语义的语言;

      注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行

      HTML是负责描述文档语义的语言

      html中,除了语义,其他什么都没有。

      html是一个纯文本文件(就是用TXT文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”;

    4.2 HTML的网络术语

    • 网页 :由各种标记组成的一个页面就叫网页。
    • 主页(首页) : 一个网站的起始页面或者导航页面。
    • 标记: <p>称为开始标记 ,</p>称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
    • 元素:<p>内容</p>称为元素.
    • 属性:给每一个标签所做的辅助信息。

    二、HTML颜色介绍

    1.颜色表示:

    • 纯单词表示:red、green、blue、orange、gray等
    • 10进制表示:rgb(255,0,0)
    • 16进制表示:#FF0000、#0000FF、#00FF00等

    2.RGB色彩模式:

    • 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这就是人们常说的三原色原理。
    • RGB三原色也叫加色模式,这是因为当我们把不同光的波长加到一起的时候,可以得到不同的混合色。例:红+绿=黄色,红+蓝=紫色,绿+蓝=青
    • 在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
    • RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。

    三、HTML的规范

    • HTML是一个弱势语言
    • HTML不区分大小写
    • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
    • HTML的结构:
      • 声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
      • head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。
      • body部分:我们所写的代码必须放在此标签內

    1.编写HTML的规范

      a. 所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>

      b. 所有的标记都必须小写;

      c. 所有的标记都必须关闭;

        双边标记:<span></span>

        单边标记:<br> 转成 <br /> <hr> 转成 <hr />,还有<img src=“URL” />

      d. 所有的属性值必须加引号,<h1 id="head"></h1>

      e. 所有的属性必须有值,<input type="radio" checked="checked" />

    2.HTML的基本语法特征

    2.1HTML对换行不敏感,对tab不敏感

      HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。

      也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。

    2.2空白折叠现象

      HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

    四、HTML结构详解

    1.html结构  

      新建HTML文件,输入 html:5,按tab键后,自动生成的代码如下:我们依次来解释一下

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>灯火阑珊</title>
    </head>
    <body>
    欢迎来到灯火阑珊网站
    </body>

      简单说:

    • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
    • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。
    • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
    • <title></title>定义网页标题,在浏览器标题栏显示。 
    • <body></body>之间的文本是可见的网页主体内容

    2.html标签格式

      

    3.html标签语法:

      <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
      <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

       几个重要的属性:

      id:定义标签的唯一ID,HTML文档树中唯一

      class:为html元素定义一个或多个类名(classname)(CSS样式类名)
      style:规定元素的行内样式(CSS样式)

    4.常用标签说明

    4.1 <!DOCTYPE ...>

      说明:<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

      作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

      document.compatMode:

        BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面;

        CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面;

      任何一个标准的HTML页面,第一行一定是以此为开头

      Ps:

      XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。

      XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。

      HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。

      XHTML与HTML4.0的标记基本上一样。

      XHTML是严格的、纯净的HTML

    4.2 头标签(head)

      说明:head标签都放在头部分之间。这里面包含了:<title>、<meta><link>,<style>

    • <title>:指定整个网页的标题,在浏览器最上方显示。
    • <meta>:提供有关页面的基本信息
    • <link>:定义文档与外部资源的关系。
    • <style>:定义内部样式表与网页的关系

     4.3 body标签

      说明:body标签里放的主要就是我们的内容了,这里面包含了基本标签、dic标签、span标签、img标签、a标签等等;

  • 相关阅读:
    Leaflet中实现点击播放视频和关闭视频
    Leaflet中添加标注和popup,并且点击时弹窗显示图片
    Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
    Leaflet中绘制同心圆、多个中心对称多边形、平行四边形网格、矩形网格
    Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
    Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
    Leaflet中使用draw绘制时获取图形的几何信息
    Leaflet中使用Leafletecharts3插件实现航班航线动态模拟
    Leaflet中通过setStyle实现图形样式编辑
    Leaflet中实现矩形闪烁动画效果
  • 原文地址:https://www.cnblogs.com/zhangjunkang/p/9648017.html
Copyright © 2020-2023  润新知