前言
大家好，我是jiantaoyab，第一次学习前端的html，写一篇笔记总结常用的元素
语义化
例如只要是
不管字体的大小是怎么样，有没有加粗都是标题，元素显示到页面中的效果应该由css决定，这就是语义化。文本元素
元素周期表大家可以查看这个，查看每个元素怎么使用，或者用官网查询。
标签
接下来一个一个解释每个标签的用法和解释
<!-- 当前使用的标准是html5 -->
<!DOCTYPE html>
<!-- lang全局属性,告诉浏览器元素内部是用哪一种语音写的 -->
<html lang="en"> <!-- en:英文 cmn-hans:中文 -->
<!-- 参与显示网页内容的,全部写到body中 -->
head
<!-- head中的内容不会显示到网页上 -->
<!-- meta 附加属性 -->
<head>
<!-- 指定网页内容编码是UTF-8 -->
<meta charset="UTF-8">
<!-- 适配手机端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
</head>
span
span 无意义， 仅仅用来设置样式
某些元素显示的时候会占一行（块级元素）
某些不元素不会（行级元素）
到了HTML5已近弃用这种税法
pre
在源代码中连续出现的空格，会出现折叠成一个空格在网页中
但是在pre元素的内容会按照原样出现在网页中
该元素通常用来显示代码，它有一个默认的css属性
实体字符
实体字符 Entity
通常用来显示页面特殊符号
&单词 比如小写字符 < >（大写）   空格符号 © 版权符号
&#数字 < 小写字符
a元素
1.跳转地址
2.跳转锚点#（跳转到同一个网页中某个位置）
3.功能链接 点击后会触发js代码
<!-- 1.跳转地址 -->
<a href="https://lestore.lenovo.com/">联想电脑管家</a>
<!-- 2.跳转锚点 -->
<a href="#chapter2">章节2</a>
<h2 id="chapter2">跳转的锚点</h2>
<!-- 3.功能链接发送邮件 -->
<a href="mailto:dawdwawda@yeah.net">邮件</a>
<!-- 4.拨打电话 -->
<a href="tel:312321321321di">电话</a>
<!-- 和map联用
coords 坐标原点是从左上角开始的
circle 圆要找出圆心 "长，宽，圆的半径"
rect 矩形要找出左上角和右下角 "x1,y1, x2,y2"
poly 多边形（三角形，五边形什么都行）"x1,y1,x2,y2,xn,yn"
-->
<map name="com">
<area shape="circle" coords="137,197,30" href="https://www.bilibili.com/" >
</map>
<!-- 和figure联用 -->
<figure>
->
<a target = "_blank" href="https://lestore.lenovo.com/search?">
<img usemap="#com" src="hh.jpg" alt="这是图片">
下载</a>
<map name="com">
<area shape="circle" coords="137,197,30" href="https://www.bilibili.com/" >
</map>
</figure>
target
跳转窗口的位置
_self 当前窗口打开默认值
_blank 在新窗口打开
title:鼠标放到这里的话会有一个详细描述
<!-- target使用 -->
<a href="https://lestore.lenovo.com/" target = "_blank" title ="软件下载">联想</a>
URL
访问站位资源得用决定路径
当跳转的目标和当前页面的协议相同时，可以省略协议
绝对路径的书写格式
url地址 = 协议名：// 主机名：端口号 / 路径
相对路径
访问站内资源
以 ./ 开头 ./表示当前资源所在的目录
..表示上一级目录
<!-- 相对路径 -->
<a href="./second.html">第二页面</a>
图片元素
img 空元素
src资源的路径，alt描述图片内容
1.和a元素联用
2.和map元素联用
coords 坐标原点是从左上角开始的
circle 圆要找出圆心 "长，宽，圆的半径"
rect 矩形要找出左上角和右下角 "x1,y1, x2,y2"
poly 多边形（三角形，五边形什么都行）"x1,y1,x2,y2,xn,yn"
衡量坐标的时候用专业软件量才准确
3.figure联用
把图片，图片标题，描述包裹起来
<!-- 图片 -->
<img src="https://img2.baidu.co20&f=JPEG?" alt="这是图片">
<!-- 和a元素联用 -->
<a target = "_blank" href="https://lestore.lenovo.com/search?">
<img usemap="#com" src="ff.jpg" alt="这是图片">
下载</a>
video视频&& audio 音频
video视频
controls = "controls" 只能这样用这种叫bool属性
和controls 是一样的，不用写等于后面的也可以
下面都是bool属性
autoplay 自动播放
muted 禁音播放
loop 循环播放
audio 音频 和视频的使用一样
如果网站不兼容的话，用source带上多个格式
<!-- 视频 -->
<video src="//www.bilibili.com/bangumi/media/md28229590">
视频
<!-- 用这个方式支持多种播放模式 -->
<source src ="xxxx/xx.mp4">
<source src ="xxxx/xx.webm">
</video>
列表
ol ：是一个列表
li ：有序列表
<ol reversed> 倒着显示
一般不用type属性，用css来设置前面的序号
type = "i" 罗马数字排列
type = "A" 字母排列排列
ul ：无序列表
常用来制作菜单 和 新闻列表
定义列表
dl ： definition list
dt ： definition title
dd ： definition description
<!-- 有序列表 -->
<ol reversed>
<li> 大娃大娃</li>
<li> 大娃大娃</li>
<li> 大娃大娃</li>
</ol>
<!-- 无序列表 -->
<ul>
<li> 无穷大青蛙单位</li>
<li> 无穷大青蛙单位</li>
<li> 无穷大青蛙单位</li>
<li> 无穷大青蛙单位</li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>HTML</dt>
<dd>
超文本语言
</dd>
</dl>
容器元素
该元素代表一个区域，内部放置其他元素
div 没有语义 显示效果靠css设计
header 表示页头，也可以表示文章头部
footer 表示页脚，也可以表示文章尾部
article 通常用于表示整片文章
section 通常用于表示文章的章节
aside 通常用于显示侧边栏
元素包含关系
元素的包含关系由元素的内容类别决定
假如想要查 h1 元素能不能包含 P 元素 用mdn查
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素可以可以有固定的子元素 ul和li
