前端---HTML（一）

发表于 2025-12-20 09:05:49

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

HTML_网络的三大基石和html平凡文本标签

1.我们要访问网络，需不必要知道，网络上的东西在哪？
   为什么我们写，www.baidu.com就能找到百度了呢？
  我一拼ping www.baidu.com   就拼到了ip地点：  [119.75.218.70]
   然后www.baidu.com 是dns服务，他会将我们的域名转成ip地点。好记好推广
我们在网络上看的全部东西，通过一个地点都是可以找到的。那么这个地点就叫URL

2.三大基石： URL，HTTP协议，HTML

URL：在WWW上，每一信息资源都有同一的且在网上唯一的地点，该地点就叫URL（Uniform Resource Locator,同一资源定位符），它是WWW的同一资源定位标志，就是指网络地点。
HTTP协议：http是一个简朴的哀求-相应协议，它通常运行在TCP之上。它指定了客户端大概发送给服务器什么样的消息以及得到什么样的相应。哀求和相应消息的头以ASCII码情势给出；而消息内容则具有一个类似MIME的格式。这个简朴模子是早期Web乐成的有功之臣，由于它使得开发和摆设是那么的刀切斧砍。
HTML：HTML称为超文本标志语言。

  -------我们访问一个资源必要知道它在哪。那就是地点/路径
   URL负责定位资源的：同一资源定位符(网络路径)
   URI：同一资源标识符(服务器内部路径)

---------那么根据地点/路径找到资源的过程中必要服从交通规则。
http负责传输资源:超文本传输协议  (对我们传输的内容举行一个规则的束缚)
   ===什么是超文本：除了平凡文本之外，还包罗图片，音频，视频等效果
   ===好久从前，通过欣赏器看到的东西都是纯文本的。就是由于有html页面才这么丰富多彩。
   ===把这些丰富多彩的页面传输给欣赏器用户看的这个过程，必要依照一个协议，就是http协议。

---------比如我访问百度，那么百度返回给我们的是什么呢？
            右键，“检察源文件”：百度给我们返返来，而且颠末欣赏器解压缩的。   （百度给我们发的文件是一个通过XX压缩后的文件，如允许以镌汰数据的传输，然后在通过欣赏器解压缩，就又回到了原来的样子。）
            假如有一天你打开百度，表现的是这些解压缩的文件，肯定很头疼。以是说我们必要把这些文本和超文本以各种各样的样式，展示出来。

--------------那么欣赏器怎么知道哪个是图片，哪个是音频，哪个是视频？
我们用特殊的标志，把文本/超文本标志起来，如许一看就知道是什么了。那这些标志可以本身扩展吗？肯定是不可以，由于你扩展了别人不知道啊，不知道就没办法分析了。以是html是不可以扩展的。====html统共就这些，学一个少一个，那这些东西是谁规定的呢？w3c。谁做的实现？各欣赏器。===以是才有的欣赏器差别。
HTML分析表现资源的:将超文本的信息通过特殊的标识  举行分析表现。
3、HTML的标准结构

【1】先用平凡文本文档新建一个文本，将文本的后缀改为.html 大概 .htm （巨细写不区分）
【2】编辑：标准结构：

<html>
<head></head>
<body>
this is my first html....
</body>
</html>

复制代码

【1】html标签
界说 HTML 文档，这个元素我们欣赏器看到后就明确这是个HTML文档了，以是你的别的元素要包裹在它内里，标签限定了文档的开始点和竣事点，在它们之间是文档的头部和主体。
【2】head标签---》内里放的是页面的设置信息
head标签用于界说文档的头部，它是全部头部元素的容器。<head> 中的元素可以引用脚本、指示欣赏器在那边找到样式表。文档的头部形貌了文档的各种属性和信息，包罗文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包罗的数据都不会真正作为内容表现给读者。
下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>、 <base>。
应该把 <head> 标签放在文档的开始处，紧跟在 <html> 反面，并处于 <body> 标签之前。
文档的头部经常会包罗一些 <meta> 标签，用来告诉欣赏器关于文档的附加信息。
例子：

<html>
<!--
head标签中：放入：页面的配置信息
head标签中可以加入：
<title>、<meta>、<link>、<style>、 <script>、 <base>。
-->
<head>
<title>百度一下，你就知道</title>
<!--设置页面的编码，防止乱码现象
利用meta标签，
charset="utf-8" 这是属性，以键值对的形式给出 k=v a=b
告诉浏览器用utf-8来解析这个html文档
-->
<meta charset="utf-8" />
<meta name="author" content="msb;[email protected]" />
<meta name="keywords" content="马士兵教育;线上培训;架构师课程" />
<meta name="description" content="马士兵教育详情页" />
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
</head>
<!--
body标签中：放入：页面展示的内容
-->
<body>
this is a html..你好
</body>
</html>

复制代码

