web应用开发学习——HTML基础_掌握了html-优快云博客

本文链接：https://blog.youkuaiyun.com/day0713/article/details/123231723

本文介绍了HTML基础知识，如元素结构、标签使用，以及如何运用它们创建一个包含照片、表格、列表和超链接的个人主页。重点讲述了文档标题的定义、样式设置、图片和链接的插入，以及表格和列表的创建过程。

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

一、学习内容

了解并掌握了HTML相关知识与概念、基本语法以及标记。学习到了HTML是用以说明标签内的内容在文档中的充当的结构或是说明内容的对象类型，以及HTML的基本组成、基本结构另外还学习到了一些HTML属性，例如link元素、style等。在这次学习中，这些东西都还只了解了大概内容，了解了基本用法，但更深层的东西还是会在CSS和JavaScript部分讲解。

HTML不是程序设计语言，它只是一种描述文档结构的标记语言，用以说明标签内的内容在文档中的充当的结构或是说明内容的对象类型；比如<h1><h1/>,<img />
HTML由元素组成，元素的基本表现形式：
<mark> content</mark>
存在少量特殊的元素, 没有结束标记：
<a href=http://www.sina.com/ />
空标签：没有结束标签，也没有元素
<br /> 换行
<hr />插入水平线
完整HTML5文档结构：

<!DOCTYPE html> 
<html>
	<head>
		这里的内容无法显示在网页上
	</head>
	<body>
		显示在网页中的部分
	</body>
</html>

HTML5头部信息包含文档的相关信息包括：
HTML标记：
文本标记
- 标题：标题从大到小分为六个层次，分别用 h1、h2、h3、h4、h5、h6 来表示，数字越小，则字体越大
- 段落：使用<p>表示段落。
- 换行、分割线：<hr/><br/>
- 字符实体：使用&xxx；的形式表示一些特殊符号。
- 文本格式化：
图片、超链接
- 图片：是一个空标签，我们通过给它的相应的属性赋值来决定这个图片的展示方式。
  
  基本用法：
  <img src=“tara.jpg” alt=“智妍”>， <img src=“tara.jpg” alt=“智妍” height=“320” width=“120”>， <img src=“tara.jpg” alt=“智妍” width=“50%”>
- 超链接：文字超链接<a href=“http://www.sina.com” taget=“_blank” > 新浪</a>
表格、列表

二、创建个人网页

要求：有照片、表格、列表、超级链接的个人网页

1.创建一个新的HTML文档，获得一个完整的文档结构。
在这里插入图片描述

2.利用title定义文档标题。

在这里插入图片描述

3.利用style定义HTML的显示样式，设置文字居中对齐和表格居中。
在这里插入图片描述

4.制作网站标题，总共可以用h1、h2、h3、h4、h5、h6表示，数字越小字体越大
在这里插入图片描述

5.通过空标签的相应的属性赋值来决定图片的展示方式，插入图片
在这里插入图片描述

在这里插入图片描述

6.制作文字超链接链接到新浪微博

在这里插入图片描述

7.制作页面内链接，在页面内需要引用的地方设定引用ID，在链接处通过ID进行引用，使从页面开头能直接链接到成绩表
在这里插入图片描述

8.利用

标签来定义表格以显示个人成绩，指定表的title;用来设置表格的每一行;用来设置表格中的行标签与列标签;用来设置表格中的单元格数据
在这里插入图片描述

9.利用

、
制作有序列表

在这里插入图片描述

三、个人网站完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代爱莹个人主页</title>
		<style>
			.box{
				text-align:center;
			}
			table{margin:auto}
		</style>
	</head>
	<body>
		<ul>
			<li><a href ="#grade">成绩表</a></li>
		</ul>
		<div class = "box">
			
			<h1>代爱莹的个人网站</h1>
			<p>个人简介：四川大学学生，酷爱易烊千玺,本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心。具有亲和力，平易近人，善于与人沟通。 </p>
		<h2> 一.易烊千玺图片</h2>
		<p>
			<img src = "./yyqx.jpg" width="560" height = "320"/>
		</p>
		
		<h2> 二.易烊千玺个人微博</h2>
		<a href="https://weibo.com/tfyiyangqianxi?is_all=1" target = "_blank" id = "tl">易烊千玺新浪微博</a>
		
		<h2 id="grade">三.个人成绩</h2>
		
		<table border = "3">
			<caption>代爱莹大一成绩</caption>
			<tr>
				<th>学期</th>
				<th>高等数学</th>
				<th>线性代数</th>
				<th>英语</th>
				<th>c语言</th>
				<th>java</th>
			</tr>
			<tr>
				<td>大一上</td>
				<td>89</td>
				<td>92</td>
				<td>88</td>
				<td>94</td>
				<td>90</td>
			</tr>
			<tr>
				<td>大一下</td>
				<td>90</td>
				<td>91</td>
				<td>87</td>
				<td>88</td>
				<td>97</td>
			</tr>
		</table>
		
		<h2>四.个人喜爱学科排名</h2>
		<ol>
			<li>英语</li>
			<li>java</li>
			<li>线性代数</li>
			<li>c语言</li>
			<li>高等数学</li>
		</ol>
		</div>
	</body>
	
	<style>
		textCenter{
			text-align:center;
		}
	</style>
</html>