一、web标准
<!--
W3C: 万维网联盟组织,用来指定web标准的组织
web标准:制作网页遵循的规范
web标准的分类: 结构标准 表现标准 行为标准
对应:结构html 表现css 行为JavaScript
html: 制作网页的
css: 对网页进行美化
JavaScript: 让网页动起来
-->
二、浏览器扫盲
<!--
常用浏览器内核
IE : trident
chrome : blink
Firefox : gecko
safari : webkit
浏览器内核也及时浏览器所采用的的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容及页面的格式信息,渲染引擎是兼容性问题出现的根本原因
-->
三、html介绍
<!--
概述:
html全称Hyper Text Mark-up Language 超文本标记语言 它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式,比如字体、颜色、大小等
超文本: 音频 视频 图片称为超文本
标记: <英文单词或字母>称为标记 一个html页面由各种标记组成
作用: html是负责描述文档语义的语言
PS: html语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),直接由浏览器解析执行
html语义:
html是一个纯文本的文件,用一些标签描述文字的语义,这些标签在浏览器里面是看不到的,所以称为超文本标记语言
html网络术语:
网页: 由各种标记组成的一个页面就是网页
主页: 一个网站的起始页或者导航页面
标记: <p>为起始标记 </p>为结束标记 也叫标签,每个标签对都规定好了特殊含义
元素: <p> 内容 </p> 称为元素
-->
四、html规范
<!--
html是一个弱势语言
html不区分大小写
html页面的后缀名是以html或者htm(有些系统不支持后缀名长度超过3个字符,比如dos)
html的结构:
声明部分:用来告诉浏览器这个页面使用的哪个标准
head部分:将页面的一些额外信息告诉服务器,不会显示在页面上
body部分:我们所写的代码必须放在此标签内
书写html规范:
1、所有标记元素都要正确的嵌套,不能交叉嵌套 正确写法举例:<h1><font></font></h1>
2、所有标记都必须小写
3、所有标记都必须关闭
双边标记:<span></span>
单边标记:<br> 转成 <br /> <hr> 转成 <hr />,还有<img src=“URL” />
4、所有的属性值必须加引号 <h1 id="head"></h1>
5、所有的属性必须有值 <input type="radio" checked="checked" />
html对换行不敏感,对tab不敏感
html值在乎标签的嵌套结构,嵌套的关系,谁嵌套了谁,谁被谁嵌套,和换行,和tab无关,换不换行,tab不tab都不影响页面结构
也就是说,html不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,良好的缩进,可以使代码更易读
HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
-->
五、html结构介绍
<!-- <!DOCTYPE html> 主要作用:用来告诉浏览器这个页面使用那个标准 -->
<!DOCTYPE html>
<html lang="en">
<!-- <head> </head> 主要作用:html页面头部信息设置,不会显示在网页上-->
<head>
<!-- <meta charset="UTF-8"> 设置 -->
<meta charset="UTF-8">
<title>我的第一个html页面</title>
</head>
<!-- <body> </body> 主要作用:页面显示部分,即数据部分,显示到网页上的-->
<body>
<h1>
html:超文本标记语言
</h1>
</body>
</html>
<!--
1、文档声明头
<!DOCTYPE html> 开头这一行,就是文档声明头,DocType Declaration 简称DTD。此标签可以告知浏览器文档使用哪种html或xhtml规范
XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。
XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。
HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML
2、head标签,包含<title> <meta> <link> <style>
<title> 指定整个网页的标题,在浏览器最上方显示
<meta> 提供有关页面的基本信息
<link> 定义文档与外部资源的关系
<style> 定义内部样式与网页的关系
2.1 meta标签
元素可提供有关页面的原信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。
提供的信息是用户不可见的
两个属性:http-equiv name 不同的属性有不同的参数值,这些不同的参数值就实现了不同的网页功能
2.1.1 http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.1.2 name属性
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO(search engine optimization,搜索引擎优化)。
-->