1.HTML概述

1.1什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本了，HTML命令可以说明文字、图片、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息的方式将分布在不同位置信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

概念：hyper text markup lauguage 超文本标记语言
超文本：超链接，音频，图片...
标记性/描述性：用特定标签描述内容
标签：html,title,head,body,p,h1-h6,table,tr,td,form,ul,ol,dt,dd
编程语言的分类：描述型/解释型语言：html,xml编译型语言：c,c++，java,c#

1.2 HTML的作用

编写网页，开发网站

1.3 开发工具

a.记事本工具

①建记事本文件

②写html代码

③修改记事本文件的扩展名,将txt改为html

④用浏览器打开

b. editplus(主要使用editplus来开发)

①打开editplus工具

②编写页面内容

③保存网页，注意选择文件编码

④使用浏览器打开网页

c.hbuilder

①下载

②新建项目

③新建html页面

④运行页面

d.vscode

2.HTML基本结构

2.1网页基本结构

标签：

单标签：<标签名 />

双标签：<标签名>内容</标签名>

网页基本结构

<html>根标签<head>头标签<title></title>标题标签</head><body>身体标签</body>
</html>

'html':是网页的根标签，网页上所有的定义都要放在根标签中

’head':定义网页的头部，对于网页文档进行配置。里面可以写网页标题，引入css,引入js。定义网页内容的字符编码。定义搜索引擎的相关内容。head中定义的内容不会直接在浏览器窗口中呈现。

'title':网页文档标题

'body':网页要呈现在浏览器主窗口的内容，全部写到body中。

（电脑中的文件类型由后缀名决定，是windows处理文件的主要依据。）

网页文件的类型：XXX.html/xxx.htm 一样的

就是在本地开发xxx.html网页文件--->>>运行于浏览器中。

三种方式打开网页文件：

①双击默认出发浏览器打开

②先打开浏览器，再将网页拖入浏览器中

③右键选中文件，选择打开方式，找到对应的浏览器打开

本地文件协议
le://E:/xxx.html文本传输协议
http://
https:// 加密协议文件传输协议
ftp://192.168.21.28

2.2HTML常用标签

2.2.1标签的格式

①使用< >包起来

两类：单标签/双标签

<标签名>标签体</标签名> 双标签

<标签名 /> 单标签

②标签必须闭合，标签名字字母都用小写

③必须正确的嵌套

2.2.2常用标签

①h1--h6内容标题标签

<!-- h1--h6 标题标签 --><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6><!-- 标题标签只有 h1-h6没有其他的标题 --><h7>这是普通内容</h7><h8>这是普通内容</h8>这是一个普通内容

②段落标签：p 换行: br 分割线：hr

<!-- 段落p, br换行，hr分隔线 -->
<!--
p段落标签之间会有段间距
br每行之间没有间距
-->
<!--水平线 hr --><hr/><!--段落标签有段间距--><p>这是一个段落内容<p><p>这是一个段落内容</p><p>这是一个段落内容</p><hr/><!--换行标签：只是换行显示，没哟段间距-->这是一行文字<br/>这是一行文字<br/>这是一行文字<br/>

③图像标签img

<img src="图片来源" alt="提示" width="宽度" height="高度" align="对齐方式"/>src: 图片来源(相对路径或绝对路径)
alt:图片无法显示时的提示信息
width:宽度
height:高度
align:设置对齐方式，设置文字环绕效果


格式：<img src="" alt="" />
<!-- src : 写的就是图片的路径地址  alt:当图片加载失败时显示的内容 -->
<!-- 图像标签：向网页中插入图片 image--><!-- 思考：图片从哪来？本地，网络 --><!-- 1.绝对路径：从跟目录/盘符开始 --><!-- 2.相对路径:从当前位置出发 ————>目标文件到的位置 --><!-- ./ 代表当前目录  可以不写 --><!-- ../ 代表返回上级目录 -->
<!-- 3.引入网络图片 --><!-- 步骤：打开浏览器 --》找到想要的图片--》F12-左上角箭头---》点击想要的图片--》复制 src属性。 --><!--图片标签img中src指明图片来源:1.用相对路径的方式指明图片来源2.用绝对路径的方式指明图片来源--><!--相对引用: 图片与页面文件在同一位置--><img src="book01.jpg"/><img src="./book01.jpg"/><br/><!--相对引用:图片在页面的下级文件目录--><img src="img/a/book02.jpg"/><img src="./img/a/book02.jpg"/><br/><!--相对引用:图片在页面的上级目录--><!--./ :表示当前文件位置../ :表示上级目录--><img src="../book03.jpg"/><img src="./../book03.jpg"/><!--绝对引用: 表示使用绝对路径定位目标位置1. 网络上的绝对路径,带服务器根地址的路径http://www.baidu.com/xxx/aaa/qqq.jpg2. 本地磁盘的绝对路径,带本地磁盘根盘符d:/ftp_smx/qy151/book01.jpg--><img width="400" height="300" src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F1217%2Fe940e897p00q2nwip00fwc000wa00ikm.png&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648022667&t=2d2683f27b680bf282e09b5eb05efe39"/><!--当图片无法显示的时候，用file协议--><img src="file:///D:/ftp_smx/QY151/demo2/1.jpg"/><img src="file:///d:/book03.jpg"/>

