一、HTML初识

 1.什么是HTML？

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。

 2、网页的组成

我们平时看到的网页一般由3个部分组成：

  • HTML（Hypertext Markup Language）
  • CSS（Cascade Style Sheets）
  • JavaScript

上面3个分别可以理解为：视图、表现、行为(HTML可以理解为一个动画小人，CSS为它穿上美丽的衣服，JavaScript让它变的可以跳舞）

3、html文档树形结构图：

4、什么是标签

  • 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
  • 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
  • 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

5、标签的属性

  • 通常是以键值对形式出现的. 例如 name="alex"
  • 属性只能出现在开始标签 或 自闭和标签中.
  • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

6、<!DOCTYPE html>标签

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在
W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility 
Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars
mode)，这就是二者最简单的区别。
      W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，
很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以
前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode
和Standars mode，两种渲染方法共存在一个浏览器上。

window.top.document.compatMode：

//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
<script>

alert(window.top.document.compatMode) 查看当前浏览器渲染模式
</script>

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

7、head标签

<meta>标签

#meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

<meta charset="UTF-8">

1、name属性

主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="老男孩">    <!-- 关键字设定 -->
<meta name="description" content="描述性内容:这是一个测试页面">       <!-- 描述网站或者页面 -->

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如搜狗：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

2、http-equiv属性

顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;Url=http://www.fuzegame.com">   <!-- 设置关键字，刷新时间和页面跳转  设置页面每2秒刷新一次 Url是指页面刷新2秒后，跳转到指定的Url -->

3.兼容

<meta http-equiv="x-ua-compatible " content="IE=EmulateIE7">

title标签

<title>test</title>    <!-- 网页头部标题 -->

stytle标签

一般建议css放在head中不管是引用还是直接在当前页面定义css,因为页面加载自上而下

前端开发【第一篇: HTML】的更多相关文章

  1. iOS开发——高级技术精选&底层开发之越狱开发第一篇

    底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...

  2. Android百度地图开发-第一篇：申请、搭建百度地图

    一.前言 这是第一篇关于Android使用百度地图的学习记录,主要记录: 1.在百度地图开发者平台上申请API Key. 2.在自己的应用中加入百度地图的Android版SDK. 3.在自己的应用中显 ...

  3. Swift开发第一篇——异常处理及断言

    本篇分两部分: 1.错误和异常处理 2.Swift 中的断言 1.错误和异常处理 在 OC 开发中,我们通常会将 error 置为 nil NSError *error; BOOL success = ...

  4. android 串口开发第一篇:搭建ndk开发环境以及第一个jni调用程序

    一:ndk环境搭建 1:开发环境 我使用的是android studio 2.3.3版本,搭建ndk开发环境比较简单,打开File----Settings----Appearance&Beha ...

  5. PowerBI开发 第一篇：设计PowerBI报表

    PowerBI是微软新一代的交互式报表工具,把相关的静态数据转换为酷炫的可视化的,能够根据filter条件,对数据执行动态筛选,从不同的角度和粒度上分析数据.PowerBI主要由两部分组成:Power ...

  6. Python开发 第一篇 python的前世今生

    Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  7. python开发第一篇：初识python

    一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  8. 微信支付之JSAPI开发第一篇-基本概念

    申请权限 具体步骤就不说了,进入微信支付商户平台进行申请认证,认证成功后在微信公众号后台会有个微信支付的菜单按钮,点击后会有如下的信息 配置 在进行微信支付开发之前,必须进行一些必要的配置,如果这些配 ...

  9. 团队开发——第一篇scrum报告

    一.角色介绍 产品负责人(兼项目经理PM):王雪青 scrum master: 陆宇 开发团队:赵建松.张文冬.徐擎天 二.product backlog 1.买家登录后,显示各个小吃摊的信息,主要是 ...

  10. 基于GBT28181：SIP协议组件开发-----------第一篇环境搭建

    原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3930018.html,qq:1269122125. SIP协议在安 ...

随机推荐

  1. Python Logging模块 输出日志颜色、过期清理和日志滚动备份

    # coding:utf-8 import logging from logging.handlers import RotatingFileHandler # 按文件大小滚动备份 import co ...

  2. Mysql模糊查询like效率，以及更高效的写法

    在使用msyql进行模糊查询的时候,很自然的会用到like语句,通常情况下,在数据量小的时候,不容易看出查询的效率,但在数据量达到百万级,千万级的时候,查询的效率就很容易显现出来.这个时候查询的效率就 ...

  3. vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用

    vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用 Stepper 步进器 的默认值有没有弄过的,看了组件只能默认数字的,传字符串进去不起作用<div slot ...

  4. JavaScript Dom0 Dom1

    行为 样式 结构相分离的页面 JS        CSS       HTML DOM 0写法 <!DOCTYPE html> <html lang="en"&g ...

  5. activiti5/6 系列之--流程复用技术 callActivity

    定义:当流程执行到callActivity,会创建一个新分支,它是到达调用节点的流程的分支. 这个分支会用来执行子流程,默认创建并行子流程,就像一个普通的流程. 上级流程会等待子流程完成,然后才会继续 ...

  6. docker原理与上帝进程

    做个笔记, 先水一会. 虚拟机指的是: 在软件的层面上通过模拟硬件进行的输入输出. docker原理:docker就是一个linux系统的进程, 它通过 Linux 的 namespaces 对不同的 ...

  7. Java虚拟机内存分配详解

    简介 了解Java虚拟机内存分布的好处 1.了解Java内存管理的细节,有助于程序员编写出性能更好的程序.比如,在新的线程创建时,JVM会为每个线程创建一个专属的栈 (stack),其栈是先进后出的数 ...

  8. 超简单的SpringBoot整合mybatis

      1. 创建项目结构 2. 编写application.yml/application.properties配置文件 3. 启动类开启映射包扫描 4. 接口测试 创建项目结构     导入依赖 &l ...

  9. Arch pacman 常用命令

    更新系统 pacman -Syu :对整个系统进行更新 如果你已经使用pacman -Sy将本地的包数据库与远程的仓库进行了同步,也可以只执行 pacman -Su 安装包 ➔ pacman -S 包 ...

  10. P4512 【模板】多项式除法

    思路 多项式除法板子 多项式除法 给出\(A(x)\)和\(B(x)\),求一个\(n-m\)次的多项式\(D(x)\),一个\(m-1\)次多项式\(R(x)\),满足 \[ A(x)=B(x)D( ...