html基础学习
html(hyper text mark up language)
超文本标记语言
- 文字
- 图像
- 音频
- 视频
- 动画
文本格式化
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程文本格式化title>
head>
<body>
<b>这个文本是加粗的b>
<br/>
<strong>这个文本是加粗的strong>
<br/>
<small>这个文本是缩小的small>
<br/>
<big>这个文本是放大的big>
<br/>
<em>这个文本是斜体em>
<br/>
<i>这个文本是斜体i>
<br/>
这个文本包含<sub>下标sub>
<br/>
这个文本包含<sup>上标sup>
body>
html>
标题
-
<h1>六号字体h1>
<h2>五号字体h2>
<h3>四号字体h3>
<h4>三号字体h4>
<h5>二号字体h5>
<h6>一号字体h6>
段落
链接-target属性
使用 target 属性，你可以定义被链接的文档在何处显示。
href：
链接文本
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接title>
head>
<body>
<a href="https://www.bilibili.com/" target="_blank">
访问B站！a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。p>
body>
html>
链接- id 属性
scr：根目录，例：scr=“/文件名/图片名称.类型”
alt：alt 属性只能与 配合使用。它为图像输入规定替代文本。
alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。
**注释：**即使 alt 属性不是必需的属性，但是当输入类型为 image 时，仍然应该设置该属性。如果不使用该属性，就有可能对文本浏览器或非可视的浏览器造成使用障碍。
实例
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接title>
head>
<body>
<a href="https://www.bilibili.com/" target="_blank">
访问B站！a>
<a href="https://www.bilibili.com/" target="_top">
跳出框架！a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。p>
<p>
创建图片链接:
<a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic16.nipic.com%2F20111008%2F5203963_093910733000_2.jpg&refer=http%3A%2F%2Fpic16.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636644815&t=be252b49b82b577d9fc07556835aae7b">
<img border="10" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic16.nipic.com%2F20111008%2F5203963_093910733000_2.jpg&refer=http%3A%2F%2Fpic16.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636644815&t=be252b49b82b577d9fc07556835aae7b" alt="电脑图片" width="680" height="1024">a>p>
<p>
无边框的图片链接:
<a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic16.nipic.com%2F20111008%2F5203963_093910733000_2.jpg&refer=http%3A%2F%2Fpic16.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636644815&t=be252b49b82b577d9fc07556835aae7b">
<img border="0" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic16.nipic.com%2F20111008%2F5203963_093910733000_2.jpg&refer=http%3A%2F%2Fpic16.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636644815&t=be252b49b82b577d9fc07556835aae7b" alt="电脑图片" width="680" height="1024">a>p>
body>
html>
对空格的控制pre标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟编程预格式文本title>
head>
<body>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
pre>
body>
html>
如何使用书签
<a href="#锁定目标">点击a><br/>
<a id="锁定目标">目标！a>
#：寻找对应 id 的名称。
电子邮件（mailto）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子邮件title>
head>
<body>
<p>
这是一个电子邮件：
<a href="mailto:[email protected]?Subject=Hello%20zjl"target="_top">
发送邮件a>
p>
<p>
<b>注意:b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
p>
body>
html>
matoil:是电子邮件的关键字，后接用户电子邮件地址，Subject=是主题内容。
rel=“nofollow”
防止追踪地址
头部
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头部title>
<meta http-equiv="refresh" content="6">
<base href="https://sm.ms/image/yKtEVWAZprRz9Sl" target="_blank">
<meta name="NHXS" content="努力学习！">
<style type="text/css">
h1{color:cornflowerblue;}
p{color:red;}
style>
head>
<body>
<h1>我爱学习h1>
<p><strong>为了梦想strong>p>
<img src="https://i.loli.net/2021/10/13/yKtEVWAZprRz9Sl.png" alt="哪咤抠图成品"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="//www.runoob.com">菜鸟教程a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
body>
html>
元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: ,
mete元素
meta标签描述了一些基本的元数据。
标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
一般放置于 区域
http-equiv 属性
每隔6秒刷新一次
<head>
<meta http-equiv="refresh" content="6">
head>
style元素
```link 元素
标签定义了文档与外部资源之间的关系。 标签通常用于链接到样式表:<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
stylesheet就是样式表
base元素
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:<head>
<base href="https://sm.ms/image/yKtEVWAZprRz9Sl" target="_blank">
head>
取消链接下划线
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有下划线的链接title>
head>
<body>
<a href="https://www.bilibili.com/" style="text-decoration:none;">进入B站a>
<a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!a>
body>
html>
text-decoration:none(无文本框修饰)
标签链接到一个外部样式表
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有下划线的链接title>
<link rel="stylesheet" type="text/css" href="styles.css">
head>
<body>
<a href="https://www.bilibili.com/" style="text-decoration:none;">进入B站a>
<a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!a>
<h1>静夜思h1>
<p style="color:steelblue">李白p>
<p>床前明月光，疑是地上霜。
<br/>举头望明月，低头思故乡。p>
body>
html>
要插入一个sytle.css文档
body {background-color:navajowhite}
h1
{
color:tomato;
text-align:center;
}
p
{
color: lightcoral;
font-size:20px;
border-bottom-color:grey;
text-align:center;
}
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 区域使用
如何在网页中显示图像。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入图像·title>
head>
<body>
<p>插入一个动图：
<img src="//www.runoob.com/try/demo_source/hackanm.gif" alt="动图" width="100" height="100">
<br/>
插入一张静图：
<img src="//www.runoob.com/try/demo_source/smiley.gif" alt="静图" height="100" width="100">
p>
body>
html>
注：静图和动图语法一样
在不同位置获取图片
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入图像·title>
head>
<body>
<p>插入一个动图：<p/>
<img src="//www.runoob.com/try/demo_source/hackanm.gif" alt="动图" width="100" height="100">
<p>插入一张静图：p>
<img src="//www.runoob.com/try/demo_source/smiley.gif" alt="静图" height="100" width="100">
<p>插入文件夹图片：p>
<img src="./resources/image/2.png" alt="哪吒" width="100" height="100">
<p>来自菜鸟教程的图片：p>
<img src="//www.runoob.com/images/logo.png" alt="runobb.com" height="100" width="100">
body>
html>