1. html语法规范
1.1基本语法概述
1. HTML 标签是由尖括号包围的关键词,例如 <html>。
2. HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。
3. 标签对中的第一个标签是 开始标签,第二个标签是结束标签。
4. 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。
1.2 标签关系(双标签)
包含关系(父子关系)
并列关系(兄弟关系)
2.HTML基本结构标签
2.1第一个HTML网页
每个网页都会有一个基本的结构标签(骨架标签)
页面内容都是在这些基本标签上书写
HTML页面也称HTML文档
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
你我之间,黑马洗练,月薪过万,一飞冲天
</body>
</html>
2.2 第一个HTML
==HTML 文档的的后缀名必须是 .html 或 .htm ==
2.3 基本结构标签总结
html为整个人
3. 网页开发工具
3.1VSCode的使用
1. 双击打开软件。
2. 新建文件(Ctrl + N )。
3. 保存(Ctrl + S ), 注意移动要保存为 .html 文件
4. Ctrl + 加号键 ,Ctrl + 减号键 可以放大缩小视图
5. 生成页面骨架结构。 输入! 按下 Tab 键。
6. 利用插件在浏览器中预览页面:单击鼠标右键,在弹出窗口中点击“Open In Default Browser”。
3.2 VSCode工具生成骨架标签新增代码
1. <!DOCTYPE> 标签 //文档类型声明标签:告诉浏览器使用哪种HTML版本来显示网页
2. lang 语言 //网页显示
3. charset 字符集 //必须要写,否则会出现乱码
1. 文档类型声明标签
2. lang 语言种类
3. 字符集(Character set)
<meta charset=" UTF-8" /> //称为万国码
3.3 总结
4. HTML 常用标签
4.1 标签语义(标签的含义)
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
4.2 标题标签(重要)
标签语义:作为标题使用,并且依据重要性递减。
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题
特点:
1. 加了标题的文字会变的加粗,字号也会依次变大。
2. 一个标题独占一行
代码:
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
------pink老师
效果图
4.3 段落和换行标签(重要)
br后有一个空格
<!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>
<p> 单词 paragraph [ˈpærəgræf] 的缩写,意为段落。 </p>
标签语义:可以把 HTML 文档分割为若干段落。 <br />
特点:
<p>1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙</p>
</body>
</html>
效果图
4.4 文本格式化标签
4.6 图像标签和路径(重点)
1. 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标签</title>
</head>
<body>
<h4>1.显示一张名字是 imag.JPG的图片</h4>
<img src="imag.jPG" width="100"/>
<h4>2.html网页没有与jpg文件在同一级,图片不会显示</h4>
<img src="imag1.jPG" alt="我是pink老师" width="100" />
<h4>3.title 鼠标指向图片显示文字</h4>
<img src="imag.jPG" alt="我是pink老师" title="我是pink老师史密达" width="100" />
<h4>4.</h4>
<img src="imag.jPG" alt="我是pink老师" title="我是pink老师史密达" width="50"/>
<h4>5.</h4>
<img src="imag.jPG" alt="我是pink老师" title="我是pink老师史密达" height="40"/>
<h4>6.设置边框</h4>
<img src="imag.jPG" alt="我是pink老师" title="我是pink老师史密达" width="50" border="10"/>
</body>
</html>
2.路径
相对路径:图片相对于 HTML 页面的位置
同一级 <img src="baidu.gif" /> //图片名:baidu.gif
下一路径 / <img src="images/baidu.gif" /> //相当于图片是html的儿子,要先访问爸爸
下一路径 ../ <img src="../baidu.gif" /> //通过html网页找爸爸
../../ 上两级
绝对路径::是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
vscode复制路径即可
<img src="C:\Users\11341\Desktop\web\案例\01-HTMl.html" />
4.7 超链接标签(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接标签</title>
</head>
<body>
<h4> 1.外部链接 </h4>
<a href="http://www.qq.com" target="_self"> 腾讯</a>
target 打开窗口的方式 默认的值是_self 当前窗口打开页面 <br />
_blank 新窗口打开页面
<a href="http://www.baidu.com" target="_blank">百度</a>
<h4>2.内部链接:网站内部页面之间的相互链接(直接打出网站的名字就行)</h4>
<a href="公式简介.html">公式简介</a>
<h4>3.空链接:#(没有跳转页面)</h4>
<a href="#">工商地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe或rar.压缩包形式(点击将会下载目标文件)</h4>
<a href="imag.rar">下载文件</a>
<h4>5.网页元素的链接(点击图片将会跳转到目标网址)</h4>
<a href="http://baidu.com"><img src="imag.JPG" width="150"/></a>
<h4>6.瞄点标签:(两个都对应,点击第一个跳转到第二个的位置)</h4>
<a href="#live">个人生活</a><br />
<h3 id="live">个人生活</h3>
</body>
</html>
5.HTML中的注释和特殊字符
5.1 注释
5.2 特殊符号
重点记住:空格 、大于号、 小于号 这三个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊符号</title>
</head>
<body>
<!-- 我喜欢你 --> 注释网页不会显示<br />
空 格<br />
<!-- <p> 是一个段落标签 -->
< p > 是一个段落标签
</body>
</html>