前端开发【第一篇: HTML】
一、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】的更多相关文章
- iOS开发——高级技术精选&底层开发之越狱开发第一篇
底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...
- Android百度地图开发-第一篇：申请、搭建百度地图
一.前言 这是第一篇关于Android使用百度地图的学习记录,主要记录: 1.在百度地图开发者平台上申请API Key. 2.在自己的应用中加入百度地图的Android版SDK. 3.在自己的应用中显 ...
- Swift开发第一篇——异常处理及断言
本篇分两部分: 1.错误和异常处理 2.Swift 中的断言 1.错误和异常处理 在 OC 开发中,我们通常会将 error 置为 nil NSError *error; BOOL success = ...
- android 串口开发第一篇:搭建ndk开发环境以及第一个jni调用程序
一:ndk环境搭建 1:开发环境 我使用的是android studio 2.3.3版本,搭建ndk开发环境比较简单,打开File----Settings----Appearance&Beha ...
- PowerBI开发 第一篇：设计PowerBI报表
PowerBI是微软新一代的交互式报表工具,把相关的静态数据转换为酷炫的可视化的,能够根据filter条件,对数据执行动态筛选,从不同的角度和粒度上分析数据.PowerBI主要由两部分组成:Power ...
- Python开发 第一篇 python的前世今生
Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- python开发第一篇：初识python
一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...
- 微信支付之JSAPI开发第一篇-基本概念
申请权限 具体步骤就不说了,进入微信支付商户平台进行申请认证,认证成功后在微信公众号后台会有个微信支付的菜单按钮,点击后会有如下的信息 配置 在进行微信支付开发之前,必须进行一些必要的配置,如果这些配 ...
- 团队开发——第一篇scrum报告
一.角色介绍 产品负责人(兼项目经理PM):王雪青 scrum master: 陆宇 开发团队:赵建松.张文冬.徐擎天 二.product backlog 1.买家登录后,显示各个小吃摊的信息,主要是 ...
- 基于GBT28181：SIP协议组件开发-----------第一篇环境搭建
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3930018.html,qq:1269122125. SIP协议在安 ...
随机推荐
- Rest和Restful & http
Rest :Representational State Transfer 表述性状态转移 Restful: Rest+ful形容词,遵循Rest原则的应用程序或设计 Rest原则: 1. 网络上的所 ...
- Collections.sort 的日期排序
public static void main(String[] args) throws ParseException { // sort降序排列 List<Date> dates = ...
- Eclipse创建Maven Web项目后更改Servlet版本
Eclipse创建Maven Web项目后更改Servlet版本 1.场景基于Eclipse通过maven-archetype-webapp原型创建一个Web项目后,其默认Servlet版本是2.3, ...
- 0.2：Game and Art
文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 通过上一节的学习,我们对游戏美术和游戏开发已经有了比较基本的了解.那么,该 ...
- 修改mongodb(带仲裁节点的副本集)各机器端口
需求:因为端口调整,需要改变副本的备份集 1.查看当前的副本集信息 [root@localhost bin]# ./mongo 192.168.1.134:10001 repltest:PRIMARY ...
- poj 3294 Life Forms - 后缀数组 - 二分答案
题目传送门 传送门I 传送门II 题目大意 给定$n$个串,询问所有出现在严格大于$\frac{n}{2}$个串的最长串.不存在输出'?' 用奇怪的字符把它们连接起来.然后求sa,hei,二分答案,按 ...
- Guitar Pro特殊符号讲解之附点音符
今天要讲解Guitar Pro里附点音符的作用,附点音符也是大家在编曲做谱的时候,经常需要使用的一个符号,它在Guitar Pro分为附点和双附点. 附点:记在音符符头右边的圆点,用以增长音符的时值. ...
- FL studio钢琴卷工具简介
FL studio中的钢琴卷工具在业内各编曲软件中享有当之无愧的声誉.钢琴卷是一款将音符和自动数据发送到钢琴卷的频道相关联的插件.而钢琴卷的这个操作运行过程被称为“排序”. 下面给大家介绍讲解钢琴卷中 ...
- MyBio小隐本记注册破解
既然开始了,就把这一个系列的都破了算了,这次主角小隐本记MyBio 和WDTP的原理是差不多的,先把软件界面换成e文,然后写了15个记录后提示注册,一样的路子,直接跳过注册窗口的弹出就好了 然后查壳一 ...
- idea maven列表有问题的
idea maven列表有问题的,覆盖 C:\Users\用户名\.IntelliJIdea2017.2\system\Maven\Indices路径大致在这里 文件为 Indices.rar ...