html5



typora-copy-images-to: img

学前了解

1.浏览器

5大常见浏览器:

IE浏览器、谷歌浏览器、火狐浏览器、Opera浏览器、Safari浏览器

5大浏览器图示
1535353009831

多学一招:360浏览器不算主流浏览器,因为360浏览器用的是IE浏览器的内核。浏览器的内核相当于汽车的发动机,是最核心的存在,它负责将代码转换成用户眼中的界面

2.快捷键

按键 作用
ctrl + c 复制
ctrl + v 粘贴
ctrl + x 剪切
ctrl + f 搜索
ctrl + s 保存
ctrl + a 全选
ctrl + z 撤销
ctrl + y 反撤销
ctrl+n 新建
F2 重命名
win + e 打开我的电脑(计算机/此电脑)
win+d 返回桌面
win+l 锁屏

3.文件名

文件名由基本名和扩展名(后缀名)组成,例:123.txt基本名是123,扩展名是txt

后缀名代表文件的类型,例如:txt是文本,jpg是图片,doc是word文档

文件扩展名不显示:

win7解决图示
1535356958349
win10解决图示
1535733465726

认识html

引子:在地址栏输入www.itcast.com,在敲回车的时候,网页加载出来,页面中的内容并没有存在我自己的计算机上,内容是从服务器(远程计算机)传过来的,传送的是什么?就是html

客户端和服务器交互图示
1535440240301

1.概念

HTML(英文Hyper Text Markup Language的缩写),超文本标记语言。

说白了HTML就是用尖括号包裹起来的英文单词,浏览器对这个尖括号包裹起来的英文单词有特殊的解释

超文本: 在文本文件里面除了基本文本之外还含有图片,音频,视频的内容

标记:特殊符号作为的一个记号

2.作用

编写网页

3.查看网页的html

在网页空白处点击右键–>查看网页源代码:

网页源码图示
1535354163346

4.html的基本结构

HTML有固定的基本格式,就跟我们书信有基本的格式是一样的

1
2
3
4
5
6
7
8
<html>
<head>
<title>页面的标题</title>
</head>
<body>
这里写内容
</body>
</html>
html基本结构图示
1535354344630

5.制作第一个网页

新建文本文档(记事本),写入如下内容

1
2
3
4
5
6
7
8
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的第一个网页,怎么样,厉害吧!
</body>
</html>

将文件的后缀名改为html

双击(默认会使用浏览器)打开

第一个网页效果
1535732835719

编辑器介绍

Dreamweaver、Sublime、Editplus(notepad++)、phpstorm、NetBeans

常用编辑器图示
1535355450736

Dreamweaver:简称DW,适合html+css开发,优点:代码提示比较好,缺点:打开速度慢,收费

EditPlus:小型的编辑器,优点:打开速度快,缺点:代码提示需要手动设置,做大型项目不太方便

Sublime:适合javascript开发,优点:快捷操作比较方便,打开速度比较快

phpstorm和NetBeans适合php开发

Dreamweaver介绍

1.站点

一个网站由很多网页组成,还包括图片等资源,为了方便管理,将这些资源放在一个文件夹里面,这个文件夹就是站点

2.在Dw中新建站点

手动创建一个文件夹

1535363476100

1535728481404

脚下留心:DW创建的站点其实就是创建了编辑器和文件夹的关联,DW可以创建多个站点,删除站点就是将编辑器和文件夹的关联删除了,不会删除文件夹

3.使用DW

新建html文件

1535363926047

1535364005574

多学一招:DW中快捷键F12是预览网页

1535364132119

4.浏览器设置

1535364589591

1535364616422

1535364631471

多学一招:如果在dw的设置中无法添加浏览器,则可以从注册表中添加

从注册表中添加DW浏览器图示
1551686083822

然后在注册表中依次打开HKEY_CURRENT_USER—>Software—>Adobe—>Dreamweaver CS6—>Browser Launch Menus ,然后编辑即可,如下图

注册表图示
1551686376837

注释

概念:我们在看书的时候,可以在书上看到注解,我们写代码也需要做一些备注—-浏览器不解析的标签

作用:给程序员做提示,提示开发人员或者便于开发人员理解和阅读

语法:<!--注释的内容-->

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的第一个网页,怎么样,厉害吧!
<!--这是主体内容-->
</body>
</html>
注释图示
1535355799085

常见的标记

报纸图
1535355906021

1.标题

一级标题:<h1></h1>

二级标题:<h2></h2>

六级标题:<h6></h6>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<h2>第一个网页</h2>
<h3>第一个网页</h3>
<h4>第一个网页</h4>
<h5>第一个网页</h5>
<h6>第一个网页</h6>
这是我的第一个网页,怎么样,厉害吧!
</body>
</html>
标题效果
1535356046106

脚下留心:

1.标题都是加粗的,数字越大,字体越小,数字最大为6

