紫薇星上的HTML

最新推荐文章于 2022-05-15 10:30:48 发布

紫郡

最新推荐文章于 2022-05-15 10:30:48 发布

阅读量239

点赞数

文章标签： html html5 标签紫薇星系列

本文链接：https://blog.csdn.net/qq_39732867/article/details/104789157

版权

本文章部分观点引之www.baidu.com与edu.aliyun.com与www.runoob.com

因为之前学习过HTML，所以这几天复习的时候很快就看完了，但之前学它也是学了近一周。

这篇文章依然是整理一下我复习HTML与HTML5时的知识点，仅作整理，所以内容什么的不会太细节，只是为了防止遗忘作为索引来的。

浏览器内核

浏览器内核：渲染引擎和JS引擎。

Trident（IE内核）：IE、Arant、360、百度；
Gecko（firefox）：Firefox；
webkit（safari）：苹果safari、chrome最早开始使用；
chrome/Blink（chrome）：谷歌现在使用、Blink为webkit分支；
Presto（opera）：opera的开始内核，现在opera已经进入chrome的怀抱；
移动端大多使用webkit、Blink、Trident、Geclco等；
iphone和ipad主要为webkit，Android4.4之前为webkit；
Android4.4开始内核为chromium，为webkit分支、Blink；
Windows phone 8 内核为Trident。

Web标准

web标准：规范代码。

结构标准：结构用于对页面关系进行整理和分类——XML与XHTML；
样式标准：表现用域设置网页关系得版式、颜色、大小等——CSS；
行为标准：行为指网页模型的定义与交互的编写——Dom与ECMAScript，也就是JavaScript；
理想状态下，HTML(结构) + CSS(样式) + JS(行为)

HTML

HTML(Hyper Text Markup Language)超文本标记/标签语言。

格式一般如下：

<!DOCTYPE html>
<html lang="en">  <!-- 作为所有HTML的标签的根结点 -->
<head>  <!-- 用于存放：title, meta, base, style, script, link等标签 -->
	<meta charset="UTF-8">
	<title>Document</title>  <!-- 页面标题 -->
</head>
<body> <!-- 实体部分，存放所有的html标签：
	p, h, a, b, u, i, s, em, del, ins等 -->
</body>
</html>

其中<!DOCTYPE html>是为了让浏览器知道使用的html版本，当前这个代表HTML5；<meta charset="UTF-8">表示使用UTF-8编码，可以表示大多数国家的语言编码。

排版标签

标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，由大到小，样式：<h1>文本</h1>，一般<h1>作为logo来使用；

段落标签：<p>段落</p>，(paragraph)，自动换行；

水平线标签：<hr />，(horizontal)，单标签，一条水平线；

换行标签：<br />，(break)，单标签，换行；

div，span标签：(division，span)，没有语义，主要用于存储布区，<div></div>主要划定区域，<span>/span>主要在行内。

文本格式化标签

<b></b>或<strong></strong>：粗体显示，XHTML建议使用strong；

<i></>或<em></em>：斜体显示，XHTML建议使用em；

<s></s>或<del></del>：加删除线显示，XHTML建议使用del；

<u></u>或<ins></ins>：加下划线显示，XHTML不建议使用u；

b，i，s，u只有使用意，没有强调意，而strong，em，del，ins有语义。

标签属性

格式：<标签名属性1="属性值1" 属性2="属性值2" 属性3="属性值3" ...>内容</标签名>

例：水平线、长度为500，颜色为红色：<hr width:"500" color="red" />

属性之间不分先后，均以空格区分，省略不写的属性即取默认值。

图像属性

<img />，(image)，单标签，标准样式：<img src="URL" />

src	URL	图像路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时的显示文本
width	像素(XHTML不支持%页面比)	图像宽度
height	像素(XHTML不支持%页面比)	图像高度(宽高只有一个时会等比缩放)
border	数字	图像边框宽度

链接标签

<a>文本</a>，(anchor)，格式：<a href="跳转目标" target=“目标窗口弹出方式”>文本内容</a>

href：Hypertext Reference，超文本引用；

target：有_self与_blank两种，self为默认，blank为新窗口打开；

例：前往百度，新窗口打开：<a href="http://www.baidu.com" target=“_blank”>百度</a>

