HTML基础知识（一）标题、段落、样式、链接、图像、表格

最新推荐文章于 2024-03-24 21:59:59 发布

原创最新推荐文章于 2024-03-24 21:59:59 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

javaweb 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了HTML的基础知识，包括标题、段落、样式（如背景颜色、字体、颜色和尺寸）、链接、图像和表格的使用。通过实例展示了如何设置文本对齐、创建图像映射以及水平线、引用和缩进。还探讨了不同类型的链接，如普通链接、图片链接和锚点，并解释了如何插入和调整图片大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hbuilder自动补齐，格式化的快捷键是:ctrl+shift+f

哈哈哈哈哈哈，开心！注意是英文状态下噢！！！

<p>这是一个段落</p>

p标签是一个段落的开始，不特意设定位置的话就是从左边开始

如果设定位置了的话，位置效果和h 标题标签一样

<h2 align="center">你看，背景颜色变了呢！</h2>

h标签是标题标签，也是默认居左，想要居中，也要设置位置<h2 align="center">

<h1> 定义最大的标题。<h6> 定义最小的标题。

总结：p和h的区别就是，h会自动加粗，看起来像是标题，着重强调的意思。

<hr /> 标签在 HTML 页面中创建水平线。可以自己设置喜欢的颜色 <hr color="#0000FF" />

<br\>标签是根据自习想要的分割效果进行换行，中间没有空行

但是

<p>标签是的段落标签，两段之间是有换行的

疑问：

比如说诗句，怎么让每一行递增缩进呢？

当然是用<pre>标签了，哈哈哈！

<pre>标签可以根据理想格式排版，显示出理想效果

<p><pre>
     春眠不觉晓，
       处处闻啼鸟。
		 夜来风雨声,
		   花落知多少。
    </pre>
</p>

以上效果图的所有代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">这是一个标题</h1>
		<p>这是一个段落</p>
		<p>这是另一个段落</p>
		<p><a href="http://www.baidu.com">This is a link</a>这是一个在当前页面跳转的链接</p>
		<p><a href="http://www.w3school.com.cn/" target="_blank">This is another link</a>这是一个跳转到新的页面的链接</p>
		<a href="#tips">有用的提示</a>
		<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
		<img src="img/2.jpg" width="150px" height="150px"/>
	</body>
	<body bgcolor="aqua">
		<h2 align="center">你看，背景颜色变了呢！</h2>
		<h1>This is a heading</h1>
		<hr color="#0000FF" />
		<h2>This is a heading</h2>
		<hr />
		<h3>This is a heading</h3>
		<p>This is<br />a para<br />graph with line breaks</p>
		<p>This is</p>
		<p>a para</p>
		<p>graph with line breaks</p>
		<p> 春眠不觉晓，处处闻啼鸟。夜来风雨声,花落知多少。</p>
		<p> 春眠不觉晓，<br />处处闻啼鸟。<br />夜来风雨声,<br />花落知多少。</p>
		<p><pre>
春眠不觉晓，
        处处闻啼鸟。
		夜来风雨声,
			花落知多少。
		   </pre>
		</p>
		<p><a name="tips">基本的注意事项 - 有用的提示</a></p>
		<!--
        	作者：1980750699@qq.com
        	时间：2019-05-01
        	描述：样式style
     --> 
	<p>
	<a href="#C4">查看 Chapter 4。</a>
	</p>

	<h2>Chapter 1</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 2</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 3</h2>
	<p>This chapter explains ba bla bla</p>

	<h2><a name="C4">Chapter 4</a></h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 5</h2>
	<p>This chapter explains ba bla bla</p>
	</body>
</html>

4.样式

HTML 样式实例 - 背景颜色

HTML 样式实例 - 字体、颜色和尺寸

注意：当多个条件（字体，颜色，尺寸）同时存在时，所有属性都在style的一个大引号里面，中间以分号间隔

HTML 样式实例 - 文本对齐

<q>标签可以显示引号，把需要加引号的内容放在q标签中间

