目录
01-html代码的初体验
<!DOCTYPE html>
<!-- 文档类型 html5-->
<html lang="zh">
<!-- html文件的根标签 当前页面的默认语言 英语-->
<head>
<meta charset="utf-8">
<!-- 元标签 设置字符编码格式 -->
<title>小游戏,4399小游戏,小游戏大全,双人小游戏</title>
<!-- 网页标题 -->
</head>
<!-- 头部标签 -->
<body>
今天不下雨了 你好
</body>
<!-- 身体标签 -->
</html>02-元素属性
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 元素 -->
<张三> 我这有点热，请注意保护 </张三>
<!--开始标签 内容 结束标签 -->
<!-- 属性 -->
<张三 height="180" width="160"> 我这有点热 </张三>
<!-- 属性名="属性值" -->
<!-- 每一个属性的 前面必须有一个空格 -->
<!-- 单标签 -->
<!-- <img src="" alt=""> -->
<!-- 双标签 -->
<!-- <div></div> -->
<王五>
<李四>
<樊三>
</樊三>
</李四>
</王五>
<!-- 嵌套关系 -->
<王五>
</王五>
<李四>
</李四>
<!-- 并列关系 -->
</body>
</html>03-排版标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标题标签 h -->
<!-- 1.文字大小改变 -->
<!-- 2.文字加粗 -->
<!-- 3. 1 - 6 文字大小从大到小 加粗不改变 -->
<!-- h1 logo -->
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h1>有一种把四面八方都卷进来的感觉！1</h1>
<h2>有一种把四面八方都卷进来的感觉！2</h2>
<h3>有一种把四面八方都卷进来的感觉！3</h3>
<h4>有一种把四面八方都卷进来的感觉！4</h4>
<h5>有一种把四面八方都卷进来的感觉！5</h5>
<h6>有一种把四面八方都卷进来的感觉！6</h6>
<!-- <h7>有一种把四面八方都卷进来的感觉！7</h7>
<h8>有一种把四面八方都卷进来的感觉！8</h8>
<h9>有一种把四面八方都卷进来的感觉！9</h9> -->
有一种把四面八方都卷进来的感觉！
<p>本次世预赛，中国男足被分入了实力强劲
<br>“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p>
<!-- <p>本次世预赛，中国男足被分入了实力强劲的“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p>
<p>本次世预赛，中国男足被分入了实力强劲的“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p>
<p>本次世预赛，中国男足被分入了实力强劲的“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p>
<p>本次世预赛，中国男足被分入了实力强劲的“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p>
<p>本次世预赛，中国男足被分入了实力强劲的“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p>
<p>本次世预赛，中国男足被分入了实力强劲的“死亡小组”，与日本、澳大利亚和沙特同组。这三支球队都是亚洲足坛的佼佼者，其中日本更是高居亚洲排名第一，其实力不容小觑。澳大利亚和沙特也分别位列亚洲前列，拥有着不俗的实力和深厚的足球底蕴。面对这样的对手，中国队的晋级之路无疑充满了艰辛与挑战。</p> -->
<!-- p 每一个标签都是一整个自然段 p标签上下都有空白间隙 对文本没有任何的特殊效果 -->
<hr>
<!-- 水平线标签 单标签 分割线 可以写在两个标签之间 也可以写在 文本中间-->
<br>
<!-- 换行 单标签 可以写在两个标签之间 也可以写在 文本中间 -->
<div>刚刚玩的啥阿？</div>
<div>刚刚玩的啥阿？</div>
<div>刚刚玩的啥阿？</div>
<!--div 任何特殊的样式都没有 -->
<p><span>介绍</span>：末法时代，灵气修仙资源匮乏，炼气期强者横行霸道？作为一名游戏玩家必须整顿修仙世界，与众多沙雕修仙者一决高下！</p>
<span></span>
<!-- span 用来装饰文本的 -->
</body>
</html>04-文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>末法时代b</b>
<strong>资源匮乏strong</strong>
<!-- b strong 加粗 -->
<i>末法时代i</i>
<em>资源匮乏em</em>
<!-- i em 倾斜 -->
<s>末法时代s</s>
<del>资源匮乏del</del>
<!-- s del 删除线-->
<u>末法时代u</u>
<ins>资源匮乏ins</ins>
<!-- u ins 下划线 -->
<br>
<!-- 横向排列 -->
<!-- 语义化标签 -->
</body>
</html>05-图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../images/4399_1.jpg" title="你好" alt="图片加载失败，请刷新页面" height="890">
<!-- 单标签 -->
<!-- src 图像路径 -->
<!-- 路径 1.绝对路径 2.相对路径-->
<!-- 1.绝对路径 -->
<!-- C:\Users\AnRan\Desktop01-HTML\images\4399_1.jpg -->
<!-- 2.相对路径 -->
<!-- 其实就是从当前的文件开始 一层一层的查找所需要的资源 -->
<!-- ./ 在当前目录中查找 -->
<!-- ../ 返回上一级 -->
<!-- alt 当图片加载失败的时候出现的提示信息 -->
-
<!-- width 宽度 -->
<!-- height 高度 -->
<!-- 根据原本的图片比例设置宽度高度 -->
<!-- 只设置宽度 或者 高度 -->
<!-- title 标题 提示文本 -->
</body>
</html>06-链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
text-decoration: none;
}
</style>
</head>
<body>
<!-- 文字颜色 蓝色 下划线 点击变色 鼠标变小手 -->
<!-- target 目标打开方式 _blank 在新的页面打开 -->
<!-- href url地址 -->
<a href="http://.com" target="_blank" class="box">我是帅哥</a>
<!-- 1. 访问网络资源 -->
<!-- 必须通过http:// 协议来访问 -->
<a href="./04-文本格式化标签.html">访问文本格式标签</a>
<a href="./html.zip">nihao </a>
<!-- 2. 访问本地资源 下载 -->
<!-- 相对路径来查找文件 -->
<!-- 3.锚点定位 -->
<!-- 3.1 先找到需要跳转的目的地 给目的地标签添加id属性 添加名字 -->
<!-- 3.2 在a标签href 写id名字 通过#来表示id-->
<a href="#jl">幼年经历</a>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p id="jl">过了六七年，把个家产费得罄尽，单靠着一身本事，在本府充做个副排军。一有钱钞在手，三兄四弟，终日大酒大肉价同；若是有些不如意时节，拽出拳头便打，所以众人又惧怕他，又喜欢他。</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<p>你好你好你好你好</p>
<!-- 3.锚点定位 -->
<p>我是帅哥</p>
</body>
</html>07-head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小游戏,4399小游戏,小游戏大全,双人小游戏</title>
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
<meta name="keywords" content="弱电工程,弱电工程公司" />
<meta name="description" content="和智电子科技有限公司, 是一家集施工研发,销售,服务于一体的高新技术企业,公司已成功承揽过各类企业弱电工程,酒店弱电工程,政府弱电工程,安防监控工程,智能弱电工程,综合布线工程等。" />
</head>
<body>
<!-- <div>1+1 > 3 © ©</div> -->
<div>123</div>
<div>456</div>
<div>789</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