2.在DW中通过快捷键ctrl+数字可以直接创建标题标签

3.标题标签在SEO搜索引擎中权重比较大

多学一招:

SEO:(Search Engine Optimization):汉译为搜索引擎优化

我们在搜索引擎中搜索东西,会出来很多网页,我们习惯点击排名靠前的链接,也就是说一旦这个网页排名靠前了,那用户量就会增多,网站就有价值了,网页的点击率和流量就都有了。如何才能让网页排名靠前呢?就是要讨好搜索引擎。提升网页在搜索引擎中的排名就是搜索引擎优化。

如何优化:
1、花钱(竞价排名)买关键字 见效快,花钱多(买点击量,点完次数就不会靠前了)
2、让页面更加规范,语义更加明确(在合适的地方使用合适的标签),搜索引擎更喜欢
3、发外链,在贴吧、论坛等地方发网站的链接

2.排版标记

a) 段落标记:<p></p>

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>2019年全国两会来了。回顾2013-2018年全国两会,习近平先后36次“下团组”,和代表委员亲切交流、共商国是,讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。</p>
<p>十三届全国人大二次会议3月4日(星期一)上午11时15分在人民大会堂新闻发布厅举行新闻发布会,由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。</p>
</body>
</html>
段落标记效果图
1551689850587

b) 水平线:<hr>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
2019年全国两会来了。回顾2013-2018年全国两会,习近平先后36次“下团组”,和代表委员亲切交流、共商国是,讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。
<hr />
十三届全国人大二次会议3月4日(星期一)上午11时15分在人民大会堂新闻发布厅举行新闻发布会,由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。
</body>
</html>
水平线效果图
1551689899828

c) 换行:<br>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
今天<br />明天<br />后天
</body>
</html>
换行标签图
1551689982197

3.字体标记

a) 粗体:<b></b>

b) 斜体:<i></i>

c) 下划线:<u></u>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<b>加粗的字</b>
<i>倾斜的字</i>
<u>带有下划线的字</u>
</body>
</html>
字体标记效果图
1551690106318

4.强调标记

a) 强调标记,通过加粗来强调:<strong></strong>

b) 强调标记,通过斜体来强调:<em></em>

c) 强调标记,通过下划线来强调:<ins></ins>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<strong>加粗的字</strong>
<em>倾斜的字</em>
<ins>带有下划线的字</ins>
</body>
</html>
强调标记效果图
1551690186846

脚下留心:

  • 字体标记和强调标记都能实现视觉效果,但含义是有区别的,强调标记在SEO(搜索引擎优化)的角度,权重更高
  • 强调标签具有语义化,语义好的网页更受SEO的喜欢,在搜索引擎里面的排名会更靠前

小案例:

小案例效果图
1535363835658

分析:

1.一个大标题

2.一个小标题

3.一个分割线

4.三个段落

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>中央气象台发暴雨蓝色预警 东北局部地区有大暴雨</h1>
<h6>2018-08-23 06:07:00 来源:中国新闻网(北京)</h6>
<hr />
<p>(原标题:中央气象台发布暴雨蓝色预警 东北局部地区有大暴雨)</p>
<p>中新网8月23日电 中央气象台8月23日06时发布暴雨蓝色预警:</p>
<p>预计8月23日08时至24日08时,黑龙江东北部、吉林中东部、辽宁东部、云南西南部、贵州中部、重庆南部、福建西北部和东南部以及台湾岛等地的部分地区有大到暴雨,其中,吉林东南部、辽宁东部、贵州中部以及台湾岛东部局地有大暴雨或特大暴雨(250~300毫米);上述部分地区伴有短时强降水(小时雨量20~50毫米,最大可达60毫米以上),局地有雷暴大风等强对流天气。</p>
</body>
</html>

标签的属性

1.标签的分类

双标签:成对出现的标签叫双标签,内容写在标签中间—–><p>段落</p>

单标签:单个的标签叫做单标签,没有内容只有属性—–><hr>

2.属性

  • 每个标签都有自己的属性(特性)—–单标签和双标签都有属性
  • 一个标签可以有多个属性
  • 每个属性都有对应的值,值要用引号引起来(单引号和双引号都可以)
  • 属性之间使用空格隔开
  • 属性没有顺序

3.属性的使用

语法:<标签名 属性1="值1" 属性="值2"></标签名>

1
2
3
4
5
6
7
8
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<font size="7" face="叶根友毛笔行书2.0版" color="red">字体标签</font>普通文字
</body>
</html>

效果

1535362950536

这个字体ie可以识别

列表

1.无序列表

无序列表图示
1535430944991

链接:https://www.163.com/

标签名称 无序列表标签
标签
  • …….
属 性 Type 设置列表项目符号样式 circle - 空心圆 square - 正方形 disc - 实心圆(默认)
描 述 注意: 1. 列表项里面至少有一个li标签(至少1一个,可以写N个) 2. 写无序列表必须写ul 3. 内容必须写在li标签内 说明: 列表项目结构中没有先后顺序的列表,称之为:无序列表