要注意的问题，editplus新建页面之后一定要保存，确保文件是有完整路径的，不然无法使用相对路径引用关联目标资源。

④列表标签

有序列表：有序号

无序列表：无序号

自定义列表

列表嵌套

注意的问题：ul,ol的二级节点必须是li，不能是其他元素，li中可以嵌套其他内容

<!-- 有序列表 --><!-- ol和ul只控制是否有序，li才是列表 list --><!--无序列表: 表示列表项之间没有特定次序ul: unordered list ,无序列表li: list item 列表项目--><h1>你喜欢的水果?</h1><hr/><ul type="square"><li>苹果</li><li>香蕉</li><li>菠萝</li><li>橘子</li><li>山楂</li></ul><hr/><!--有序列表: 列表项目有先后次序ol: ordered list 有序列表li: list item 列表项--><h1>将大象放入冰箱有几个步骤？</h1><ol><li>将大象牵到冰箱旁边</li><li>打开冰箱门</li><li>将大象装入冰箱</li><li>关上冰箱门</li></ol><hr/><!--自定义列表:dl:definition list 自定义列表dt:definition title 列表标题dd:definition data 列表数据介绍一个商品:1.描述品牌:格力2.描述价格:20003.描述产地:深圳--><img src="kt.jpg" /><dl><dt>商品品牌:</dt><dd>格力</dd><dt>商品价格:</dt><dd>2000元</dd><dt>商品产地:</dt><dd>深圳</dd></dl><hr><!--用列表嵌套，实现多级菜单--><!--一个月有几周，一周有几天--><ul><li>一月份<ul><li>第1周</li><li>第2周</li><li>第3周</li><li>第4周</li></ul></li><li>二月份<ul><li>第1周</li><li>第2周</li><li>第3周</li><li>第4周</li></ul></li><li>三月份<ul><li>第1周</li><li>第2周</li><li>第3周</li><li>第4周</li></ul></li></ul>

⑤a标签

<a href="目标页面地址#锚点" target="目标窗口">内容</a>href:链接的目标页面
target:指定页面打开的窗口

跳转页面
<a href="目标页面地址">链接显示的内容</a>跳转锚点
<a href="#锚点名字">内容</a>
定义锚点
<a name="锚点名字">内容</a>

做超链接标签跳转页面

  <!-- 跳转网络地址 -->  <a href="http://www.baidu.com">百度</a>  <!-- 本地网页 -->  <a href="123.html">123.html</a>

做锚点 锚标记锚记

概述：使用命名的锚点可以快速的链接到同一个网页或指定网页中的某个位置

 <!--锚点的实现:1.方式一:使用a标签的name属性定义锚点:<a name="锚点名字">内容</a>跳转到锚点: <a href="#锚点名字">内容</a>2.使用任意标签的id属性定义锚点: <h1 id="锚点名字">内容</h1>跳转到锚点: <a href="#锚点名字">内容</a>-->

<!--超链接标签:a1. 跳转页面功能a.跳转到网络中的某个页面b.跳转到本地页面2. 锚点的使用：跳转到某个页面的某个位置a. 使用a标签的name属性设置锚点b. 使用任意标签的id属性设置锚点--><a href="http://www.baidu.com">百度</a><a href="http://www.jd.com">京东</a><a href="http://www.taobao.com">淘宝</a><hr/><a href="test1.html">跳到test1</a><a href="test2.html">跳到test2</a><!--从第一个页面直接跳转到第二个页面的某个位置:跨页面跳转锚点--><a href="Noname2.html#junshi">访问咨询页面的军事新闻</a>

发邮件mailto

<a href="mailto:1423432@qq.com">发邮件</a>

通过超链接关联一个磁盘文件，下载功能（扩展）

