HTML相关
web指引
- 结构标准:相当于人的身体,html就是用来制作网页的
- 表现标准:相当于人的衣服,css是对网页进行美化的
- 行为标准:相当于人的动作,JS就是让网页动起来,具有生命力的
HTML介绍
html全称Hyper Text Mackeup Language,译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的现实方式,比如字体,颜色,大小等
- 超文本:音频,视频,图片
- 标记:<英文单词或字母>称之标记,一个HTML页面都是由各种标记组成
- 作用:HTML是负责描述文档语义的语言
注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接有浏览器解析执行,HTML中除了语义,其他什么都没有
HTML中的网络术语
- 网页:有各种标记组成的一个页面就叫网页
- 主页(首页):一个网站的起始页或者导航页面
- 标记:<p>称为开始标记,</p>称为结束标记,也叫标签,每个标签都规定好了特殊的意义
- 元素:<p>内容</p>称为元素
- 属性:给每一个标签所做的辅助信息
HTML的规范
- 一个弱势语言
- 不区分大小写
- 后缀名为html或者htm
组成结构
- 声明部分:用来告诉浏览器要使用哪个标准
- head部分:将页面的一些额外信息告诉服务器,不会显示在页面上
- body部分:我们所写的代码必须放在此标签内
编写规范
- 所有标记元素都要正确的嵌套,不能交叉嵌套,正确写法:<h1><font></font></h1>
- 标记必须小写
- 标记都必须关闭
- 双边标记:<span></span>
- 单边标记:<br>转成<br />,<hr>转成</hr>,<img src = "URL" />
- 属性值必须加引号,<h1 id="head"></h1>
- 属性必须有值.<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标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。