HTML基础_假如某个 html 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件-CSDN博客

本文链接：https://blog.csdn.net/qhbgyu5664/article/details/119614819

1.什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

!DOCTYPE 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。

2.标签

1、单标签

◆注释标签 ctrl+/

◆ 换行标签 <br />

◆ 水平线标签 <hr />

◆ 图片标签 <img />

Src 图片的来源必写属性

Alt 替换文本图片不显示的时候显示的文字

Title 提示文本鼠标放到图片上显示的文字

Width 图片宽度

Height 图片高度

◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

2、双标签

◆ 段落标签<p>文本内容</p>

特点：上下自动生成空白行。<br>换行不会生成空白行。

◆ 标题标签h1-h6

h1 在一个页面里只能出现一次。

◆ 文本标签<font>文本内容</font>

◆ 文本格式化标签

◆ ◆ 文本加粗标签 <strong></strong> <b></b>

◆ ◆ 文本倾斜标签

<em></em>     <i></i>

◆ ◆ 删除线标签

<del></del>     <s></s>`

◆ ◆ 下划线标签

<ins></ins>   <u></u>

3.HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML头部head

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:

HTML base 元素

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML link 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML meta 元素

meta标签描述了一些基本的元数据。

标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为搜索引擎定义关键词:

<meta name="description" content=" 教">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

4.HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John “ShotGun” Nelson’

标题

HTML 标题（Heading）是通过<h1 - h6> 标签来定义的.

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

5.HTML 段落

HTML 段落是通过标签 p来定义的.

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

6.HTML 链接

HTML 链接是通过标签 a> 来定义的.

<a href="https://www.runoob.com">这是一个链接</a>

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

实例

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

7.HTML 图像

<img src="/images/logo.png" width="258" height="39" />

HTML 图像- 图像标签（ img）和源属性src

在 HTML 中，图像由标签定义。

img 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

<img src="boat.gif" alt="Big Boat">

HTML 图像- 设置图像的高度与宽度

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

更多图像标签
在这里插入图片描述

HTML标题

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。

一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）

HTML中如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的 CSS 教程学习更多的 CSS 知识。

内联样式

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

8.HTML 表格

<table> 标签定义表格；

<tr>标签定义表格中的行，<th>标签定义表头单元格（替换td位置）；

<td>标签定义表格中的单元格，字母 td 指表格数据（table data），数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

还可根据表格结构加上thead、tbody、tfoot标签。

<thead>：用于定义表格的头部。用来放标题之类的东西。
<tbody>：用于定义表格的主体。放数据本体。
<tfoot>：放表格的脚注之类。

<table align="center" border="1" cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>25</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>28</td>
      </tr>
    </tbody>
  </table>表格属性

表格属性

border：边框
cellspacing：单元格与单元格边框之间的空白间距
cellpadding：单元格内容与单元格边框之间的空白间距
width：表格宽度
height：表格高度
align：表格在网页中的水平对齐方式
我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

(2) 合并单元格

跨行合并：rowspan 单元格的上下合并

rowspan=“合并单元格的个数”

<table align="center" border="1" cellpadding="0" cellspacing="0" width="300" height="100">
    <tr>
      <th>国家</th>
      <th>海域</th>
      <th>人数</th>
    </tr>
    <tr>
      <th>日本</th>
      <td>太平洋</td>
      <td>504万</td>
    </tr>
    <tr>
      <th rowspan="2">美国</th>
      <td>大西洋</td>
      <td>139万</td>
    </tr>
    <tr>
      <td>北冰洋</td>
      <td>69万</td>
    </tr>
  </table>

9.HTML 列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。
列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

<dl>
<dt>Coffee</dt>
<dd> black hot drink</dd>
<dt>Milk</dt>
<dd> white cold drink</dd>
</dl>

10.iframe框架

表示一个内联框架，它能够在当前的html页面中开辟出一块空间单独显示一个html文件。

属性：

src需要显示的html文件的URL路径

height设置框架的宽度

width设置框架的高度

frameborder设置是否显示框架的边框，显示：yes/1、不显示：no/0

name设置当前框架的名称，提供给超链接的target属性，达到联动效果

（让a链接的target属性值==iframe的name属性值）

<ul>
    <li><a href="test1.html" target="frame">文本标签</a></li>
    <li><a href="test2.html" target="frame">超链接</a></li>
    <li><a href="test3.html" target="frame">列表</a></li>
</ul>
<div>
    <iframe src="" frameborder="0" name="frame" width="1000px" height="800px"></iframe>
</div>

11.HTML div 元素

在当前网页中的一块空白区域可以包含其他的html元素在当前div中显示—容器元素
div元素前后会自动换行与css一起使用，可以用来制作网页的布局，代替table的页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>全</h1>
			<a href="">dsadq</a>
			<img src="imgs/avatar.png" >
		</div>
	</body>
</html>

在这里插入图片描述

12.HTML span元素

span没有具体的含义，可以用来充当文本的容器
与CSS一起使用可以改变某一段文本中的指定文字的样式

<body>
		<p>和毒素<span class="dd"><ins><b><i>鬼斧神工</i></b></ins></span>发图好久放一点</p>
</body>

在这里插入图片描述

13.HTML 字符实体

显示结果	描述	实体名称	实体编号
 	空格	&nbsp;	&#160;
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号 	&apos; (IE不支持)	&#39;
￠	分	&cent;	&#162;
£	镑	&pound;	&#163;
¥	人民币/日元	&yen;	&#165;
€	欧元	&euro;	&#8364;
§	小节	&sect;	&#167;
©	版权	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

14.HTML 表单

form 标记表示一个表单
表单是用来向后端处理程序提交数据
action属性—设置后端处理程序的访问地址
method属性—设置表单的提交方式【get[默认]/post】
get方式–将表单中的信息数据跟随在后端处理程序的访问地址之后提交的
例如: login?username=zhangsan&password=123456
有数据量限制255个字符
post方式–将表单中的信息数据封装到网络协议中发送给后端处理程序。
没有数据量限制
enctype属性–规定在将表单数据发送到后台处理程序之前如何对其进行编码.
“application/x-www-form-urlencoded”—在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）
“multipart/form-data”—不对字符编码,当使用有文件上传控件的表单时，该值是必需的。
“text/plain”—将空格转换为 “+” 符号，但不编码特殊字符。

<form action="magin" method="get"enctype="application/x-www-form-urlencoded">
			用户：<input type="text" name="username"/><br>
			密码：<input type="password" name="password"/><br>
			<!-- submit登录按钮 -->
			<input type="submit"value="确认登录" />
		</form>

在这里插入图片描述

15.表单元素

<body>
		<div id="input类型">
		<p>文本框</p>
		<input type="text" name="username"value="默认值" />
		<p>密码框</p>
		<input type="password" name="password"value="默认密码" />
		<p>单选框</p>
		<input type="radio" name="dan"value="nan" checked="checked"/>男
		<input type="radio" name="dan"value="nv" />女
		<p>复选框</p>
		<input type="checkbox" name="fu"value="wo" />我
		<input type="checkbox" name="fu"value="ni" />你
		<input type="checkbox" name="fu"value="ta" checked="checked"/>他
		<p>日期框</p>
		<input type="date" name="wo"/><br>
		<input type="datetime" name="wo"/><br>
		<input type="time" name="wo" id="" value="" />
		<p>颜色框</p>
		<input type="color" name="mm"/>
		<p>电话</p>
		<input type="tel" name="ft"/>
		<p>邮箱</p>
		<input type="email" name="bh" />
		<p>网址</p>
		<input type="url" name="hj"/>
		<p>文件域</p>
		<input type="file" name="file" />
		<p>隐藏域</p>
		<input type="hidden" name="hidden" value="54645465465" />
		<p>表单提交按钮</p>
		<input type="submit"value="提交按钮" />
		<p>表单重置按钮</p>
		<input type="reset" value="表单重置" />
		<p>普通按钮</p>
		<input type="button"value="按钮" />
		</div>
		<div id="非input类型">
			<p>下拉列表</p>
			<select name="select">
				<option value="">纽约</option>
				<option value="">德州</option>
				<option value="">加州</option>
				<option value="">华盛顿</option>
			</select>
			<p>文本域</p>
			<textarea name="textarea" rows="30" cols="30"></textarea>
		</div>
	</body>