<a href="本地文件">内容</a>

⑥文本标记font字体 i斜体 b粗体 u下划线 sup上标 sub下标

<font size="大小" color="颜色" face="字体类型">字体内容</a>
i: italic 斜体
b: bold 粗体
u: underline 下划线
sup: 上标
sub: 下标<font size="7" color="red" face="隶书">齐天大圣孙悟空</font><br/>这是普通内容<br/><b>这是一个文字</b><br/><u>这是一个文字</u><br/><i>这是一个文字</i><br/><hr/>X<sub>1</sub> + Y<sub>1</sub> = 24 <br/>X<sub>1</sub><sup>2</sup> + Y<sub>1</sub><sup>2</sup> = 36 <br/>

⑦音频标签audio，视频标签video

<audio src="" autoplay controls="controls"></audio><audio src="../新二神曲.mp3" autoplay controls="controls"><source src="../111.mp3"></source><source src="../111.mp2"></source><source src="../111.flac"></source></audio><video src="../书法大师.mp4" autoplay controls="controls"><source src="../111.mp4"></source><source src="../111.avi"></source><source src="../111.flv"></source></video>

⑦table表格

布局：三行三列两行两列一行十列

caption：标题

table：表格

tr:行，一个tr中嵌套几个td就是几列，每一行的列数都一样，除非单元格合并

td:单元格，内容写到td里

th:单元格，但是一般用于表头，加粗居中

2.2.3 特殊字符

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
￡	镑	£	£
￥	日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

3.一个小练习

<!DOCTYPE HTML >
<html><head><title> 这是一个小说 </title><meta charset=""></head><body><table frame="box" rules="all"  align="center" width="800"><tr><th colspan="4" id="00">金光御九界之墨世佛劫</th></tr><tr align="center"><td><a href="#01">第01集 钟破 钵散 天门留憾</a></td><td><a href="#02">第02集 正面交锋</a></td><td><a href="#03">第03集 佛劫来临</a></td><td><a href="#04">第04集 雁王开局</a></td></tr><tr align="center"><td><a href="#05">第05集 佛杀如来</a></td><td><a href="#06">第06集 佛劫再临</a></td><td><a href="#07">第07集 兄弟决裂</a></td><td><a href="#08">第08集 月凝湾的秘密</a></td></tr><tr align="center"><td><a href="text/09.html">第09集 无法回头的选择</a></td><td><a href="text/10.html">第10集 始战佛劫</a></td><td><a href="text/11.html">第11集 王者 亡者</a></td><td><a href="text/12.html">第12集 扩散的救赎</a></td></tr><tr align="center"><td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第13集 光明无水两分界 鸿飞岂复计东西</a></td><td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第14集 咫尺天涯</a></td><td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第15集 光明中的黑暗战役</a></td><td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第16集 最后的王牌</a></td></tr></table><a name="01"><h3>第01集</h3></a><p>紫金钵之秘，揭开千年圣战，墨乱未止，佛劫再起。</p><a href="#00">返回</a><hr/><a name="02"><h3>第02集</h3></a><p>重拾止戈流的俏如来，能否顺利打败玄狐？四方之斗，多方之决，欲星移、铁骕求衣、凰后、雁王，四人汇聚尚贤宫，这场算计之中的摊牌，是否会出现新的牺牲者？天门覆灭，地门再兴，新一波的武林危机，慢慢酝酿成形。面对内忧外患，俏如来要如何排解这重重难关呢？</p><a href="#00">返回</a><hr/><a name="03"><h3>第03集</h3></a><p>雁王无预警突会神蛊温皇，两人之间有什么恩仇纠葛？一步禅空重现，是幻觉？是灵体？还是颠倒梦想的心魔驱使？锦烟霞要如何再一次面对悲剧？地门钟声再现，是否代表地门另一波的攻势即将开启？银燕、忆无心，又被交托怎样的任务，他们会遇上何种难关？</p><a href="#00">返回</a><hr/><a name="04"><h3>第04集</h3></a><p>俏如来再开止戈流，九尾风华、墨狂，两口神兵首次交锋！面对学得剑十一与一剑无悔的玄狐，俏如来是否真能取胜，消灭玄狐？雁王的盘算又是什么？未现身的凰后是否又在暗中排布？漏泄至天门之外的钟声，是偶然？还是代表地门势力的扩张？银燕、忆无心、飞渊，他们三人又会有怎样的奇遇呢？</p><a href="#00">返回</a><hr/><a name="05"><h3>第05集</h3></a><p>佛杀如来、立身光明下的影形</p><a href="#00">返回</a><hr/><a name="06"><h3>第06集</h3></a><p>俏如来瞬入无水汪洋，这是缺舟一帆渡的奇幻手法，或者另有神秘？俏如来面临记忆净化首度危机！万雪夜佛国之行，又会有怎样的收获？神秘的地门，是否将对中原伸出魔掌？再出的玄狐，又有什么目的呢？得到古燐原晶的黑水城，是否能恢复动力？初始力量，忆无心意识中的传承遗志，又是什么？</p><a href="#00">返回</a><hr/><a name="07"><h3>第07集</h3></a><p>兄弟决裂</p><a href="#00">返回</a><hr/><a name="08"><h3>第08集</h3></a><p>异变的村庄，俏如来身陷危境，地门影响力逐渐扩大，俏如来该如何抵抗大智慧的侵袭？踏入月凝湾的风逍遥，又会有怎样的诡异遭遇呢？地门之中，万雪夜身份遭受质疑，这场冲突将如何了结？雪山银燕与剑无极这对兄弟，是否从此走向不同的道路呢？浪辰台中，针锋相对，欲星移有何算计排布？</p><a href="#00">返回</a><hr/></body>
</html>

