html5

无标签

WEB

发布日期: 2020-07-12

typora-copy-images-to: img

学前了解

1.浏览器

5大常见浏览器：

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

5大浏览器图示

多学一招：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解决图示

win10解决图示

认识html

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

客户端和服务器交互图示

1.概念

HTML（英文Hyper Text Markup Language的缩写），超文本标记语言。

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

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

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

2.作用

编写网页

3.查看网页的html

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

网页源码图示

4.html的基本结构

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

<html>
	<head>
		<title>页面的标题</title>
	</head>
	<body>
		这里写内容	
	</body>		
</html>

html基本结构图示

5.制作第一个网页

新建文本文档（记事本），写入如下内容

<html>
	<head>
        <title>我的网页</title>
    </head>
    <body>
        这是我的第一个网页，怎么样，厉害吧！
    </body>
</html>

将文件的后缀名改为html

双击（默认会使用浏览器）打开

第一个网页效果

编辑器介绍

Dreamweaver、Sublime、Editplus（notepad++）、phpstorm、NetBeans

常用编辑器图示

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浏览器图示

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

注册表图示

注释

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

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

语法：

<html>
	<head>
        <title>我的网页</title>
    </head>
    <body>
        这是我的第一个网页，怎么样，厉害吧！
        <!--这是主体内容-->
    </body>
</html>

注释图示

常见的标记

报纸图

1.标题

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

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

…

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

<html>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <h1>第一个网页</h1>
        <h2>第一个网页</h2>
        <h3>第一个网页</h3>
        <h4>第一个网页</h4>
        <h5>第一个网页</h5>
        <h6>第一个网页</h6>
        这是我的第一个网页，怎么样，厉害吧！
    </body>
</html>

标题效果

脚下留心：

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

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

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

多学一招：

SEO：（Search Engine Optimization）：汉译为搜索引擎优化

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

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

2.排版标记

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

<!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>

段落标记效果图

b) 水平线：<hr>

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

水平线效果图

c) 换行：<br>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	今天<br />明天<br />后天
</body>
</html>

换行标签图

3.字体标记

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<b>加粗的字</b>
	<i>倾斜的字</i>
	<u>带有下划线的字</u>
</body>
</html>

字体标记效果图

4.强调标记

a) 强调标记，通过加粗来强调：<strong></strong>

b) 强调标记，通过斜体来强调：<em></em>

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<strong>加粗的字</strong>
	<em>倾斜的字</em>
	<ins>带有下划线的字</ins>
</body>
</html>

强调标记效果图

脚下留心：

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

小案例：

小案例效果图

分析：

1.一个大标题

2.一个小标题

3.一个分割线

4.三个段落

代码：

<!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"></标签名>

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

效果

1535362950536

这个字体ie可以识别

列表

1.无序列表

无序列表图示

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

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

ul：代表标签的模块，范围

li：代表列表的每一项

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

效果图

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

2.有序列表

有序列表图示

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

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

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

效果图

3.自定义列表

自定义列表图示

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

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

代码

<!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>

效果图

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

超链接

标记：<a></a>

target（目标属性）：

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

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

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

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

效果

1.内部链接

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

示例图

在本地文件之间跳转

2.外部链接

跳转到其他网站的链接

示例图

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

3.下载链接

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

1	<a href="科比.pptx">打开ppt</a>

点击效果

4.锚点链接

示例图

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

语法：

1
2
3

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

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

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

示例图

点击超链接，跳转到指定的锚点处（id）

示例图

路径

1.相对路径

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

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

示例图

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

示例图

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

示例图

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

示例图

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

示例图

2.绝对路径

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

示例图

图片标签

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

src：图片的地址

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

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

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

效果图

其他

pre标签

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

<pre>
    									上
    左																右
    									下
    </pre>

效果图

Jacky

http://javathinker.cn/2020/07/12/html5/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Jacky !

无标签

css字体font引用

2020-07-31 WEB

雪碧图的制作网站

2020-05-26 WEB

typora-copy-images-to: img

学前了解

1.浏览器

2.快捷键

3.文件名

认识html

1.概念

2.作用

3.查看网页的html

4.html的基本结构

5.制作第一个网页

编辑器介绍

Dreamweaver介绍

1.站点

2.在Dw中新建站点

3.使用DW

4.浏览器设置

注释

常见的标记

1.标题

2.排版标记

3.字体标记

4.强调标记

标签的属性

1.标签的分类

2.属性

3.属性的使用

列表

1.无序列表

2.有序列表

3.自定义列表

超链接

1.内部链接

2.外部链接

3.下载链接

4.锚点链接

路径

1.相对路径

2.绝对路径

图片标签

其他

pre标签

你的赏识是我前进的动力