本文介绍了HTML的基本概念、发展史和优势，详细讲解了网页基本标签、图像标签、链接标签等各类标签的使用，还区分了行内元素和块元素，介绍了列表、表格、视频/音频的相关知识，以及网页结构分析和内联框架iframe。
HTML
推荐学习：
免费在线作图：https://www.processon.com/
菜鸟教程：https://www.runoob.com/
w3school:http://www.w3school.com.cn/
-
HTML的基本概念 ：
HTML的英文全称为Hyper Text Markup Language，即网页超文本标记语言。HTML作为一款标记语言，本身不能显示在浏览器中。经过浏览器的解释和编译，才能正确的反应HTML标记语言的内容。HTML不是一款编程语言，而是一款描述性的标记语言。其最基本的语法就是：< 标记符 >内容< /标记符 >。标记符通常成对使用，有一个开头标记和一个结束标记。 -
HTML的发展史：
https://blog.youkuaiyun.com/qq_42292831/article/details/88624886 -
HTML的优势
- 简易性，HTML版本升级采用超集方式，从而更加灵活方便。
- 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
- 平台无关性
Html注释 :
使用快捷键 ctrl+/ 生成注释<!-- -->在中间加注释
<!-- 注释 -->Html的基本结构：
<!--DOCTYPE 声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<!--总标签-->
<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
<meta charset="UTF-8">
<!--网页标题-->
<title>狂神说Java</title>
</head>
<!--网页主体-->
<body>
Hello,World!
</body>
</html>< title > 标签 : 网页的标题
< meta > 标签 : 关键字标签
<!-- DOCTYPE: 告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<!--
注释的快捷键 ctrl+/
-->
<!--总标签-->
<html lang="en">
<!-- head标签代表网页的头部-->
<head>
<!--meta 描述性标签，用来描述一些网站信息-->
<!--meta 一般用来做SEO
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号
-->
<meta charset="UTF-8"><!--title 网页的标题-->
<title>我的第一个网页</title>
<meta name="keywords" content="狂神说，西部开源">
<meta name="description" content="来此处学习java">
</head>
<!-- body 标签代表网页的主体-->
<body>
Hello,world
</body>
</html>网页基本标签
-
标题标签
<!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> -
段落标签
<!--段落标签--> <p>（男）解开我 最神秘的等待 星星坠落风在吹动</p> <p>相信我 不变的真心</p> <p>千年等待有我承诺 无论经过多少的寒冬</p> <p>我绝不放手</p> <p>（女）紧紧久久与我牵绊 这副十指扣</p> <p>等到来生擦肩回眸 再次的相守</p> <p>苦苦痛痛爱的解救 愿与你同受</p> <p>却连一句我爱你都 不能说出口</p> -
换行标签
<!--换行标签--> 解开我 最神秘的等待</br> 星星坠落 风在吹动</br> 终于再将你拥入怀中</br> 两颗心颤抖</br> 相信我 不变的真心</br> 千年等待 有我承诺</br> 无论经过多少的寒冬</br> 我决不放手</br> -
水平线标签
<!--水平线标签--> <hr/> -
粗体，斜体
<!--粗体，斜体--> <hr/> 粗体：<strong>i love you</strong> 斜体： <em>i love you</em> -
特殊符号
<!--特殊符号--> <h1>特殊符号</h1> <p>大于号 : > </p> <p>小于号 : < </p> <p>空格 : 你 好 | 你 好</p> <p>引号 : ""</p> <p>版权符号 : © 版权所有狂神</p> <!--& + 符号字符 + 分号结束-->
图像标签
<img src="图像的文件地址" alt="加载失败" height="350" width="350" border="1" title="示意图" >
- src：图片地址
- alt：加载失败需要展示的信息
- height：图片的高度
- width：图片的宽度
- border：边框(如果需要)
- title：鼠标悬停至图片需要显示的提示
<img src="" alt=""..../>
img属性：src(必写) 表示图片的URL
alt代表图像替代文字
height、width代表高和宽 可以是像素（weight="50px"）也可以是百分比(height="30%")
src内容：可以是绝对路径，也可以是相对路径，相对路径是相对网页来说：
1.如果图片和网页在同一目录下 <img src="1.jpg"/>
2.如果图片在网页的上一目录中 <img src="../1.jpg"/>
3.如果图片在网页的下一级目录中 <img src="文件夹名/1.jpg"/>
当由于：网速太慢、src属性中的错误、浏览器禁用图像，用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容。
常见的图像格式 :
- jpg
- png
- bmp 位图
- gif
<!--img学习
src：图片地址 ----必填
title = 鼠标悬停显示
alt = 图片的名字
w h->宽，高
相对路径 ：上一级路径表示方式 ../
绝对路径 ： 不推荐使用 ../上一级目录
-->
<img src="../resources/image/1.jpg" alt="风景" title="鼠标悬停在图片上时的字样" width="200" height="200">
链接标签：
超链接：
<a href="https://www.baidu.com/" target="_blank"> 百度 </a>
- href：点击后需要跳转到的链接
- 百度：跳转到超链接的提示，点击提示即可跳转到超链接所指向的网址
- target：打开新窗口的方式
- _blank：新窗口打开
- _parent：在上一级窗口打开，常在分帧的框架页面中使用
- _self：在同一个窗口打开，默认值
- _top：在浏览器的整个窗口打开，将会忽略所有的框架结构
<!--a标签
href：必填，表示要跳转的页面
-->
<a href="https://www.baidu.com">点击我跳转到百度</a>
<!--点击图片跳转-->
<a href="https://www.baidu.com">
<img src="../resources/image/1.jpg" alt="风景" title="鼠标停落在图片上显示的文字" width="400" height="300">
</a>锚链接：
锚点链接是指在一个网页中点击之后定位到网页中的某个“位置”
需要：标记和跳转
- 创建一个标记：
<!--使用name作为标记--> <a name="top">顶部</a> - 跳转到
<a href="#top">回到顶部</a>
功能性链接
<!--功能性链接 -->
<a href="mailto:24736743@qq.com">发送邮件</a>
<!--QQ点击联系
地址 : https://shang.qq.com/v3/widget.html
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="给狂神发消息" title="给狂神发消息"/>
</a>
target:
<!--a标签
href：必填，表示要跳转的页面
target:
_blank 在新标签中打开
_self 在自身的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>
<a href="1.我的第一个网页.html" target="-_self">点我跳转到第一个网页</a>行内元素和块元素
独占一行的标签 : 块标签
- p
- h1~h6
只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签
- a
- strong
- img
- em
开放标签—>闭合标签
开放标签
<p> </p>
<p> </p>
<p> </p>
<p> </p>
自闭合标签
<br/>
列表
-
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
-
标签。每个列表项始于
<li>标签。
列表项使用数字来标记
-
标签。每个列表项始于
-
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签 -
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
-
有序列表
<!--有序列表 应用范围：试卷，问答。。 --> <ol> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>c/c++</li> </ol> -
无序列表：
<!--无序列表 应用范围：导航。。 --> <ul> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>c/c++</li> </ul> -
自定义列表
<!--自定义列表 --> <dl> <dt>学科</dt> <dd>java</dd> <dd>Python</dd> <dd>运维</dd> <dd>前端</dd> <dd>c/c++</dd> <dt>位置</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dd>深圳</dd> <dd>杭州</dd> </dl>
表格
为什么使用表格 ?
- 简单通用
- 结构稳定
表格结构:
- 单元格
- 行
- 列
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
border="1px" 加载边框
-->
<table border=1px>
<tr>
<!--colspan=跨列-->
<td colspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!--colspan=跨行-->
<td rowspan="3">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
显示结果：
视频/音频
在网页上播放视频和音频 ：需要一个标签控制音频或者视频 .
<!--音频和视频-->
<!--视频
video标签
src -> 视频路径 (必填)
controls -> 给视频增加控制播放的按钮
autoplay -> 自动播放视频
w-h -> 视频窗口大小
-->
<video src="../resources/video/多线程01：概述.mp4" controls autoplay width="300" height="200"></video>
<!--音频
src -> 音频路径
controls -> 给音频增加控制播放的按钮
autoplay -> 自动播放视频
-->
<audio src="../resources/audio/Human%20Legacy%20-%20Ivan%20Torrent.mp3" controls autoplay></audio>
网页结构分析
头部
导航
主体内容
底部
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主题</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
内联框架iframe
所谓的iframe内联框架，简单理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。
<!--iframe内联框架-->
<!--
作用:在一个网页中嵌入另外一个网页
-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="960" height="540"></iframe>-->
<!--在网页中实现容器的效果,实现页面内容加载-->
<iframe name="markup" src="" frameborder="0"></iframe>
<a href="https://www.baidu.com" target="markup">test</a>
<a href="2.HTML的标签.html" target="markup">test</a>
<a href="3.图像标签.html" target="markup">test</a>
<a href="4.超链接.html" target="markup">test</a>
<iframe src="//player.bilibili.com/player.html?aid=54171171&cid=95552484&page=17"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>
扫一扫
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
