前端开发【第一篇: 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,因为页面加载自上而下
最新文章
- 随笔分类 - [C#6] 新增特性
- JQuery 获取json数据$.getJSON方法的实例代码
- [BZOJ 2178] 圆的面积并 【Simpson积分】
- servlet+ajax+json字符串后台传入,前端解析并把数据循环填入表格实例
- WPF_DatePiker控件的禁止输入
- jQuery系列 第七章 jQuery框架DOM操作
- 第二课android中activity启动模式
- SSM框架中写sql在xml文件中
- react学习目录
- Python3.0科学计算学习之绘图(一)
- iOS证书申请及使用详细说明
- Android图片采样缩放
- gradle的安装配置成功标志
- BootStrapTable 文档
- linux mutt的安装和使用
- REST Framework 的用户认证组件
- 二、Linux学习之centOS的的setup
- 温度测量【RTD】
- javaweb前后台中文参数乱码
- 解决mac上matplotlib中文无法显示问题
热门文章
- xml 和 json 序列化忽略字段
- 第八节 JS运动基础
- wireshark抓包结果很多[TCP Retransmission]怎么办?
- Docker Kubernetes Service 代理服务创建
- markdown的css样式(自己写的)
- Python3 tkinter基础 OptionMenu 将list导入下拉列表中
- RPM Yum 相关命令及参数
- 【做题】agc006e - Rotate 3x3——分析&;思维
- PTA编程总结3—抓老鼠啊~亏了还是赚了?
- CSS布局学习(三) - Normal Flow 正常布局流(官网直译)