ul:代表标签的模块,范围

li:代表列表的每一项

1
2
3
4
5
6
7
8
<ul>
<li>丹麦国家队暂时"解散"!足协征召业余球员组队参赛 </li>
<li>世界足坛最惨之人出炉!只有他欣赏不了梅西的演出</li>
<li>当卢卡库的"大笨钟"晃过门将时,真以为是大罗来了 </li>
<li>C罗又美黑!甲板上拥翘臀女友入眠 他如今是CR5.5?</li>
<li>揭C罗不坐尤文大巴之谜 葡总理:他是全国的荣耀! </li>
<li>巴萨官推:梅西就是最佳 真坑!1月要赴美踢西甲</li>
</ul>
效果图
1536033423327

注意:ul标签的直接子元素必须是li标签,li标签是放置列表的容器,可以放任何东西

2.有序列表

有序列表图示
1535364784454

链接:https://help.aliyun.com/document_detail/59210.html?spm=a2c4g.11174283.6.546.7c9f2c42lW17FQ

标签名称 有序列表标签
标签格式
  1. …….
属 性 Type 设置列表项目编号样式: A,a - 设置项目编号为大小写英文字母 I,i - 设置项目编号为大小写罗马数字 1 - 设置项目编号为阿拉伯数字(默认)
描 述 注意: 1. 至少有一个li标签 2. 内容必须写在li标签里 3. 写有序列表必须写ol标签 4. 设置项目编号样式为英文字母,超过26个字母,会以aa,ab,ac这样的规律递增 说明: 列表结构中有先后顺序并且可以设置项目编号为(1,2,3或者a、b、c)的列表,称之为:有序列表
1
2
3
4
5
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
效果图
1536045669361

3.自定义列表

自定义列表图示
1535431755565

链接:https://www.mi.com/

标签名称 定义列表标签
标签格式
标题
描述
…….
属 性
描 述 注意: 1. 必须写一个dt但是可以不写dd;dt也可以写多个 2. Dd是针对于前面最近的一个dt的表述 3. 内容必须写在dt或者dd里面 说明: 不仅仅是一列项目,还是项目标题和项目描述/注释的组合

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>特色服务</dt>
<dd>F 码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
</body>
</html>
效果图
1551691974973

注意:dl是列表模块,dt是列表的标题,dd是标题的补充说明,dl和dd是并列的标签

超链接

标记:<a></a>

target(目标属性):

​ _blank:跳转到一个新的窗口页面

​ _self:在原页面的窗口中打开新页面

title:当鼠标悬浮到链接上的时候,显示title属性的值

1
<a href="#" title="锄禾日当午,汗滴禾下土。">锄禾日当午</a>
效果

1.内部链接

在同一个站点内页面间跳转——-在自己电脑本地进行跳转

示例图
1535365532033

在本地文件之间跳转

2.外部链接

跳转到其他网站的链接

示例图
1535365770717

注意:如果跳转外网页面,例如:百度、新浪等,必须要加http://-----协议

3.下载链接

链接跳转到一个浏览器无法打开的文件时,就会自动出现下载界面

1
<a href="科比.pptx">打开ppt</a>
点击效果
1536075586047

4.锚点链接

示例图
1535365951767

链接:https://baike.baidu.com/item/%E5%88%98%E5%BE%B7%E5%8D%8E/114923?fr=aladdin

语法:

1
2
3
<a href="#目标名">去目标地点</a>

<标签名 id="目标名">目标地点</标签名>

在需要跳转的地方添加一个锚点

示例图
1535366096294

点击超链接,跳转到指定的锚点处(id)

示例图
1535366133655

路径

1.相对路径

相对于当前的文件的地址,从当前文件出发去找目标

当前文件和目标文件在同一个站点中

示例图
1535366264191

当前文件和目标文件所在目录同级

示例图
1535366332783

前面省略了./,代表当前文件所在的文件夹下

示例图
1535366406839

当前页面的上级目录和目标文件同级

示例图
1535366450808

../代表当前文件的上一级目录下

示例图
1535366479191

2.绝对路径

c:\face.txt,以盘符开头,从计算机出发去找目标

示例图
1535366565128

图片标签

语法:<img src='图片的源' alt='' title='' width='' height='' />

src:图片的地址

alt:当图片无法显示的时候,将alt后面的文字显示在图片的位置上

title:当鼠标放到图片位置的时候显示提醒性文字。

1
2
<img src="1.png" title="这是卡哇伊" />
<img src="2.png" alt="这是猫咪" />
效果图
1536075868325

其他

pre标签

预排版标签:<pre></pre>

1
2
3
4
5
<pre>

左 右

</pre>
效果图
1536046991377

文章作者: Jacky
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Jacky !
  目录