这里注意连接一定要加http://，同时还可以添加本地链接，如果href="#"那就说明未确定链接。

锚点定位

通过创建锚点链接，快速的定位页面内容：

首先使用<a href="#id名称">文本内容</a>，id名称为在要跳转的位置中的属性，如：<h3 id="id名称">文本</h3>

例：使用锚点定位跳转到标题为人物历程的位置：

<a href="#live">人物历程</a>
...
<h3 id="live">人物历程</h3>

base标签

base标签可以设置整体链接的打开状态，单标签，<base />

在头标签中使用，例：让所有的标签默认新窗口打开：

<head>
    <base target="_blank" />
</head>

这时所有的链接中target都默认为_blank了，如果想要某个链接在本窗口打开，则要将其target设置为_self。

注释标签

注释不做过多解释，格式

特殊字符

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

路径

相对路径

如果HTML文件与图片文件在一个文件夹中，只要输入图片文件的名称即可，如：<img src="logo.jpg" />

如果HTML文件与图片所在的文件夹在同一级，那么输入文件夹名称和文件名，之间用"/"隔开：<img src="img/logo.jpg" />

如果HTML文件在图片文件夹中的文件夹中，即图片位于HTML文件的上一级，那么在文件夹名之前加上"../"表示上一级，如果在上两级中，就加上"../../"，以此类推：<img src="../../logo.jpg" />

绝对路径

完整路径，所有的目录都有；或者网络中图片的地址。

列表标签

无序列表ul

无序列表中的各个列表之间没有顺序之分，是并列的，语法格式：

<ul>
    <li>文本内容</li>
    <li>文本内容</li>
    <li>文本内容</li>
</ul>

其样式如下，可以使用CSS改变样式：

文本内容
文本内容
文本内容

<ul></ul>中只能放<li></li>，不提倡放其他标签，但可以在<li></li>中放其他标签。

有序列表ol

有序列表中的各个列表之间有顺序之分，按一定顺序排列，语法格式：

<ol>
    <li>文本内容</li>
    <li>文本内容</li>
    <li>文本内容</li>
</ol>

其样式如下，同样可以使用CSS改变样式：

文本内容
文本内容
文本内容

定义列表dl

定义列表中常用于术语和名词进行解释和描述，定义列表的列表项没有任何符号，语法格式：

<dl>
    <dt>文本1</dt>
    <dd>文本1内容</dd>
    ...
    <dt>文本2</dt>
    <dd>文本2内容</dd>
    <dd>文本2内容</dd>
    ...
    <dt>文本3</dt>
    <dd>文本3内容</dd>
</dl>

其样式如下，可以使用CSS改变样式：

文本1
    文本1内容
    ...
文本2
    文本2内容
    文本2内容
    ...
文本3
    文本3内容

头部内容

<head>元素包括了所有的头部标签，可插入脚本、样式文件以及各种meta，如：<title><style><meta><link><script><noscript><base>等。

title定义了不同文档的标题，在HTML/XHTML中是必须的；

base描述了基本的链接地址/链接目标；

link定义了文档与外部文档的关系，大多用于链接CSS样式；

style定义了HTML的样式，直接在其中可书写CSS代码；

meta是指一些基本的元数组。

表格标签

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

表单标签

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

HTML5

HTML5新加了一些语义元素：header(头部区域)、section(定义文档中的节)、footer(定义section或document的页脚)、aside(侧边栏)、nav(导航链接)、article(定义页面的独立内容区域)、figue(规定独立的流内容：图片、图表、照片、代码等)等等，这些都是块元素，可使用display:block让旧版浏览器显示；

使用<video>和<audio>标签定义视频和音频；

在JavaScript中使用getCurrentPosition()来获取位置；

将draggable属性设置为true，元素就可以被拖动；

使用<math>标签就可以书写数学符号和公式；

input有新的输入类型：color、date、e-mail、month、number等等；

通过<canvas>可以创建一个画布，使用width与height来定义画布的大小，使用JavaScript来绘制；

通过<svg>可以将SVG元素直接嵌入到HTML页面，SVG为可伸缩矢量图形，使用XML定义格式，放大缩小改变尺寸对其图像质量没有损失，SVG(Scalable Vector Graphics)时万维网联盟的标准。