什么是HTML
HTML : Hyper Text MarkUp Language (超文本标记语言)
文本:文字、有格式的文本
超文本:文字,图片,音频,视频,动画、定位…….
标记语言 : <>
浏览器加载每个HTML代码, 加载各个标签后在网页上产生相应的效果
idea中的配置
删除原有的scr文件夹,重新创建一个新的文件夹
设置HTML代码写好后选择加载的浏览器,若没有你要用的浏览器,需要找到这个浏览器所在文件夹的.exe文件地址,放在原有的path地址上##
基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静夜思</title>
</head>
<body>
<h1>静夜思</h1>
<!--h1表示标题,h2,h3等分别表示次标题-->
<em>唐代</em> 作者: <strong>李白</strong> <br/>
<!--  空格 strong 加粗字体 em表示斜体-->
<hr/>
<!--hr 插入一条分割线-->
<p>
<!-- p 表示插入一个新的段落 -->
床前明月光,<br/>
疑是地上霜,<br/>
举头望明月,<br/>
低头思故乡,<br/>
<!--br 表示换行-->
</p>
</body>
</html>
效果
插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路飞</title>
</head>
<body>
<img src="../statics/images/路飞.jpg" title="路飞" width="500" height="1000">
</body>
</html>
效果
超链接
href:要跳转地址
target: 目标打开的窗口,在自己这个当前页面打开,还是在新的页面打开
_self : 在自己的窗口打开
_blank: 在新窗口中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com/"target="_self">
<img src="../statics/images/bd.png">
</a>
</body>
</html>
效果
锚链接
用于页面中的跳转,也可以在不同页面之间跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<a href="#markerA">A</a><br>
<a href="#markerB">B</a><br>
<a href="#markerC">C</a><br>
<hr>
<!--标记A-->
<a name="markerA">A</a>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<a name="markerB">B</a>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<a name="markerC">C</a>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
</body>
</html>
列表
- 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>热搜1</li>
<li>热搜2</li>
<li>热搜3</li>
</ol>
</body>
</html>
- 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</body>
</html>
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>苹果</dt>
<dd>葡萄</dd>
<dd>桃子</dd>
<dd>芒果</dd>
<dd>香蕉</dd>
<!--dt表示顶着左端显示
dd表示空出几个空格-->
</dl>
</body>
</html>
表格
- 表格 table
- 行 tr rowspan
- 列 td colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="2">1-1</td>
<!--rowspan表示跨行-->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td colspan="2">2-2</td>
<!--colspan表示跨列-->
</tr>
</table>
</body>
</html>