第一章 HTML基础相关推荐

《零成本实现Web自动化测试--基于Selenium》第一章自动化测试基础
第一篇 Selenium 和WebDriver工具篇第一章自动化测试基础 1.1 初识自动化测试自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
第一章计算机基础知识第一节,第一章计算机基础知识第一节
第一章计算机基础知识第一节.了解计算机尊敬的各位评委老师: 大家好!我今天说课的题目是<了解计算机>.我将从以下五方面来谈谈对这节课的设计:即说教材.学情分析.说教法和学法.说教学过程 ...
人工操作阶段计算机是如何工作的,第一章计算机基础概述全解.ppt
第一章计算机基础概述全解 1.2.3 汉字编码汉字的编码国标码:中文内码之一,汉字信息交换的标准编码.国标码是不可能在计算机内部直接采用.于是, 汉字的机内码采用变形国标码 . 国标码:作为转换为 ...
微型计算机基础教案,第一章微型计算机基础知识新080902电子教案（153页）-原创力文档...
第一章微型计算机基础知识;第一章? 微型计算机基础知识;§1.1 计算机中数的表示方法;1.1.1 进位计数制及各计数制间的转换;二进制数的特点; 十进制--符合人们的习惯二进制--便于物理实现十六 ...
萌新向Python数据分析及数据挖掘第一章 Python基础第三节列表简介第四节操作列表...
第一章 Python基础第三节列表简介列表是是处理一组有序项目的数据结构,即可以在一个列表中存储一个序列的项目.列表中的元素包括在方括号([])中,每个元素之间用逗号分割.列表是可变的数据类型, ...
计算机术语new一个,微机原理第一章计算机基础知识(new)
<微机原理第一章计算机基础知识(new)>由会员分享,可在线阅读,更多相关<微机原理第一章计算机基础知识(new)(47页珍藏版)>请在人人文库网上搜索. 1.1.第一章计算机 ...
自考第一章计算机基础知识,2018年自考计算机网络技术基础复习资料：第一章...
第一章计算机基础知识电子计算机的发展阶段分为: 1 第一代电子计算机.用电子管.以构成计算机的电子器件来1946年第一台电子计算机. 2 第二代电子计算机的特点是用晶体管. 3 第三代电子计算机的 ...
Python计算机视觉：第一章图像处理基础
第一章图像处理基础 1.1 PIL-Python图像库 1.1.1 对图片进行格式转换 1.1.2 创建缩略图 1.1.3 拷贝并粘贴区域 1.1.4 调整尺寸及旋转 1.2 Matplotlib库 ...
计算机基础知识作业,第一章计算机基础知识作业
第一章计算机基础知识作业读书之法,在循序而渐进,熟读而精思作业一计算机基础知识一.作业目的 1．掌握 1)计算机的发展历史: 2)计算机的主要特点和应用领域: 3)计算机系统硬件组成和工作原理: ...
第一章计算机基础知识作业答案,第一章计算机基础知识.doc第一次作业
交流借鉴第一章计算机基础知识一.单选题 1．第四代电子计算机是( C )计算机. A．电子管 B．晶体管 C．大规模集成电路 D．人工智能 2．第一台电子计算机是1946年在美国研制的,该机 ...

第一章 HTML基础