<p style="text-align: center;"><q>The heading above is aligned to the center of this page.</q></p>

<blockquote>用于缩进

<blockquote>五十年来，WWF 一直致力于保护自然界的未来。</blockquote>
<blockquote>WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持</blockquote>

效果图片：

以上图片代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>界面</title>
	</head>
	<body style="background-color: chartreuse;">
	<h2 style="background-color: #FF0000; font-family: modern;"align="center">
		This is a headline</h2>
	<h3 align="center" style="font-family: 'rockwell extra bold';background-color: chocolate;">This is a headline</h3>
	<p style="background-color: azure;font-size:20px;">This is a paragraph</p>
	<h1 style="text-align: center;background-color:yellow;">这是一个标题</h1>
	<p style="text-align: center;"><q>The heading above is aligned to the center of this page.</q></p>
	<blockquote>五十年来，WWF 一直致力于保护自然界的未来。</blockquote>
	<blockquote>WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持</blockquote>
	<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
	<address>作者是：xxx(斜体作用)</address>
	<code>
	(代码格式)var person = {firstName:"Bill", lastName:"Gats", age:50}
	</code>
	
	</body>
</html>

7.<dfn>，<abbr>没看懂???

8.HTML CSS看不懂???

9.链接

(1)普通连接

分为两种，当前页面的和跳到新页面的:

<p><a href="http://www.baidu.com">This is a link</a>这是一个在当前页面跳转的链接</p>
<p><a href="http://www.w3school.com.cn/" target="_blank">This is another link</a>这是一个跳转到新的页面的链接</p>

（2)图片链接：

<a href="http://www.baidu.com">
<img src="img/魔女.jpeg" width="60px" height="100px" align="center"/>
</a>

就是相当于把普通的链接的文字说明换成了插入图片，当然，插入图片要借助<img >标签

(3)name 属性规定锚（anchor）的名称（第二种情况不太懂）

第一种：就是在当前页面中找出指定的元素，直接跳转到这个元素，这样使用者就无需不停地滚动页面来寻找他们需要的信息了，也就是链接到同一页面的不同位置。

方法：就是先用name标记锚点的名称，然后用herf指向这个锚点

<a name="top">这里是TOP部分</a>
<a name="content">这里是CONTENT部分</a>
<a name="foot">这里是FOOT部分</a>
<a name="add">我就是锚点add鸭！快来撩我！</a>



<a href="#top">点击我链接到TOP</a>
<a href="#content">点击我链接到CONTENT</a>
<a href="#foot">点击我链接到FOOT</a>
<a href="#add">跳转到add</a>

这个例子的意思就是，当点击下方三句指令时，会跳转到上方指令的相应位置。

第二种：

这个就是直接利用herf来跳到指定网站的拥有相对应锚点的指定页面。

网站链接直接打开网站页面最上面导航栏复制粘贴就ok.

其实这就是一个类似于超链接的家伙鸭！！！只不过最后一步加上了#xxxxx来指定新的网页的锚点

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">我会跳转到新的网站页面的有指定锚点tips的地方噢</a>

10.插入图片

（1）简单插入有两种（第二种没看明白）

<p>一幅图像：
    <img src="img/5.jpg" width="100px" height="80px"/>
</p>
<p>第二幅图像：
    <img src="http://www.w3school.com.cn/images/boat.gif" />
</p>

（2）背景图片（怎么控制大小呢？）

<body background="img/千寻.jpeg">
<h2 align="center">背景图片</h2>
<p>
    gif 和 jpg 文件均可用作 HTML 背景。
</p>

（3）图像的对齐（有什么用呢？没效果呀）

那个bottom, middle ,top有什么效果呢？？？

只要用<p>来进行段的换行，就ok了吧？

                <h2>未设置对齐方式的图像：</h2>
		<p>图像 <img src ="img/千.jpeg"  width="60px" height="100px"> 在文本中</p>
		<h2>已设置对齐方式的图像：</h2>
		<p>图像 <img src="img/千.jpeg" width="60px" height="100px" align="bottom"> 在文本中</p>
		<p>图像 <img src ="img/千.jpeg"  width="60px" height="100px"  align="middle"> 在文本中</p>
		<p>图像 <img src ="img/千.jpeg" width=60px" height="100px" align="top"> 在文本中</p>
		<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

