码迷,mamicode.com
首页 > Web开发 > 详细

前端学习(1)~html标签讲解(一)

时间:2020-02-10 22:16:20      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:超链接   图片   详解   台湾   web   one   引擎优化   理解   扩展   

本文主要内容

  • 头标签
  • 排版标签:<p>、 <div>、 <span><br> 、 <hr> 、 <center> 、 <pre>
  • 字体标记:<h1>、 <font>、 <b>、 <u> 、<sup> 、<sub>
  • 超链接 <a>
  • 图片标签 <img>

0.前言

web标准介绍:

  • w3c:万维网联盟组织,用来制定web标准的机构(组织)
  • web标准:制作网页要遵循的规范。
  • web标准规范的分类:结构标准、表现标准、行为标准。
  • 结构:html。表现:css。行为:JavaScript。

Web 前端分三层:

  • HTML:HyperText Markup Language(超文本标记语言)。从语义的角度描述页面的结构。相当于人的身体结构。
  • CSS:Cascading Style Sheets(层叠样式表)。从审美的角度美化页面的样式。相当于人的衣服。
  • JS:JavaScript。从交互的角度描述页面的行为。相当于人的动作,让人有生命力。

1.HTML的介绍

html全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。

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

HTML的历史

XHTML介绍: XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。 XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。XHTML是严格的、纯净的HTML。

HTML的网络术语

  • 网页 :由各种标记组成的一个页面就叫网页。
  • 主页(首页) : 一个网站的起始页面或者导航页面。
  • 标记: <p>称为开始标记 ,</p>称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
  • 元素:<p>内容</p>称为元素.
  • 属性:给每一个标签所做的辅助信息。
  • xhtml: 符合XML语法标准的HTML。
  • dhtml:dynamic,动态的。javascript + css + html合起来的页面就是一个dhtml。
  • http:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP:邮件传输协议,ftp:文件传输协议。

计算机编码介绍

计算机,不能直接存储文字,存储的是编码。

计算机只能处理二进制的数据,其它数据,比如:0-9、a-z、A-Z,这些字符,我们定义一套规则来表示。假如:A用110表示,B用111表示等。

ASCII码: 美国发布的,用1个字节(8位二进制)来表示一个字符,共可以表示2^8=256个字符。美国的国家语言是英语,只要能表示0-9、a-z、A-Z、特殊符号。

ANSI编码: 每个国家为了显示本国的语言,都对ASCII码进行了扩展用2个字节(16位二进制)来表示一个汉字,共可以表示2^16=65536个汉字。例如: 中国的ANSI编码是GB2312编码(简体),对6763汉字进行编码,含600多特殊字符。另外还有GBK(简体)。 日本的ANSI编码是JIS编码。 台湾的ANSI编码是BIG5编码(繁体)。

GBK: 对GB2312进行了扩展,用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。

Unicode编码(统一编码): 用4个字节(32位二进制)来表示一个字符,想法不错,但效率太低。例如,字母A用ASCII表示的话一个字节就够,可用Unicode编码的话,得用4个字节表示,造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000

UTF-8(Unicode Transform Format)编码: 根据字符的不同,选择其编码的长度。比如:一个字符A用1个字节表示,一个汉字用2个字节表示。

毫无疑问,开发中,都用UTF-8编码吧,准没错。

中文能够使用的字符集两种:

  • 第一种:UTF-8。UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语……

  • 第二种:GBK(对GB2312进行了扩展)。gb2312 是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。

字库规模: UTF-8(字全) > gb2312(只有汉字)

重点1:避免乱码

我们用meta标签声明的当前这个html文档的字库,一定要和保存的文件编码类型一样,否则乱码!(重点)。

重点2:UTF-8和gb2312的比较

保存大小:UTF-8(更臃肿、加载更慢) > gb2312 (更小巧,加载更快)

总结:

  • UTF-8:字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
  • gb2312:字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。

HTML颜色介绍

颜色表示:

  • 纯单词表示:red、green、blue、orange、gray等
  • 10进制表示:rgb(255,0,0)
  • 16进制表示:#FF0000、#0000FF、#00FF00等

