本文是HTML笔记的第一部分，介绍了HTML的基本概念，包括超文本标记语言的定义和构成。接着，展示了如何创建第一个HTML页面，并详细讲解了基本标签的用法，如实体符号、表格的结构（thead、tbody、tfoot）、背景设置和超链接。此外，还提及了图片和列表的初步知识。
概述
HTML：Hyper Text Markup Language（超文本标记语言）
由大量的标签组成，每一个标签都有开始和结束标签
<标签>
<标签>
<标签 属性名 = '属性值' 属性名 = '属性值'></标签>
</标签>
</标签>
超文本：流媒体、图片、声音、视频…
- HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
- HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…
- 直接采用浏览器打开HTML文件就是运行
第一个HTML页面
<!--
1.这是HTML的注释
2.加上以下代码的第一行就表示HTML5语法，去掉就表示HTML4.0
3.HTML不区分大小写，语法松散不严格
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容，欢迎学习HTML！
</body>
</html>
基本标签
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--标题字:是HTML预留的格式，和word中的标题字相同-->
<!--
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
-->
<h2>《上古卷轴5：天际》</h2>
<!--段落标记-->
<!--<p>内容</p>-->
<p>《上古卷轴5：天际》是Bethesda出品的史诗性奇幻风格RPG《上古卷轴》系列的第五部作品。</p>
<p>游戏设定在《上古卷轴4》的200年之后，随着天际省之王的暗杀，诺德内部出现了内战。大部分诺德人意图让天际省脱离帝国。
诺德内战是上古卷轴的终极预兆，古诺德毁灭之神Alduin的回归，现已呈现为龙的形态。Alduin拥有一支苍龙军团，名为Jill。</p>
<p>本作将会和《上古卷轴4》拥有同等大小的地图。在这广阔的地图之上，Bethesda工作室给玩家提供了超过120个不重复的地下迷宫，以及9个规模宏大的城市供玩家探索，
而玩家将在这个奇异自由的世界踏上史诗性的征程，使用自己心仪的武器装备自己擅长的技能，去和巨兽，飞龙战斗。前作作为引领PC硬件新潮流的RPG，
续作的配置则平易近人，不过Bethesda依然为该作注入了新元素，那就是新引擎“创造”打造的重峦叠嶂的规模与细节的华丽。</p>
<p>“我曾经跟你一样是个上古卷轴玩家，直到我发现了这个游戏可以打MOD。。。。。。。”</p>
<p>《上古卷轴5：天际》又称《少女卷轴》，但这个游戏的MOD只是让这个游戏变得更精彩，并不是主体。
老滚5是个充满了魅力的游戏，它让我沉迷到晚上睡觉都睡不着。美丽的场景与配乐，多样的玩法，精彩而丰富的故事，广阔而精彩纷呈的世界，注定了它永远是我心中RPG游戏的王者！</p>
<!--换行标记-->
<!--<br>-->
画面：9.0 除去MOD，上古卷轴5的画面在同年中的游戏也是极为出众的，而且其中许多的场景也极其壮观。<br>
音乐：9.5 打龙时的配乐让人激烈澎湃，老滚5的配乐充分体现了这个魔幻世界的精彩。<br>
可玩性：10 炼金、附魔；近战、弓箭、魔法；正面刚、潜行背刺等多到无法想象的玩法可以让人研究很久。你可以用你想的方式来探索这个广阔的世界。<br>
耐玩性：10 不说MOD，广阔到无法想象的世界，多到几百小时的支线，根本不用担心，你连续玩一个月也不可能玩完。<br>
故事：10 老滚5讲述的是身为龙裔的玩家如何成为世界上各个组织的老大（支线），最后干掉上古恶龙奥杜因的故事；
重要的是，多达百个的支线，塑造的，每个人物都有模有样，每个人都有自己的故事。这才是真正的史诗。<br>
<!--横线，独目标及-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--语法太松散了-->
<hr color="green" width="30%">
<!--预留格式，里面保留的格式在网页上还是这个格式，不会变，不加这个标签内容会在一行-->
<pre>
for(int i = 0,i < 10,i++){
System.out.println("i =" + i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>m</sub>
<!--字体标签-->
<font color = "red">字体标签</font>
</body>
</html>
实体符号
<!doctype html>
<html>
<head>
<title>实体符号</title>
</head>
<body>
<!--b<a>c-->
<!--实体符号特点：以&开始，以;结束，<是小于号，>是大于号-->
b<a>c
<!--一个 就是一个空格-->
a bc
</body>
</html>
表格
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--center标签可以使内容居中-->
<center><h1>表格</h1></center>
<!--
border = "1px" 设置表格的边框为1像素宽度
width 宽度
height 高度
-->
<table border = "1px" width = "60%" height = "150px" align = "center">
<!--
algin对齐方式
可以出现在table当中，表示表的位置
可以出现在tr当中，表示整个行的位置
可以出现在td当中，表示单元格的位置
-->
<tr align = "center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</table>
</body>
</html>
单元格合并
<!doctype html>
<html>
<head>
<title>表格单元格合并，以及th标签</title>
</head>
<body>
<table border = "1px" width = "50%">
<tr>
<!--
<td>员工编号</td>
<td>员工薪资</td>
<td>员工部门</td>
-->
<th>员工编号</th>
<th>员工薪资</th>
<th>员工部门</th>
<!--
th标签自带居中和加粗
-->
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<!--
注意事项：
1.row合并的时候，删除下面的单元格
这里是c和f合并
-->
<td rowspan = "2">c</td>
</tr>
<tr>
<!--
col合并的时候，对删除哪一个没有要求，都行
这里是d和e合并
-->
<td colspan = "2">d</td>
<!--<td>e</td>-->
<!--<td>f</td>-->
</tr>
</table>
</body>
</html>
thead、tbody、tfoot
<!doctype html>
<html>
<head>
<title>thead tbody tfoot在table中不是必须的，置视这样做便于后期的JS代码的编写</title>
</head>
<body>
<table border = "1px" width = "50%">
<!--头-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>员工部门</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan = "2">c</td>
</tr>
<tr>
<td colspan = "2">d</td>
<!--<td>e</td>-->
<!--<td>f</td>-->
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
背景色和背景图片
<!DOCTYPE html>
<html>
<head>
<!--
这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意：并不是设置当前页面的字符编码方式
-->
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor：设置背景色
background：设置背景图片
-->
<body bgcolor="red" background="img/琴瑟仙女-娑娜%20.jpg">
</body>
</html>
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放
2.img标签就是图片标签
3.src属性是图片的路径
4.width设置宽度，height设置高度
5.title设置鼠标悬停时显示的信息
6.alt设置图片加载失败时显示的提示信息
-->
<img src="img/琴瑟仙女-娑娜%20.jpg" width="1200px" title="我是琴瑟仙女的图片" alt="图片找不到哦!"/>
<br><br><br>
<img src="img/正义天使-大天使长米迦勒-凯尔.jpg" width="1200px" title="我是正义天使的图片" alt="图片找不到哦!"></img>
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接的特点：
有下划线
鼠标停留在下划线上面显示小手形状
点击超链接之后还能跳转页面
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com/">京东商城</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<br><br>
<!--
href：hot references 热引用
href属性后面一定是一个资源的地址
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径
-->
<!--连接008的网页-->
<a href="008图片.html">008</a>
<br><br>
<!--图片超链接-->
<a href="http://www.hao123.com/">
<img src="img/正义天使-大天使长米迦勒-凯尔.jpg" width="100"/>
</a>
<br><br>
<!--
超链接有一个target属性：
_blank：新窗口
_self：当前窗口（默认就是这种方式）
_top：顶级窗口
_parent：父窗口
-->
<a href="http://www.hao123.com/" target="_blank">
<img src="img/正义天使-大天使长米迦勒-凯尔.jpg" width="100"/>
</a>
</body>
</html>
<!--
超链接的作用：
通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应
B---请求--- S
S---响应--- B
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
从本质上没有区别，都是向服务器请求
从操作上来讲，超连接使用更方便
-->
列表（了解）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol type="a">
<li>西红柿</li>
<li>土豆</li>
<li>白菜</li>
</ol>
</li>
<li>甜点</li>
</ol>
<br>
<!--无序列表-->
<ul>
<li>中国</li>
<li>日本</li>
<li>美国</li>
</ul>
<br>
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>朝阳区</li>
</ul>
</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>日本</li>
<li>美国</li>
</ul>
</body>
</html>
扫一扫
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
