Derek的成长之路——前端与移动开发之HTML(总结篇)
来源:互联网 发布:cf刷枪软件 编辑:程序博客网 时间:2024/06/05 02:49
1、HTML骨架
标准的骨架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
一个标准的HTML页面,第一行一定是一个以
<!DOCTYPE ……
开头的语句,就是文档声明头,DocTypeDeclaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
到底有哪些规范呢?
现在学习的是HTML4.01版本,这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。手机、移动端的网页,可以使用HTML5。
HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下面):
HTML4.01里面规定了普通、XHTML两大种规范。
HTML觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?
1 <H1></H1>
所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示“严格的”。
HTML第一行语句一共有6种:
大规范
里面的小规范
HTML4.01
Strict 严格的,体现在一些标签不能使用,比如u
Transitional 普通的
Frameset 带有框架的页面
XHTML1.0
严格体现在小写标签、闭合、引号
Strict 严格的,体现在一些标签不能使用,比如u
Transitional 普通的(我们学习的版本)
Frameset 带有框架的页面
strict表示“严格的”,这种模式里面的要求更为严格。这种严格体现在哪里?有一些标签不能使用。
比如,u标签,就是可以让一个本文加上下划线,但是这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u这个下划线是样式。所以,在strict中是不能使用u标签的。
1 <u>加下划线的效果</u>
HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了:
<!DOCTYPE html>
2. meta 字符
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
字符集用meta标签定义,meta表示“元”,表示基本的配置项目。
中文能够使用的字符集两种:
第一种:UTF-8
1 <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
第二种:gb2312
1 <meta http-equiv="Content-Type"content="text/html;charset=gb2312">
也可以写成gbk
2 <meta http-equiv="Content-Type"content="text/html;charset=gbk">
有两个字库UTF-8和gb2312。
UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字。
gb2312 是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。
字库规模: UTF-8(字全) > gb2312(只有汉字)
我们用meta标签可以声明当前这个html文档的字库,但是一定要和保存的类型一样,否则乱码!(重点)
使用sublime时默认类型就是UTF-8。若改为gb2312的时候,就一定要记得设置一下sublime的保存类型:文件→ set File Encoding to→Chinese Simplified(GBK)
记住两者匹配:
注意,由于UTF-8里面保存了世界上所有人类语言,所以描述一个汉字需要的码更多。
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。
总结:
UTF-8 字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
gb2312字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。
一般我们使用都用 UTF-8,因为。。。懒得改
浏览器就是通过meta来识别你是什么字符集的,比如你保存的时候meta写的和声明的不匹配,浏览器就会乱码。
meta除了可以设置字符集,还可以设置关键字和页面描述。
设置页面描述:
<meta name="Description" content="这是Derek的HTML博客学习文章" />
只要设置的Description页面描述,百度搜索结果,就能够显示这些语句(SEO)搜索引擎会抓取关键字
例:
<meta name=”” content=”” />
定义了一个名字是“Description”(描述)的meta。内容是……
定义关键词:
<meta name="Keywords" content="前端,HTML,CSS,Java,PHP" />
这些关键词,就是告诉搜索引擎,网页是干嘛的,能够提高搜索命中率。让别人能够找到,搜索到。
所以,一个比较完整的骨架是这样:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Keywords" content="前端学习,移动开发,全栈工程师" />
<meta name="Description" content="本博客旨在记录前端与移动开发与交流学习" />
<title>Document</title>
</head>
<body>
</body>
</html>
第4行 : 字符集设置
第5行: 关键词
第6行: 描述
3.title 标签
<title>网页的标题</title>
title也是有助于SEO搜索引擎优化的:
<title>web前端培训与移动开发</title>
网页的head标签里面,表示的是页面的配置,有那些什么配置?
- 字符集
- 关键词
- 页面描述
- 页面标题
4.HTML的基本语法特性
HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关,换不换行、tab不tab,都不影响页面的结构。
也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,良好的缩进,代码更易读。正确缩进标签是良好的代码规范。
HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
代码:里面有空格、缩进、换行
标签不封闭是灾难:
错误示例 <title>欢迎<title>
h标签和p标签
<h1> 到 <h6> 都是标签:
<h1></h1>一级标题
<h2></h2>二级标题
……
<h6></h6>六级标题
h标签没有嵌套关系的。由于h3跟着一个h2,所以,我们自己就知道了这个h3是h2子标题。
1 <h1>前端开发与学习</h1>
2 <h2>一、学习内容</h2>
3 <h2>二、学习目标</h2>
4 <h3>2.1 HTML学习</h3>
5 <h3>2.2 字符集</h3>
6 <h3>2.3 关键字和页面描述</h3>
7 <h3>2.4 title标签</h3>
8 <h2>三、HTML的基本语法特性 </h2>
9 <h3>3.1 HTML对换行不敏感,对tab不敏感</h3>
10 <h3>3.2 空白折叠现象</h3>
11 <h3>3.3 标签要严格封闭</h3>
<h2>四、h和p标签</h2>
p是段落,是英语paragraph“段落”缩写。
HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级。
顾名思义,容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。
p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。
审查元素功能:
试着把h放到p到里(这是错误的):
<p>
我是一个小段落
<h1>我是一个主标题</h1>
</p>
正确的:
<h3>个人简历</h3>
<p>
哈佛大学毕业,在蓝翔深造
</p>
错误的:
1 <p>
2 <h3>个人简历</h3>
3 哈佛大学毕业。在蓝翔深造
4 </p>
页面上可以插入图片,能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是:psd、ai
5.img 标签
HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
插入方法:
<img src="007.jpg" />
img是英语image“图片”的简写
src 是英语source“资源”的简写,千万不要写成scr。
src是img标签的属性,007.jpg是这个属性的值。
img 标签不是“对儿”。自封闭标签,也称为单标签。
<img/>
meta也是自封闭标签:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
alt属性:
<img src="007.jpg" alt="我是卧底" />
alt是英语alternate“替代”的意思,就表示不管因为什么原因,当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)。
HTML中插入图片,所以现在有两个文件,一个html文件,一个是jpg文件。
我们关心的就是这两个文件的相对位置。只要相对路径不变。图片一定能够正常显示。
当图片在文件夹里面的时候:
<img src="images/007.jpg" alt="我是卧底" />
如果在很深的文件夹中,也不怕,可以一直罗列下去:
<img src="images/tupian/007.jpg" alt="我是卧底" />
如果情况变得复杂,我们的图片在浅一层的文件夹中:
<img src="../001.jpg" alt="" />
如果是上两级:
<img src="../../002.jpg" alt="" />
还可以更为复杂:
<img src="../../images/tupian/007.jpg" alt="" />
6.超链接标签
一个网站,是由很多html网页组成的,html网页之间能够通过超级链接互相跳转,从而形成了“网”。
语法:
<a href="007.html">照片</a>
a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertextreference超文本地址的缩写。读作“喝瑞夫”,不要读作“喝夫”。
title 悬停文本
<a href="009_img.html" title="很好看">照片</a>
target 是否在新窗口中打开
target实际上是“目标”的意思。
<a href="009_img.html" title="很好看" target="_blank">照片</a>
blank就是“空白”的意思,就表示新建一个空白窗口。为毛有一个_,就是规定,没啥好解释的。
也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了,就是在新的空白标签页中打开。
完整的超级链接:
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
分清楚img和a标签的各自的属性:
<img src="1.jpg" />
<a href="1.html"></a>
页面当中可以有锚点,所谓的锚点,就是一个小标记,这个小标记是用户不可察觉的,用户不知道这里有一个标记。
锚点用name属性来设置,一个a标签如果name属性(或者id属性),那么就是页面的一个锚点。
<a name="wdwy">我的网页</a>
或者:
<a id="wdwy">我的网页</a>
那么网址:
1.html#wdwy
就能够让这个锚点在页面最顶端显示,此时页面有卷动。
这样子,用户体验会好一点,用户可以直接看到页面的内容。
如果有一个超级链接,指向页面中的锚点,那么就是:
<a href="#wdwy">点击我就查看我的网页</a>
比如一个段落中的所有文字都能够被点击,那么应该:
p包裹a:
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
而不是a包裹p:
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。
- Derek的成长之路——前端与移动开发之HTML(总结篇)
- Derek的成长之路——前端与移动开发之HTML(基础篇)
- 我的音乐之路——Derek
- 前端程序员成长之路--HTML(day_01)
- 前端与移动开发学习之路(一)
- 前端开发面试题总结之——HTML
- 移动前端开发之viewport的理解--个人总结
- 移动前端开发之viewport的深入理解(总结)
- android移动开发程序猿的成长之路
- 小强的HTML5移动开发之路(1)——HTML介绍
- 小强的HTML5移动开发之路(1)——HTML介绍
- 小强的HTML5移动开发之路(1)——HTML介绍
- 程序员成长之路---“学习”与“面试笔试”总结篇之曲折的成长历程与求职历程
- 程序员成长之路---“学习”与“面试笔试”总结篇之曲折的成长历程与求职历程
- 前端菜鸟的成长学习之路(一)
- 前端菜鸟的成长学习之路(二)
- web前端的成长之路(START)
- 移动前端开发之viewport的深入理解(转)
- Java 根据日期计算星期几
- 自动显示和隐藏头布局的ListView(转)
- div显示图片不全和background-size在ie和火狐下不生效的解决方法
- 不同浏览器中Div层覆盖Flash层的几种方法
- solr的维护
- Derek的成长之路——前端与移动开发之HTML(总结篇)
- <nav></nav>
- echarts放大缩小功能
- Impala运行中java.net.UnknownHostException: nameservice1的异常
- linux jdk安装
- 守护进程
- 纯JAVA实现Online Judge--5.并行运行
- js EXCLE导出
- UI-BottomNavigationBar-底部导航栏