HTML基础
HTML:Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等
W3C标准(world Wide Web Consortium 万维网联盟):
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
<!--DOCTYPE:告诉浏览器,要是用什么规范-->
<!DOCTYPE html>
<!--所有内容都要写在HTML标签里面-->
<html lang="en">
<!--head 是网页的头部-->
<head>
<!--meta是描述性标签,它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO(搜索引擎优化 Search Engine Optimization)-->
<meta charset="UTF-8">
<meta name="keyname" content="白了个白">
<meta name="description" content="这里是学习html的内容">
<title>网页的标题</title>
</head>
<!--body代表网页主体-->
<body>
hello world
</body>
</html>
基本标签
题目标签
(快捷方式是h+Tab,段落标签是p+Tab,类比,其他的各种标签都是如此用快捷键)
<h1>一级标签</h1>
<h2>二级标签</h2>
段落标签(里面不一定只填文字,还可以填别的链接标签之类的)
用了就会分段
<p>哈哈哈</p>
<p>呵呵呵</p>
换行标签(比段落标签的行间距更加紧凑)
它是单标签,自闭合标签,“/”可加可不加
呵呵呵<br/>
水平线标签(也是自闭合标签)
<hr/>
效果为:
字体样式标签
粗体: <strong>呵呵</strong>
斜体: <em>呵呵</em>
注释和特殊标签
注释: <!--这是注释-->
空格: (注意要加;)
大于号: >
小于号: <
版权符号:©
图像标签
img图像标签
src:图片地址:相对地址(推荐);绝对地址
相对地址:
../ 这是到上级目录。如:
<img src="../resources/image/1.png" alt="呵呵" title=“悬停文字” width=“200” height=“200”>
首先用。。/返回上级,然后再写resources地址,不然无法直接找到图片地址
alt:为图片加载失败后会返回的内容。如:
title:为鼠标悬停图片后会显示的文字
width和height为宽高
链接标签
普通的超链接
a标签
href:必填,表示跳转到哪个页面
target:表示窗口在哪里打开
里面填_blank表示为在新页面里打开
里面填_self表示为在当前页面里打开(默认为_self)
文字超链接
<a href=“1.第一个网页.html” target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
图片超链接,改写文字的地方填写图片标签即可
<a href=“1.我的第一个网页,html”>
<img src="../resources/image/1.png" alt="呵呵" title=“悬停文字” width=“200” height=“200”>
</a>
锚链接
需要一个标记用name关键字设置标记名称,然后用href=“#标记名称”进行跳转
<a name="top">顶部</a>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<a href="#top">回到顶部</a>
也可以跳转到别的页面的锚链接,只需在链接地址后加#内容 即可,如:
<a href=“1.第一个网页.html#top” target="_blank">点击我跳转到页面</a>
功能性链接
下载相关的软件之后,点击可以发送邮件
<a href="mailto:1231231231@qq.com">点击联系我</a>
列表标签
有序列表(应用范围:试卷,问答)
<ol>
<li>java</li>
<li>c++</li>
<li>python</li>
</ol>
显示为:
无序标签(应用范围:导航,侧边栏。。)
<ul>
<li>java</li>
<li>c++</li>
<li>python</li>
</ul>
自定义列表
dl:标签
dt:列表名称
dd:列表内容
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c++</dd>
<dt>位置</dt>
<dd>河北</dd>
<dd>山西</dd>
</dl>
表格标签(table)
行 tr;列 td;colspan=“4”:跨4列;rowspan=“2”:跨2列
<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>
视频和音频
controls:控制条
autoplay:自动播放
<video src="MP4文件的地址填好" controls autoplay></video>
<audio src="MP3文件的地址填好" controls autoplay></audio>