h5(html5)+css3前端笔记一
HTML语法规范
1.标签是成对出现的，比如<html></html>
例外：<br /> 这种情况极少
2.双标签关系：包含和并列
包含：
<head>
<title></title>
</head>
并列：
<head></head>
<body></body>
HTML基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML标签 | 最大标签，根标签 |
<head></head> |
文档头部 | 注意在head标签中必须设置的是title标签 |
<title></title> |
文档标题 | 让页面有一个属于自己的标题 |
<body></body> |
文档主体 | 页面内容基本放在body里 |
示例：
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
你我之间，黑马洗练，月薪过万，一飞冲天
</body>
</htm1>
网页开发工具
vscode和pycharm可以自动补全，！按tap案件自动补全
<!DOCTYPE html> 文档类型声明，声明是html5版本显示网页
<html lang="en">定义网页语言，en英文，zh-CN中文
<meta charset="UTF-8">字符集，UTF-8是通用编码
HTML常用标签
标题标签
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
.......
<h6>我是六级标题</h6>
段落标签和换行标签
<p>我是一个段落标签</p>
<br />单标签，强制换行
文本格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> |
推荐使用strong |
| 倾斜 | <em></em>或<i></i> |
推荐使用em |
| 删除线 | <del></del>或<s></s> |
推荐使用del |
| 下划线 | <ins></ins>或<u></u> |
推荐使用ins |
div和span标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
1.div标签用来布局，但是现在一行只能放一个div。大盒子
2.span标签用来布局，一行上可以多个span。小盒子
图像标签
<img src="图像url" /
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图像路径 | 必须属性 |
| alt | 文本 | 替换文本，图片不能显示的时候显示文字 |
| title | 文本 | 提示文本，鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像的边框粗细 |
路径
目录文件夹:就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
相对路径：图片相对于HTML页面的位置
绝对路径：从盘符开始，直接到文件的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像路径位于HTML文件的同一级 如<img src="aaa.jpg" /> |
|
| 下一级路径 | / | 图像路径位于HTML文件的下一级 如<img src="images/aaa.jpg" /> |
| 上一级路径 | ../ | 图像路径位于HTML文件的上一级 如<img src="../aaa.jpg" /> |
| width | 像素 | 设置图像宽度 |
超链接标签
<a href="跳转目标”target=”目标窗口的弹出方式”> 文本或图像 </a>
单词 anchor['aenke(r)]的缩写，意为:锚
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
链接分类
1.外部链接:例如<a href="http://www.baidu.com">百度</a>
2.内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，例如<a href="index.html">首页</a>
3.空链接:如果当时没有确定链接目标时，<a href="#">首页</a>
4.下载链接:如果 href 里面地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：快速定位到页面某个位置
。在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
。找到目标位置标签，里面添加一个id 属性=刚才的名字，如<h3 id="two">第2集介绍</h3>
注释标签和特殊字符
<!--注释语句 --> ，快捷键：ctrl + /
讲 究，空格字符
>，大于号>
<，小于号<
