HTML基础学习

最新推荐文章于 2024-06-15 21:20:00 发布

lessmker

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量81

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_38322982/article/details/114655411

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

HTML基础学习

1简介
2使用
3html5

1简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

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

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

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

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

2使用

2.1基本框架

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

2.2HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:

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

2.3Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。

2.4<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2.5通用声明

2.5.1HTML5

<!DOCTYPE html>

2.5.2HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

2.5.3XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.6中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面标题</title>
	</head>
	<body>
		<h1>我的第一个标题</h1>
		<p>我的第一个段落。</p>
	</body>
</html>

2.7标签

属性	描述
class	为html元素定义一个或多个类名（引号里面可以填入多个class属性）
id	定义元素的唯一id（只能填写一个，多个无效）
style	规定元素的行内样式(inline style)
title	描述了元素的额外信息(作为工具条使用)

2.7.1基本标签（Basic Tags）

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

2.7.2文本格式化（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> （上标文本）

2.7.3链接（Links）

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

2.7.4图片（Images）

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

2.7.5样式/区块（Styles/Sections）

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

2.7.6列表

<!--无序列表-->
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>
<!--有序列表-->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
<!--定义列表-->
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

2.7.7表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

2.7.8框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

2.7.9表单（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>

2.7.10实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

2.8标签介绍

2.8.1文本格式化

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

2.8.2计算机输出

标签	描述
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<var>`	定义变量
`<pre>`	定义预格式文本

2.8.3引文, 引用, 及标签定义

标签	描述
`<abbr>`	定义缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目。

2.8.4头部

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

2.8.5样式标签

标签	描述
`<style>`	定义文本样式
`<link>`	定义资源引用地址

eg:

内部样式表

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

外部样式表

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

2.8.6表格

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚

2.8.7列表

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表
`<dt>`	自定义列表项目
`<dd>`	定义自定列表项的描述

2.8.8区块

标签	描述
`<div>`	定义了文档的区域，块级 (block-level)
`<span>`	用来组合文档中的行内元素，内联元素(inline)

2.8.9表单

标签	描述
`<form>`	定义供用户输入的表单
`<input>`	定义输入域
`<textarea>`	定义文本域 (一个多行的输入控件)
`<label>`	定义了 `<input>` 元素的标签，一般为输入标题
`<fieldset>`	定义了一组相关的表单元素，并使用外框包含起来
`<legend>`	定义了 `<fieldset>` 元素的标题
`<select>`	定义了下拉选项列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个点击按钮
`<datalist>`	指定一个预先定义的输入控件选项列表
`<keygen>`	定义了表单的密钥对生成器字段
`<output>`	定义一个计算结果

2.8.10框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

标签	说明
`<iframe>`	定义一个内联的iframe

<iframe src="iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">baidu.COM</a></p>

2.8.11颜色

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

div {
    background:rgba(255,0,0,0.5);
}

2.8.12脚本

标签	描述
`<script>`	定义了客户端脚本
`<noscript>`	定义了不支持脚本浏览器输出的文本

2.8.13字符实体

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。

2.8.14结合音标符

音标符	字符	Construct	输出结果
`̀`	a	`à`	à
`́`	a	`á`	á
`̂`	a	`â`	â
`̃`	a	`ã`	ã
`̀`	O	`Ò`	Ò
`́`	O	`Ó`	Ó
`̂`	O	`Ô`	Ô
`̃`	O	`Õ`	Õ

2.8.15字符实体

实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

虽然 html 不区分大小写，但实体字符对大小写敏感。

3html5

3.1`<canvas>`新元素

标签	描述
`<canvas>`	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

3.2新多媒体元素

标签	描述
`<audio>`	定义音频内容
`<video>`	定义视频（video 或者 movie）
`<source>`	定义多媒体资源 `<video>` 和 `<audio>`
`<embed>`	定义嵌入的内容，比如插件。
`<track>`	为诸如 `<video>` 和 `<audio>` 元素之类的媒介规定外部文本轨道。

3.3新表单元素

标签	描述
`<datalist>`	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
`<keygen>`	规定用于表单的密钥对生成器字段。
`<output>`	定义不同类型的输出，比如脚本的输出。

3.4新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
`<article>`	定义页面独立的内容区域。
`<aside>`	定义页面的侧边栏内容。
`<bdi>`	允许您设置一段文本，使其脱离其父元素的文本方向设置。
`<command>`	定义命令按钮，比如单选按钮、复选框或按钮
`<details>`	用于描述文档或文档某个部分的细节
`<dialog>`	定义对话框，比如提示框
`<summary>`	标签包含 details 元素的标题
`<figure>`	规定独立的流内容（图像、图表、照片、代码等等）。
`<figcaption>`	定义`<figure>`元素的标题
`<footer>`	定义 section 或 document 的页脚。
`<header>`	定义了文档的头部区域
`<mark>`	定义带有记号的文本。
`<meter>`	定义度量衡。仅用于已知最大和最小值的度量。
`<nav>`	定义导航链接的部分。
`<progress>`	定义任何类型的任务的进度。
`<ruby>`	定义 ruby 注释（中文注音或字符）。
`<rt>`	定义字符（中文注音或字符）的解释或发音。
`<rp>`	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
`<section>`	定义文档中的节（section、区段）。
`<time>`	定义日期或时间。
`<wbr>`	规定在文本中的何处适合添加换行符。

3.5已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

lessmker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习

HTML基础学习1简介2使用2.1基本框架2.2HTML 元素2.3Web 浏览器2.4 声明2.5通用声明2.5.1HTML52.5.2HTML 4.012.5.3XHTML 1.02.6中文编码2.7标签2.7.1基本标签（Basic Tags）2.7.2文本格式化（Formatting）2.7.3链接（Links）2.7.4图片（Images）2.7.5样式/区块（Styles/Sections）2.7.6列表2.7.7表格（Tables）2.7.8框架（Iframe）2.7.9表单（Forms）2.
复制链接

扫一扫

专栏目录

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

HTML基础学习

HTML基础学习

1简介

2使用

2.1基本框架

2.2HTML 元素

2.3Web 浏览器

2.4<!DOCTYPE> 声明

2.5通用声明

2.5.1HTML5

2.5.2HTML 4.01

2.5.3XHTML 1.0

2.6中文编码

2.7标签

2.7.1基本标签（Basic Tags）

2.7.2文本格式化（Formatting）

2.7.3链接（Links）

2.7.4图片（Images）

2.7.5样式/区块（Styles/Sections）

2.7.6列表

2.7.7表格（Tables）

2.7.8框架（Iframe）

2.7.9表单（Forms）

2.7.10实体（Entities）

2.8标签介绍

2.8.1文本格式化

2.8.2计算机输出

2.8.3引文, 引用, 及标签定义

2.8.4头部

2.8.5样式标签

eg:

2.8.6表格

2.8.7列表

2.8.8区块

2.8.9表单

2.8.10框架

2.8.11颜色

2.8.12脚本

2.8.13字符实体

不间断空格(Non-breaking Space)

2.8.14结合音标符

2.8.15字符实体

3html5

3.1<canvas>新元素

3.2新多媒体元素

3.3新表单元素

3.4新的语义和结构元素

3.5已移除的元素

“相关推荐”对你有帮助么？

3.1`<canvas>`新元素

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`