目录
-
001-我的第一个HTML页面
<!--如果加上以下代码表示当前页面中的HTML语法采用的是H5的语法。-->
<!--如果没有以下这个代码，表示HTML的版本采用的是HTML4.0-->
<!doctype html>
<!--HTML的注释-->
<!--HTML的根标签-->
<html>
<!--头-->
<!--一定要注意合理的缩进：代码格式要规范-->
<!--什么时候缩进？有父子关系的时候才要缩进。-->
<head>
<!--网页的标题，显示在浏览器的左上角-->
<title>我的第一个HTML页面</title>
</html>-
002-HTML的语法严格还是松散
<!--通过测试得出结论：html的语法是松散的。不严格-->
<!--虽然HTML的语法不够严谨，但是还是要遵守语法规则。编写合适的代码-->
<!--提醒：也不是绝对的松散，有一些特殊的标签如果丢掉的话还是会出现问题的。-->
<!--html语法不区分大小写。但是最好是全部小写。-->
<!--如果标签中有空格也可以正常显示-->
<!doctype html>
<html>
<head>
<title>研究一下HTML的语法松散还是严格的</title>
</head>
<body>
研究一下HTML的语法是松散的还是严格的。会有问题吗？
</body>
</html>-
003-HTML的基本标签
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</html>
<body>
<!--这里重点学习一下HTML的常用标签-->
<!--段落标记p标签-->
<p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。</p><p>贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
《黛玉葬花》是文学名著</p><p>《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
<!--标题字独自占用一行-->
<h1>标题字</h1><!--最大-->
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6><!--最小-->
<!--换行-->
<!--注意：HTML源代码当中换行并不是真正的换行。HTML中换行需要使用br标签-->
hello
<br> <!--独目标记，负责在网页上换行-->
world<br>呵呵<br>hhh<br >哈哈哈
<!--水平线-->
<hr> <!--独目标记--><!--color="red" 是一个颜色属性。-->
<!--其中color是属性名，"red"是属性值，通过color属性可以设置颜色-->
<hr color = "red">
<!--width属性用来指定水平线的长度，500px表示500像素-->
<hr color = "black" width = "500px">
<!--width等于50%是水平线一直占有浏览器窗口宽度的一半，是动态的，不是固定的-->
<hr color = "yellow" width = "50%">
<br><br><br><br><br><br>
<!--预留格式-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i += " + i);
}
</pre>
<!--粗体字-->
<b>粗体字</b>
<!--斜体字-->
<i>斜体字</i>
<!--插入字-->
<ins>插入字</ins>
<!--删除字-->
<del>删除字</del>
<!--右上角加字-->
10<sup>3</sup>
<!--右下角加字-->
20<sub>5</sub>
<!--font标签-->
<font size = "5" color = "red">动力节点</font>
</body>
</html>-
004-HTML的实体标签.html
<!doctype html>
<html>
<head>
<title>实体标记</title>
</head>
<body>
<!--空格-->
动力节点 - 口口相传的Java黄埔军校<br>
<!--所有的实体符号语法规则都是：&开头，;结尾。-->
动力节点    口口相传的Java黄埔军校。
<!--大于号，小于号-->
<!--在网页上如果想显示一个<a>这样的内容、
直接在源代码中编写<a>是不行的。
<a>因为它被浏览器当做特殊的标签来处理了。
怎么办？使用实体符号。
< 表示小于号
> 表示大于号
-->
<br>
<a>
<br>
100 > 10 <br>
10 < 1000
</body>
</html>-
005-HTML表格
<!doctype html>
<html>
<head>
<title>HTML的表格</title>
</head>
<body>
<!--画一个表格出来-->
<!--border用来设置边框宽度。-->
<!--align 对齐方式-->
<!--width 表格宽度-->
<!--height 表格高度-->
<!--center 前后均不能有空格-->
<table align = "center" border = "1px" width = "300px" height = "180px">
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>-
006-HTML表格
<!doctype html>
<html>
<head>
<title>HTML的表格</title>
</head>
<body>
<table align = "center" ; border = "1px" >
<tr>
<td>单元格</td>
<td>单元格</td>
<td rowspan = "2">单元格1</td>
<!--行合并口诀：-->
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<!--
<td>单元格1</td>
-->
</tr>
<tr>
<!--如果不写这个合并，第三个会移动到第二个单元格的位置-->
<td colspan = "2">单元格2</td>
<!--
<td>单元格2</td>
-->
<td>单元格</td>
</tr>
</table>
</body>
</html>-
007-HTML表格
<!doctype html>
<html>
<head>
<title>HTML的表格</title>
</head>
<body>
<table align = "center" border = "1px">
<tr>
<!--
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
-->
<!--th标签中的内容可以自动加粗，自动居中-->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>杰瑞</td>
<td>76</td>
</tr>
</table>
</body>
</html>-
008-HTML表格
<!doctype html>
<html>
<head>
<title>HTML的表格</title>
</head>
<body>
<!--表格是可以被分割为三部分的：表头、表题、表脚-->
<!--thead tbody tfoot把表格分割为三部分，在表现形式上没有任何变化-->
<!--这三个标签主要的目的是为了以后JavaScript更方便操作表格。-->
<table border = "1px">
<!--表头-->
<thead>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
</body>
</html>-
009-HTML的背景颜色和背景图片
<!doctype html>
<html>
<head>
<title>背景颜色和背景图片</title>
</head>
<!--bgcolor设置背景颜色，不是浮动于浏览器上方，是嵌入到浏览器背景当中的-->
<!--<body bgcolor = "blue">-->
<!--background设置图片的路径。路径可以使相对路径也可以是绝对路径-->
<!--路劲还可以是网络当中的有效路径。-->
<body background = "tupian.jpg">
</body>
</html>-
010-HTML图片
<!doctype html>
<html>
<head>
<title>HTML的图片</title>
</head>
<body>
<!--浮动于浏览器窗口当中的一个图片元素-->
<!--
img是图片标签，这个标签可以没有结束标签。
src属性用来指定图片的路径
width用来设置图片的宽度，这个时候会等比例缩放。高度不用设置
设置高度会导致失真
title 属性用来设置鼠标悬停于图片上方时的提示信息。
alt 属性用来设置图片加载失败时的提示文本信息
</img>可以不用加
-->
<img src = "tupian.jpg" width = "300px"
title = "鼠标停留时的提示信息"
alt="图片不存在时的提示信息！">
<img src = "tupia.jpg" width = "300px"
title = "鼠标停留时的提示信息"
alt = "图片不存在时的提示信息!"
>
</body>
</html>-
011-HTML的超链接
<!doctype html>
<html>
<head>
<title>超链接/热连接</title>
</head>
<body>
<!--当鼠标停留在停留在热链接上的时候，会自动变成小手。-->
<!--并且热链接自带下划线。-->
<!--超链接，链接到百度-->
<!--a是26个英文字母当中的第一个，所以非常重要。-->
<!--HTML中最重要的就是超链接。-->
<!--href:hot reference的缩写。俗称热链接。热引用
href属性用来指定链接的路径。
a标签开始和结束之间的文本显示在浏览器上。
-->
<a href = "http://www.baidu.com">百度</a>
<br>
<!--这个链接是无法访问的-->
<a href = "www.baidu.com">百度</a><br>
<a href = "http://www.jd.com">京东</a><br>
<a href = "https://tieba.baidu.com/index.html">贴吧</a>
</body>
</html>-
012-HTML的超链接
<!doctype html>
<html>
<head>
<title>HTML的超链接</title>
</head>
<body>
<!--
href这个属性的值是什么？
href属性的值是一个：请求路径
浏览器向服务器发送，叫做：请求（英语单词叫做request）
B--向发送数据叫做请求--S
服务器向浏览器发送，叫做：响应（英语单词叫做response）
S--向发送数据叫做响应--B
浏览器向服务器发送请求，至少包括两种方式：
第一种方式：直接在浏览器地址栏输入地址，然后回车
第二种方式：用户直接在页面点击超链接发送请求。
以上两种方式在本质上没有任何区别，只是形式上的区别。
注意：、
请求路径可以使一个相对路径，也可以是一个绝对路径。
http://www.baidu.com这种路径属于绝对路径，这个路径是网络当中的一个资源。
严格意义上来讲：http://www.baidu.com是一个URL。（统一资源定位符）
-->
<a href = "http://www.baidu.com">百度</a>
<br>
<!--这个路径就是硬盘文件的路径。没有盘符，所以属于相对路径。-->
<a href = "009-HTML的背景颜色和背景图片.html">背景图片</a>
<br>
<!--这种带有盘符的路径叫做绝对路径。-->
<a href = "D:\Study\动力节点-Java夏令营-WEB前端\01-HTML\代码\001-我的第一个HTML页面.html">我的第一个HTML页面</a>
</body>
</html>-
013-HTML的超链接
<!doctype html>
<html>
<head>
<title>超链接</title>
</head>
<body>
<!--
target属性可选值是：
第一种：可以不写，默认就是_self
第二种：_self 表示当前窗口
第三种：_self 表示新窗口
第四种：_parent 表示父窗口
第五种：_top 表示顶级窗口
-->
<!--关于超链接的另一个属性 target属性，用来设定目标资源最终的显示目标位置-->
<a href = "http://www.baidu.com">百度（没有target的时候，默认是当前窗口）</a>
<br>
<!--
target = "_blank" 表示在新窗口中显示。
-->
<a href = "http://www.baidu.com" target = "_blank">百度（新窗口中显示）</a>
<br>
<!--当前窗口-->
<a href = "http://www.baidu.com" target = "_self">百度（当前窗口）</a>
<br>
<a href = "http://www.jd.com">京东（在父窗口中显示资源）</a>
<!--inner fram,翻译为内部窗体-->
<iframe src = "014.html" width = "500px" height = "600px"></iframe>
<iframe src = "http://ww.baidu.com"></iframe>
</body>
</html>
-
014
<!doctype html>
<html>
<head>
<title></title>
</html>
<body>
<h1>我是014标签</h1>
<a href = "http://www.baidu.com">百度(当前窗口)</a>
<br>
<a href = "http://www.baidu.com" target = "_parent">百度（在父窗口中显示资源）</a>
</body>
</html>
扫一扫
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