RGB色彩模式:

  • 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这就是人们常说的三原色原理。
  • RGB三原色也叫加色模式,这是因为当我们把不同光的波长加到一起的时候,可以得到不同的混合色。例:红+绿=黄色,红+蓝=紫色,绿+蓝=青
  • 在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
  • RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。

2.HTML的规范

  • HTML是一个弱势语言
  • HTML不区分大小写
  • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
  • HTML的结构:
    • 声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。
    • head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。
    • body部分:我们所写的代码必须放在此标签內。

目前,IE浏览器是完全不支持H5的,支持最好的是Opera浏览器,可以支持95%以上;其次是google,可以支持一部分H5。

编写XHTML的规范:

(1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>

(2)所有的标记都必须小写。

(3)所有的标记都必须关闭。

  • 双边标记:<span></span>
  • 单边标记:<br> 转成 <br /> <hr> 转成 <hr />,还有<img src=“URL” />

(4)所有的属性值必须加引号。<font color="red"></font>

(5)所有的属性必须有值。<hr noshade="noshade"><input type="radio" checked="checked" />

(6)XHTML文档开头必须要有DTD文档类型定义

HTML的基本语法特性

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

(2)空白折叠现象:HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

(3)标签要严格封闭

3.HTML结构详解

HTML标签通常是成对出现的(双边标记),比如 <div> 和 </div>,也有单独呈现的标签(单边标记),如:<br /><hr /><img src="images/1.jpg" />等。

属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

快速生成 html 的骨架

方式1:在 VS Code 中新建 html 文件,输入html:5,按 Tab键后,自动生成的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

1、文档声明头

任何一个标准的HTML页面,第一行一定是一个以<!DOCTYPE ……>开头的语句。

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

HTML4.01有哪些规范呢?

HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范。

总结一下,HTML4.01一共有6种DTD。

在HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自己打脸了):

<!DOCTYPE html>

2、头标签

html5 的比较完整的骨架:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="牛逼,很牛逼,特别牛逼" />
    <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
    <title>Document</title>
</head>
<body>

</body>
</html>

面试题:

  • 问:网页的head标签里面,表示的是页面的配置,有什么配置?
  • 答:字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。

头标签都放在头部分之间。包括:<title><base><meta><link>

  • <title>:指定整个网页的标题,在浏览器最上方显示。
  • <base>:为页面上的所有链接规定默认地址或默认目标。
  • <meta>:提供有关页面的基本信息
  • <body>:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。
  • <link>:定义文档与外部资源的关系。

meta 标签:

上面的<meta>标签都不用记,但是另外还有一个<meta>标签是需要记住的:

<meta http-equiv="refresh" content="3;http://www.baidu.com">

上面这个标签的意思是说,3秒之后,自动跳转到百度页面。

常见的几种 meta 标签如下:

(1)字符集 charset:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签中的charset定义,meta表示“元”。“元”配置,就是表示基本的配置项目。

charset就是charactor set(即“字符集”)。

浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候,meta写的和声明的不匹配,那么浏览器就是乱码。

(2)视口 viewport:

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

width=device-width :表示视口宽度等于屏幕宽度。

viewport 这个知识点,初学者还比较难理解,以后学 Web 移动端的时候会用到。

(3)定义“关键词”:

举例如下:

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

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

(4)定义“页面描述”:

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

设置页面描述的举例:

<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />

技术图片

title 标签:

用于设置网页标题:

	<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的。

base标签:

<base href="/">

base 标签用于指定基础的路径。指定之后,所有的 a 链接都是以这个路径为基准。

3、<body>标签的属性

其属性有:

  • bgcolor:设置整个网页的背景颜色。
  • background:设置整个网页的背景图片。
  • text:设置网页中的文本颜色。
  • leftmargin:网页的左边距。IE浏览器默认是8个像素。
  • topmargin:网页的上边距。
  • rightmargin:网页的右边距。
  • bottommargin:网页的下边距。

排版标签

 

前端学习(1)~html标签讲解(一)

标签:超链接   图片   详解   台湾   web   one   引擎优化   理解   扩展   

原文地址:https://www.cnblogs.com/Vincent-yuan/p/12292883.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!