HTML 基础

2201_75396444

于 2023-04-17 17:58:27 发布

阅读量225

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75396444/article/details/130138925

版权

这篇博客详细介绍了HTML的基础知识，包括标题、段落、链接、颜色、样式表的使用，以及HTML表单、图像、音频和视频的处理。此外，还讲解了HTML元素的属性、布局和CSS的应用，以及如何在JavaScript中操作HTML元素。

摘要由CSDN通过智能技术生成

HTML 元素

HTML 标题

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接

<a href="http://www.w3school.com.cn">This is a link</a>

HTML 水平线

<p>This is a paragraph</p>
<hr />

HTML 注释

<!-- This is a comment -->

HTML 折行

短的引用

<body>

<p>浏览器通常会在 q 元素周围包围引号。</p>

<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>

</body>

长引用的 HTML

<body>

<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

</body>

缩略词<abbr>

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

HTML 属性

文本格式化标签

HTML 颜色

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）

颜色名

大多数的浏览器都支持颜色名集合。

提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

HTML CSS

有以下三种方式来插入样式表

外部样式表

<link> 标签用于指定外部资源。

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

href

URL

指定被链接资源的 URL。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

图像标签（<img>）和源属性（Src）替换文本属性（Alt）

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。在空单元格中添加一个空格占位符，就可以将边框显示出来。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<table border="1">
		<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
		</tr>
		<tr>
		<td>&nbsp;</td>
		<td>row 2, cell 2</td>
		</tr>
		</table>
	</head>
	<body>
		
	</body>
</html>

HTML 列表

无序列表

<h4>这是一个无序列表：</h4>
		<ul>
			<li>可乐</li>
			<li>炸鸡</li>
			<li>面包</li>
		</ul>

有序列表

<h4>这是一个有序列表：</h4>
		<ol>
			<li>可乐</li>
			<li>炸鸡</li>
			<li>面包</li>
		</ol>

定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML <div> 和 <span>

HTML 块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

HTML 内联元素

内联元素在显示时通常不会以新行开始。

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

HTML <span> 元素

<span> 元素是内联元素，可用作文本的容器。

HTML 类

<head>
		<meta charset="utf-8" />
		<style>
			.cities{
				background-color: black;
				color: white;
			}
			span.red{
				color: red;
			}
		</style>
		<title></title>
		<dl class="cities">
		<dt>Coffee</dt>
		<dd>Black<span class="red"> hot </span>drink</dd>
		<dd>very delicious</dd>
		<dt>Milk</dt>
		<dd>White cold drink</dd>
		</dl>
	</head>

HTML id 属性

HTML id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

在 JavaScript 中使用 id 属性

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素：

<head>
		<meta charset="utf-8" />
		
		<title></title>
		<h1>在JavaScript 中使用id 属性</h1>
		<p>JavaScript 可以使用getElementById()方法访问具体指定ID的元素：</p>
		<h2 id="myHeader">Hello World!</h2>
		<button onclick="displayResult()">改变文本</button>
		<script>
			function displayResult(){
				document.getElementById("myHeader").innerHTML="Have a nice day!";
			}
		</script>
	</head>

HTML iframe 标签

定义内联的子窗口（框架）

height 和 width 属性用于规定 iframe 的高度和宽度。

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框

<body>
<iframe src="http://www.baidu.com&

最低0.47元/天解锁文章

2201_75396444

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