前端三板斧：HTML+CSS+JS笔记摘⾃b站狂神说HTML 5
什么是HTML?
hyper text markup language(超⽂本标记语⾔)，包括：⽂本/图⽚、⾳频、视频、动画等； ⽬前HTML5
W3C标准
World Wide Web Consortium(万维⽹联盟)
W3C标准包括
结构化标准语⾔(HTML、XML)
表现标准语⾔(CSS)
⾏为标准(DOM、ECMAScript)
⽹页基本信息：
<!--告诉浏览器，我们要使⽤什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表⽹页头部-->
<head>
<!--meta描述性标签，他⽤来描述我们⽹站的⼀些信息-->
<!--meta⼀般⽤来做SEO -->
<meta charset="UTF-8">
<meta name="info"content="这个可以学html">
<!--title⽹页标题-->
<title>Title</title>
</head>
<!--body代表⽹页主体-->
<body>
</body>
</html>
1.⽹页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<h1>⼀级标签</h1>
<h2>⼆级标签</h2>
<hr/><!--⽔平线标签-->
<br/><!--换⾏标签-->
<strong>粗体标签</strong>
<em>斜体标签</em>
<p>
我是⼀段内容，并且p标签是段落标签
</p>
<!--特殊符号-->
 ；空格<br>
<⼩于号<br>
>⼤于号<br>
©；版权符号<br>
<!--
特殊符号记忆⽅式
&随便加个字符会有提⽰
-->
</body>
</html>
2.图像标签
<!-- ../ 代表上⼀级⽬录
alt: 图⽚名称(当不到图⽚的时候)
title: ⿏标悬停显⽰
-->
<img src="../resources/1.jpg"alt="头像"title="这是⼀个头像"> 3.超链接标签
<!--
a标签
href: 必填，标签要跳转到哪⾥
target: 表⽰窗⼝打开⽅式
_blank 打开新页⾯
html radio点击变颜
_self  在⾃⼰的⽹页中打开
-->
<a href="www.baidu"target="_blank">点击跳转到百度</a>
<!--锚链接
1.需要⼀个锚链接
2.跳转到标记
-->
<a href="#"id="top"></a>
<a href="#top">回到顶部</a>
<a href="Demo.html#top">跳转到别的页⾯的顶部</a>
<!-- 功能性连接
邮件链接：mailto:
-->
<a href="mailto:920637372@11">点击联系我</a>
<!--
QQ推⼴
-->
<a target="_blank"href="wpa.qq/msgrd?v=3&uin=920637372&site=qq&menu=yes">
<img border="0"src="wpa.qq/pa?p=2:920637372:53"alt="点击领取⼩电影"title="点击领取⼩电影"/> </a>
4.⾏内元素和块元素
5.列表
<!--有序列表
应⽤范围：试卷，问答... -->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>c++</li>
</ol>
<hr>
<!--⽆序列表
应⽤范围：导航，侧边栏... -->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>c++</li>
</ul>
<!--⾃定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
应⽤范围：⽹站底部
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
6.表格
<!--表格table
tr ⾏
td 列
-->
<table border="1px">
<tr>
<!-- 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--跨⾏-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
7.视频和⾳频
video 视频
audio ⾳频
<!--⾳频和视频
src: 资源路径
controls: 控制条
autoplay: ⾃动播放
-->
<video src="../resources/video/mc⼦龙.mp4"controls autoplay></video>
<audio src="../resources/audio/1.mp3"controls></audio>
8.页⾯结构分析
9.iframe内联框架
<!--iframe内联框架
src: 地址
width: 宽度
height: ⾼度
-->
<iframe name="hello"src=""frameborder="0"width="1000px"height="800px"></iframe> <!--将在iframe⾥打开列表.html-->
<a href="列表.html"target="hello">点击</a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。