一、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. mongodb认识

    MongoDB安装 一.软件的获取地址 1.使用本安装文档提供的安装软件 本安装文档提供的软件为window版本的64位MongoDB的安装包 2.在官网上下载所需的安装软件 下载地址:https:/ ...

  2. SpringMvc @PathVariable 工作原理

     SpringMvc  @PathVariable 工作原理: 友情提示:查看清晰大图,请鼠标右击图片后,选择新标签页中打开. 相关对象: DispatcherServlet DefaultAnnot ...

  3. python 匿名函数捕获变量值 （执行时的值）

  4. CSS 文件引入

    CSS 文件引入 <html> <head> <!-- link标签引用其他文件.rel="stylesheet" 引用css.href=" ...

  5. Heroku 云服务部署流程

    部署操作: heroic create bluefocus mkdir heroku && cd heroku --------------------- git init herok ...

  6. windows升级node

    之前用的node版本太低,不兼容webpack4.x,需要升级,网上搜索了许多方法,发现在windows下行不通 找到的教程都说全局安装node下的一个名为n的模块,这个模块是node专门用于版本管理 ...

  7. 获取添加数据的自增ID

    $id= DB::select("select auto_increment from information_schema.`TABLES` where table_name='stude ...

  8. Qt 中用QProcess调用cmd命令

    项目做到一定阶段,常常须要在原来的project上调用外部程序. Qt为此提供了QProcess类,QProcess可用于完毕启动外部程序,并与之交互通信. 基本用法: QProcess p(0); ...

  9. nodejs创建文件

    var fs = require('fs'); fs.writeFile(path + "test.txt", "hello world!", function ...

  10. Symbol Vs String

    最重要区别 1 symbol存入内存后,始终存在,如果不进行垃圾收集,可能导致内存泄漏. String只会存在于某个创建它的作用域内.即有生命周期的. 2.唯一性. \\进入控制台 >" ...