[前端入门]HTML复习笔记
文章目录
- 励志
- 一、什么是 HTML？
- 二、常见的浏览器
- 三、HTML 标签
-
- 1、HTML 文档 = 网页
- 2、HTML 基本文档
- 3、HTML头部
- 4、HTML < title > 元素
- 5、HTML < base > 元素
- 6、HTML < link > 元素
- 7、HTML < style > 元素
- 8、HTML < meta > 元素
- 9、HTML < script > 元素
- 10、基本标签（Basic Tags）
- 11、文本格式化（Formatting）
- 12、链接（Links）
- 13、图片（Images）
- 14、样式/区块（Styles/Sections）
- 15、无序列表
- 16、有序列表
- 17、定义列表
- 18、表格（Tables）
- 19、框架（Iframe）
- 20、表单（Forms）
- 21、实体（Entities）
- 四、HTML5 新元素
- 五、小试牛刀
励志
![[前端入门]HTML复习笔记_第1张图片](http://img.e-com-net.com/image/info8/84b081cee3054174907ad5bad39a705e.jpg)
摘自电影《初恋那点事》
一、什么是 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 基本文档
<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:[email protected]">发送e-maila>
书签：
<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>项目 1dt>
<dd>描述项目 1dd>
<dt>项目 2dt>
<dd>描述项目 2dd>
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）
< 等同于 <
> 等同于 >
等同于空格
四、HTML5 新元素
https://www.runoob.com/html/html-tutorial.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>
![[前端入门]HTML复习笔记_第2张图片](http://img.e-com-net.com/image/info8/d106a1fa545e424a970d4358122d9ad7.jpg)