【3】body标签---》内里放的就是页面上展示出来的内容
body 元素是界说文档的主体。body 元素包罗文档的全部内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表现网页的主体部分，也就是用户可以看到的内容，可以包罗文本、图片、音频、视频等各种内容！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--下面的文字就是普通的文本，文本编辑器中的任何效果：比如空格，换行都不影响页面，
页面想要实现效果必须通过标签来实现
-->
媒体：为人父母，要不要“持证上岗”？
媒体：为人父母，要不要“持证上岗”？
媒体：为人父母，要不要“持证上岗”？
媒体：为人父母，要不要“持证上岗”？
<!--标题标签
h1-h6 字号逐渐变小，每个标题独占一行，自带换行效果
h7之后都属于无效标签，但是浏览器也不会报错，而是以普通文本的形式进行展现
-->
<h1>媒体：为人父母，要不要“持证上岗”？</h1>
<h2>媒体：为人父母，要不要“持证上岗”？</h2>
<h3>媒体：为人父母，要不要“持证上岗”？</h3>
<h4>媒体：为人父母，要不要“持证上岗”？</h4>
<h5>媒体：为人父母，要不要“持证上岗”？</h5>
<h6>媒体：为人父母，要不要“持证上岗”？</h6>
<h7>媒体：为人父母，要不要“持证上岗”？</h7>
<h8>媒体：为人父母，要不要“持证上岗”？</h8>
<!--横线标签
width:设置宽度
300px ：固定宽度
30%：页面宽度的百分比，会随着页面宽度的变化而变化
align：设置位置 left ,center,right 默认不写的话就是center居中效果
-->
<hr width="300px" align="center"/>
<hr width="30%" align="center"/>
<!--段落标签：
段落效果：段落中文字自动换行，段落和段落之间有空行
-->
5月&emsp;26日，“建议父母持合格<父母证>上岗©”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。
5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。
5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。
加粗
倾斜
下划线
加粗倾斜下划线
<del>你好你不好</del>
<pre>
public static void main(String[] args){
System.out.println("hello msb....");
}
</pre>
5月26日，“建议父母持合格父母证上岗”冲上微博 热搜，迅速引发热议。在正在召开的全国两会上，全国政
建议父母持合格父母证上岗
</body>
</html>

复制代码

多媒体标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--图片
src:引入图片的位置
引入本地资源
引入网络资源
width:设置宽度
height:设置高度
注意:一般高度和宽度只设置一个即可，另一个会按照比例自动适应
title:鼠标悬浮在图片上的时候的提示语，默认情况下（没有设置alt属性）图片如果加载失败那么提示语也是title的内容
alt:图片加载失败的提示语
-->
<img src="img/ss6.jpg" width="300px" title="这是一个美女小姐姐" alt="图片加载失败"/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1833909874,761626004&fm=26&gp=0.jpg" />
<embed src="music/我要你.mp3"></embed>
<embed src="video/周杰伦 - 说好的幸福呢.mp4" width="500px" height="500px"></embed>
<embed src="//player.video.iqiyi.com/38913f9ed7358c0933e82a03d9b26ec1/0/0/v_19rv8qeokk.swf-albumId=9194699400-tvId=9194699400-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

复制代码

超链接标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--超链接标签：作用：实现页面的跳转功能
href:控制跳转的目标位置
target:_self 在自身页面打开（默认效果也是在自身页面打开） _blank 在空白页面打开
-->
<a href="文本标签.html">这是一个超链接01</a>
<a href="">这是一个超链接02</a>
<a href="abc">这是一个超链接03</a>
<a href="https://www.baidu.com" target="_self">这是一个超链接04</a>
<a href="https://www.baidu.com" target="_blank">这是一个超链接05</a>
<a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
</body>
</html>

复制代码

设置锚点：
应用场合：当一个页面太长的时间，就必要设置锚点，然后可以在同一个页面的差别位置之间举行跳转。
同一个页面差别位置的跳转：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="1F"></a>
<h1>手机</h1>
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
华为p40
<a name="2F"></a>
<h1>化妆品</h1>
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
大宝
<a name="3F"></a>
<h1>母婴产品</h1>
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
奶粉
<a name="4F"></a>
<h1>图书</h1>
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
thinking in java
<a href="#1F">手机</a>
<a href="#2F">化妆品</a>
<a href="#3F">母婴产品</a>
<a href="#4F">书籍</a>
</body>
</html>

复制代码

差别页面利用锚点：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="设置锚点.html#3F">超链接</a>
</body>
</html>

复制代码

列表标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--无序列表:
type:可以设置列表前图标的样式 type="square"
如果想要更换图标样式，需要借助css技术： style="list-style:url(img/act.jpg) ;"
-->
<h1>起床以后需要做的事</h1>
<ul type="square">
<li>睁眼</li>
<li>穿衣服</li>
<li>上厕所</li>
<li>吃早饭</li>
<li>洗漱</li>
<li>出门</li>
</ul>
<!--有序列表:
type:可以设置列表的标号：1,a,A,i,I
start:设置起始标号
-->
<h1>学习java的顺序</h1>
<ol type="A" start="3">
<li>JAVASE</li>
<li>ORACLE</li>
<li>MYSQL</li>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>

复制代码

表格标签：
应用场景：在页面结构很规整的时间，大概利用的就是表格。
归并原理：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格：4行4列
table:表格
tr:行
td:单元格
th:特殊单元格：表头效果：加粗，居中
默认情况下表格是没有边框的，通过属性来增加表框：
border:设置边框大小
cellspacing：设置单元格和边框之间的空隙
align="center" 设置居中
background 设置背景图片 background="img/ss.jpg"
bgcolor :设置背景颜色
rowspan:行合并
colspan：列合并
-->
<table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
<tr bgcolor="bisque">
<th>学号</th>
<th>姓名</th>
<th>年纪</th>
<th>成绩</th>
</tr>
<tr>
<td align="center">1001</td>
<td>丽丽</td>
<td>19</td>
<td rowspan="3">90.5</td>
</tr>
<tr>
<td colspan="2" align="center">2006</td>
<td>30</td>
</tr>
<tr>
<td>3007</td>
<td>小明</td>
<td>18</td>
</tr>
</table>
</body>
</html>

复制代码

总结

HTML是构建网页的底子语言，它通过标志元素的方式来形貌网页结构。明确HTML的根本结构和常用标签是把握网页开发的第一步。通过标签和属性的组合，开发者可以机动地控制网页的表现内容、结构、样式及功能，为进一步学习CSS和JavaScript打下坚固的底子。

前端---HTML（一）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

莫张周刘王