[前端入门]HTML复习笔记

最新推荐文章于 2023-03-07 20:41:55 发布

原创最新推荐文章于 2023-03-07 20:41:55 发布 · 5.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #html5 #html #css

本文详细介绍了HTML的基本概念、常见浏览器、HTML标签的使用，包括文档结构、头部元素、文本格式化、链接、图片和表格等。还提到了HTML5的新元素，并提供了一个实际的HTML代码示例，帮助读者快速掌握HTML网页制作。

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

励志

在这里插入图片描述
摘自电影《初恋那点事》

一、什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二、常见的浏览器

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器、QQ浏览器、搜狗浏览器
Firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	从Safari推出之时起，它的渲染引擎就是Webkit，一提到webkit，首先想到的便是 chrome，可以说，chrome 将Webkit内核深入人心，殊不知，Webkit 的鼻祖其实是 Safari。
Chrome、Edge	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

三、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的

标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1、HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

小试牛刀：

<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

2、HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

3、HTML头部

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

4、HTML < title > 元素

< title > 标签定义了不同文档的标题。
< title > 在 HTML/XHTML 文档中是必须的。
< title > 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

5、HTML < base > 元素

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

6、HTML < link > 元素

< link > 标签定义了文档与外部资源之间的关系。

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

7、HTML < style > 元素

< style > 标签定义了HTML文档的样式文件引用地址
当然也可以直接添加样式来渲染文档，就像这样：

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

8、HTML < meta > 元素

meta标签描述了一些基本的元数据。
< meta > 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
< meta > 一般放置于< head > 区域

为搜索引擎定义关键词:

<meta name="keywords" content="小航，文艺倾年，琴体书卦，就是不会敲代码">

为网页定义描述内容:

<meta name="description" content="文艺倾年的博客">

定义网页作者:

<meta name="author" content="小航">

每30秒钟刷新当前页面:

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

其他

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
说明：http-equiv传送HTTP通信协议的标头

9、HTML < script > 元素

后期JS入门具体讲解

10、基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

11、文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

12、链接（Links）

普通的链接：<a href="http://www.com/">链接文本</a>
图像链接： <a href="http://www.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:111@aa.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

13、图片（Images）

 <img loading="lazy" src="URL" alt="替换文本" height="42" width="42">

14、样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

15、无序列表

<ul>
	<li>项目</li>
	<li>项目</li>
</ul>

16、有序列表

<ol>
	<li>第一项</li>
	<li>第二项</li>
</ol>

17、定义列表

<dl>
	<dt>项目 1</dt>
	<dd>描述项目 1</dd>
	<dt>项目 2</dt>
	<dd>描述项目 2</dd>
</dl>

18、表格（Tables）

<table border="1">

	<thead>
		<tr>
			<th>表格标题</th>
			<th>表格标题</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td>表格数据</td>
			<td>表格数据</td>
		</tr>
	</tbody>
	
</table>

19、框架（Iframe）

<iframe src="URL"></iframe>

20、表单（Forms）

<form action="demo_form.php" method="post/get">

	<input type="text" name="email" size="40" maxlength="50">
	<input type="password">
	<input type="checkbox" checked="checked">
	<input type="radio" checked="checked">
	<input type="submit" value="Send">
	<input type="reset"> <input type="hidden">

	<select>
		<option>苹果</option>
		<option selected="selected">香蕉</option>
		<option>樱桃</option>
	</select>

	<textarea name="comment" rows="60" cols="20"></textarea>
	
</form>

21、实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&nbsp; 等同于空格

四、HTML5 新元素

https://www.runoob.com/html/html-tutorial.html
复习链接

五、小试牛刀

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文艺倾年</title>
</head>
<body>
	<div>
      <div style="background-color:#4DD0E1;">
        <h1 style="margin-bottom:0;text-align:center;">文艺倾年</h1>
      </div>
      <div style="background-color:#1DE9B6;height:200px;width:20%;float:left;">    
          左边<br/>
      </div>
      <div style="background-color:#FFFF00;height:200px;width:60%;float:left;">
        中间内容
      </div>
      <div id="right" style="background-color:#1DE9B6;height:200px;width:20%;float:right;">
          右边
      </div>
      <div style="background-color:#F0F8FF;clear:both;text-align:center;">
        作者：文艺倾年
      </div>
  </div>
</body>
</html>