（4）为图片显示替换文本没看懂alt

(5)图片链接

调用<a>标签，和文字链接用法一样

图片链接：点击图片跳转到指定页面

<a href="http://www.baidu.com">
<img src="img/魔女.jpeg" width="60px" height="100px" align="center"/>
</a>

文字链接：

<p><a href="http://www.baidu.com">This is a link</a>这是一个在当前页面跳转的链接</p>

总结：都是把当作链接对象的元素放在<a>标签开始和结束中间

<a>当作连接的元素<\a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图像</title>
	</head>
	<body background="img/5.jpg">
		<h2 align="center">背景图片</h2>
		<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
		
		<p>一幅图像：
			<img src="img/5.jpg" width="100px" height="80px"/>
		</p>
		<h2>未设置对齐方式的图像：</h2>

		<p>图像 <img src ="img/千.jpeg"  width="60px" height="100px"> 在文本中</p>

		<h2>已设置对齐方式的图像：</h2>

		<p>图像 <img src="img/千.jpeg" width="60px" height="100px" align="bottom"> 在文本中</p>
		<p>图像 <img src ="img/千.jpeg"  width="60px" height="100px"  align="middle"> 在文本中</p>
		<p>图像 <img src ="img/千.jpeg" width=60px" height="100px" align="top"> 在文本中</p>
		<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
		<a href="http://www.baidu.com">
		<img src="img/魔女.jpeg" width="60px" height="100px" align="center"/>
		</a>
	</body>
</html>

（6）创建图像的映射，其中的每个区域都是一个超级链接。（挺好玩的，但是没看懂）

（7）把图像转换为图像映射（没看懂，是那种买鞋子时候鼠标放到哪，哪里就会放大的那种吗？）

11.表格

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

也就是说：table是指明一个大表格，tr表示表格的每一行，几个tr就是几行；td表示每一行对应的具体的每一列的数据，每一个tr里面有几个td，就表明有几列；同时一个td里面可以有多个元素。

<h4>一列：</h4>
		<table border="1">
			<tr>
				<td>100</td>
			</tr>
		</table>
<h4>一行三列：</h4>
		<table border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
		</table>
<h4>两行三列：</h4>
		<table border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
		</table>

其中，border代表的是边框的粗细，数字越大，边框越粗。

<h4>边框的粗细：</h4>
		<table border="8">
			<tr>
				<td>first</td>
				<td>row</td>
			</tr>
			<tr>
				<td>second</td>
				<td>row</td>
			</tr>
		</table>

（1）表头用<th>

但是！
单纯的用<td>也可以实现啊，<th>有什么特殊效果吗？

当然有！！！

表格中的表头显示出来是加粗的！

没表头效果的td：

		<h4>表头:</h4>
		<table border="1">
			<tr>
				<td>Heading</td>
				<td>Another Heading</td>
			</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>

真正的表头效果th:

        <h4>表头:</h4>
		<table border="1">
			<tr>
				<th>Heading</th>
				<th>Another Heading</th>
			</tr>

表头的垂直和水平应用：

<h4>水平表头：</h4>
		<table border="1">
			<tr>
				<th>姓名</th>
				<th>住址</th>
				<th>电话</th>
			</tr>
			<tr>
				<td>Bill Gates</td>
				<td>青岛</td>
				<td>555 77 855</td>
			</tr>
		</table>
		<h4>垂直的表头：</h4>
		<table border="1">
			<tr>
				<th>姓名</th>
				<td>Bill Gates</td>
			</tr>
			<tr>
				<th>住址</th>
				<td>青岛</td>
			</tr>
			<tr>
				<th>电话</th>
				<td>555 77 855</td>
			</tr>
		</table>

（2）没有边框的表格：就是不要设置border就ok了。<table>

<table>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
</table>

（3）