初识HTNL
目录
1.HTML网页结构
2.meta标签的作用
3.常用标签
4.注释与特殊标签
5.图片与超链接
6.连接标签
7.锚链接
8.行内元素和块元素
1.HTML网页结构
<!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></body>
</html>2.meta标签的作用
//关键字 ”鸿卓乐学，IT培训“为关键字的内容，多个关键字使用“，”隔开
<meta name="keywords" content="鸿卓乐学，IT培训" />
//内容描述
<meta name="description" content="鸿卓乐学是国内最大的……" />3.常用标签
h1...h6 标题标签
<p> 段落标签
<br/> 强制换行
<hr/> 水平线标签
<del> 字体添加删除线
<me> 字体倾斜
<strong> 字体加粗4.注释与特殊标签
注释快捷键：ctrl + /
表现： <!--内容-->
5.图片与超链接
<img src="path" alt="text" title="text" width="x" height="y" />
src: 表示图片路径
alt： 图片无法加载时出现的内容
title： 鼠标悬停在图片时出现的内容
width： 图片的宽 单位px默认
height：图片的高 单位px默认6.连接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>href 连接路径
target 跳转后位置 _blank（跳转到一个新的窗口） _self（在本窗口打开 为默认值）
//添加音频
<audio src="path" >
//内部属性： controls 显示音频控制面板 loop 循环播放 autoplay 自动播放7.锚链接
（1）从A页面的甲位置跳转到本页中的乙位置
（2 从A页面的甲位置跳转到B页面中的乙位置
//创建跳转标记
<a name="marker">乙位置</a>
//创建跳转链接
<a href="#marker">甲位置</a>
（2）从A页面跳转到B页面
B页面代码：<a name="4"><img src="/imgs/img4.png"></a>
A页面代码：<a href="4.html#4">点击跳转</a> //4.html为B页面的路径8.行内元素和块元素
（1）行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
（2）块元素：无论内容多少，该元素独占一行（p、h1-h6…）
（1）示例：<p>我是元素</p><h1>我是标题h1</h1>
（2）示例： <a href="#">我是超链接a元素</a><strong>我是strong元素</strong>