初识HTML

一.HTML的概述

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

　　超文本:音频,视频,图片称为超文本

　　标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成

作用:HTML是负责描述文档语义的语言

注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行

1.HTML是负责描述文档语义的语言

HTML中,除了语义,其他什么都没有

(1).HTML是一个纯文本文件(就是用txt文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为"超文本",所以就是"超文本标记语言"了;HTML中有标签对一说,这些个标签对能够给文本不同的语义

(2).面试的时候问你,h1标签有什么作用

　　正确答案:给文本增加主标题的语义

　　错误答案:给文字加粗,加黑,变大

(3).HTML的网络术语

　　网页:由各种标记组成的一个页面就叫网页

　　主页(首页):一个网站的起始页面或者导航页面

　　标记:<p>称为开始标记,</p>称为结束标记,也叫标签.每个标签都规定好了特殊的含义

　　元素:<p>内容</p>称为元素

　　属性:给每一个标签所做的辅助信息

二.HTML颜色介绍

1.颜色表示:

　　纯单词表示:red,green,blue,orange,gray等

　　10进制表示:rgb(255,0,0)

　　16进制表示:#FF0000,#0000FF,#00FF00等

我们先要知道几个纯单词的颜色,CSS中会有详细的10进制和16进制的表示

2.RGB色彩模式:

　　自然界中所有的颜色都可以用红,绿,蓝(RGB)这三种颜色的波长的不同强度组和而得,这就是人们常说的三原色原理

　　RGB三原色也叫加色模式,这是因为我们把不同的波长加到一起的时候,可以得到不同的混合色.例如:红+绿=黄,红+蓝=紫,绿+蓝=青

　　在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色,所有显示设备都采用的是RGB色彩模式

　　RGB各有256级(0-255)亮度,256级的RGB色彩总共能组和出约1678万种色彩,即256×256×256=16777216.

三.HTML的规范

HTML是一个弱势语言

HTML不区分大小写

HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)

HTML的结构:

　　声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准,是HTML5标准

　　head部分:将页面的一些额外信息告诉服务器,不会显示在页面上.

　　body部分:我们所写的代码必须放在此标签内

1.编写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" />

2.HTML的基本语法特征

(1).HTML对换行不敏感,对tab不敏感

HTML只在乎标签的嵌套结构,嵌套的关系.谁嵌套了谁,谁被谁嵌套了,和换行,tab无关.换不换行,tab不tab,都不影响页面的结构.也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系.但是,我们发现有良好的缩进,代码更易读.要求大家都正确缩进标签

(2).空白折叠现象:

HTML中所有的文字之间,如果有空格,换行,tab都将被折叠为一个空格显示

(3).标签要严格封闭

四.HTML结构详解

新建HTML文件,输入html:5,按tab键后,自动生成的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

(1).文档声明头

任何一个标准的HTML页面,第一行一定是一个以

<!DOCTYPE...

开头的这一行,就是文档声明头,DocType Declaration,简称DTD.此标签可告知浏览器文档使用哪种HTML或者XHTML规范.

PS:

XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言

XHTML的主要木丁是为了取代HTML,也可以理解为HTML的升级版

HTML的标记书写很不规范,会造成其他设备(iPad,手机,电视等)无法正常显示

XHTML与HTML4.0的标记基本上一样.

XHTML是严格的,纯净的HTML

(2).HTML4.01有哪些规范:

下面对上图中的三种小范围进行解释:

strict:表示"严格的",这种模式里面的要求更为严格.这种严格就体现在有一些标签不能够使用

比如,,u标签,就是给一个本文加下划线,但是这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u这个下划线是样式.所以,在strict中是不能使用u标签的.

那么怎么给文本增加下划线呢?今后的CSS将使用CSS属性来解决.

那么,XHTML1.0更为严格,因为这个体系本省规定比如标签必须是小写字母,必须严格闭合标签,必须使用引号引起属性等等.

Transitional:表示"普通的",这种模式就是没有一些别的规范

Frameset:表示"框架",在框架的页面使用

(3).头标签(head)

head标签都放在头部分之间.这里面包含了:<title>,<mata>,<link>,<style>

<title>:指定整个网页的标题,在浏览器最上方显示

(4).Meta标签介绍:

元素可提供有关页面的原信息(mata-information),针对搜索引擎的更新频度的描述的关键词

标签位于文档的头部,不包含任何内容

提供的信息是用户不可见得.meta标签的组成:meta标签共有两个,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

常用的meta标签:

　　①: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">

　　②:name属性

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

<meta name="Keywords" content="bilibili,哔哩哔哩,直播,游戏,番剧,电影,动画,音乐,娱乐,排行" />

这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率.让别人能够找到你,搜索到

<meta name="Description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。" />

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

效果如下:

上面这个标签,是让我们网页支持移动端,移动设备优先(了解即可)

(5).title标签

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

<title>哔哩哔哩 （゜-゜）つロ 干杯~-bilibili</title>

效果如下:

五.总结:

<!--文档的声明-->
<!DOCTYPE html>
<html>
    <head>
        <!--网站配置-->
        <meta charset="utf8">
        <!--标题标签-->
        <title>哔哩哔哩 （゜-゜）つロ 干杯~-bilibili</title>
        <!--<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">-->
        <meta name="Description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。" />
        <!--移动端优先 视口设置-->
        <meta name='viewport' content="width=device-width, initial-scale=1">
        <!--<link rel="shortcut icon" href="http://hcdn1.luffycity.com/static/frontend/index/Luffy-study-logo.png">-->
        <!--css的作用修饰标签  静态资源-->
        <!--<link rel="stylesheet" href="./index.css">-->

        <style type="text/css">
            h2{
                color: blue;
            }
        </style>
    </head>
    <body>
    <!--html除了语义什么都没有-->
    <!--总结： html对空格和换行不敏感

    html的特征：
    1、空白折叠现象
    2. html对空格和换行不敏感
    3.严格封闭


    -->
        旺旺
        <h1>爽歪歪</h1>
        <h2>乳娃娃</h2>
        <h3>酸酸乳</h3>
        <h4>娃哈哈</h4>
        <h5>嘿嘿嘿</h5>
    </body>
</html>

第一个HTML(详解)

posted @ 2018-09-14 17:01 骑驴老神仙阅读(207) 评论(0) 收藏举报

刷新页面返回顶部

骑驴老神仙

初识HTML

一.HTML的概述

1.HTML是负责描述文档语义的语言

二.HTML颜色介绍

1.颜色表示:

2.RGB色彩模式:

三.HTML的规范

1.编写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" />

2.HTML的基本语法特征

(1).HTML对换行不敏感,对tab不敏感

(2).空白折叠现象:

(3).标签要严格封闭

四.HTML结构详解

(1).文档声明头

(2).HTML4.01有哪些规范:

(3).头标签(head)

(4).Meta标签介绍:

(5).title标签

五.总结:

公告

　　双边标记:<span></span>

　　单边标记:<br>转成<br /><hr>转成<hr />,还有<img src="URL" />