HTML相关

web指引

• 结构标准:相当于人的身体,html就是用来制作网页的
• 表现标准:相当于人的衣服,css是对网页进行美化的
• 行为标准:相当于人的动作,JS就是让网页动起来,具有生命力的

HTML介绍

html全称Hyper Text Mackeup Language,译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的现实方式,比如字体,颜色,大小等

• 超文本:音频,视频,图片
• 标记:<英文单词或字母>称之标记,一个HTML页面都是由各种标记组成
• 作用:HTML是负责描述文档语义的语言

注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接有浏览器解析执行,HTML中除了语义,其他什么都没有

HTML中的网络术语

• 网页:有各种标记组成的一个页面就叫网页
• 主页(首页):一个网站的起始页或者导航页面
• 标记:<p>称为开始标记,</p>称为结束标记,也叫标签,每个标签都规定好了特殊的意义
• 元素:<p>内容</p>称为元素
• 属性:给每一个标签所做的辅助信息

HTML的规范

• 一个弱势语言
• 不区分大小写
• 后缀名为html或者htm

组成结构

1. 声明部分:用来告诉浏览器要使用哪个标准
2. head部分:将页面的一些额外信息告诉服务器,不会显示在页面上
3. body部分:我们所写的代码必须放在此标签内

编写规范

1. 所有标记元素都要正确的嵌套,不能交叉嵌套,正确写法:<h1><font></font></h1>
2. 标记必须小写
3. 标记都必须关闭
4. 双边标记:<span></span>
5. 单边标记:<br>转成<br />,<hr>转成</hr>,<img src = "URL" />
6. 属性值必须加引号,<h1 id="head"></h1>
7. 属性必须有值.<input type="radio" checked="checked" />

基本语法特征

• 对换行/tab不敏感
• HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
• 也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。
• 空白折叠现象
• 所有文字之间,如有空格,换行,tab都将折叠尾一个空格显示
• 标签要严格封闭

结构详解

结构详解文档声明头

开头的第一行就是文档声明头,DocType Declaration,简称DTD,用来告知浏览器文档使用哪种HTM或XHTML规范

<!DOCTYPE...

PS:

• XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。
• XHTML的主要目的是为了取代HTML，也可以理解为HTML的升级版。
• HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
• XHTML与HTML4.0的标记基本上一样。
• XHTML是严格的、纯净的HTML

头标签

head标签都放在头部分之间,包含了:

• <title>:指定整个网页的标题，在浏览器最上方显示。
• <meta>:提供有关页面的基本信息
• <link>:定义文档与外部资源的关系
• <style>:定义内部样式表与网页的关系

Meta标签

• 元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
• 位于文档的头部,不包含任何内容
• 提供的信息用户是不可见的

两部分组成:

1.1 http_equiv属性:用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=https://www.baiducom.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

1.2 name属性:主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="description" content="230万用户正享用阿里云提供的云服务器、云数据库、云存储、CDN、大数据等服务，7x24小时售后支持，专业快速备案，助企业无忧上云。">
<meta name="keyword" content="阿里云，云数据库，云服务器，云计算，域名注册">

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

效果如下:

<meta name=viewport content="width=device-width, initial-scale=1">


这个标签是让网页支持移动端,移动设备优先

title标签

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。