HTML基础-可爱柚

HTML注释

<!-- http://keaiu.com -->

HTML标题

HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的。

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：

<h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

例如：

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

HTML段落

HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写。

经常被用来创建一个段落，就和你写作文一样。

例如：

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

实例：

<h1>1可爱柚</h1>
<p>1可爱柚keaiu.com</p>
<h2>2可爱柚</h2>
<p>2可爱柚keaiu.com</p>
<h3>3可爱柚</h3>
<p>3可爱柚keaiu.com</p>

HTML链接

<a href="http://keaiu.com">这是一个链接</a>

<a href="http://keaiu.com" target="">可爱柚</a>
<p>如果将target属性设置为"_blank",链接将在新窗口打开。</p>

假如这样书写链接：href="//keaiu.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="//keaiu.com/html/"。

HTML图像

<img src="keaiu.png" width="206" height="36">

<img src="https://keaiu.com/keaiu.jpg" rel="external nofollow">

请注意：img元素是自关闭元素，不需要结束标记。

alt属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。

<h2>可爱柚</h2>
<img src="keaiu.jpg" alt="Pulpit rock">

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

HTML强调

在 HTML 中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：

<p>可<em>爱</em>柚<em>keaiu.com</em>.</p>

演示：可爱柚keaiu.com.

在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：

<p>可爱柚<strong>keaiu.com</strong>.</p>

演示：可爱柚keaiu.com.

HTML折行

如果您希望在不产生一个新起点的情况下进行换行（新行），请使用 <br /> 标签。

在 HTML 语言中，<br /> 标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行拆分。

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<p>可爱柚<br>keaiu.com<br>演示了分行的效果</p>

演示：

可爱柚

keaiu.com

演示可分行的效果

HTML文本格式化

HTML使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，如：粗体或斜体

这些HTML标签被称为格式化标签

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

演示：

加粗文本

斜体文本

电脑自动输出

这是_下标和^上标

常用标签<strong>替换加粗标签<b>来使用，<em>替换<i>标签使用。

然而，这些标签的含义是不同的：
<b>与<i>确定义粗体或斜体文本。
<strong>或者<em>意思着你要现在的文本是重要的，所以要突显出来。
现在所有主要浏览器都能够冲洗各种效果的字体。不过，未来浏览器具可能会支持更好的冲洗效果。

HTML格式化标签

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

HTML“计算机输出”标签

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

HTML引文，引用，及标签指定义

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

HTML链接-id属性

id 属性可用于在一个HTML文档中创建书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

实例：

在HTML 文档中插入ID：

<a id="tips">Useful Tips Section</a>

在HTML文档中创建一个链接到"有用的提示部分 (id="tips"）"：

<a href="#tips">Visit the Useful Tips Section</a>

或者，从另一个页面创建一个链接到"有用的提示 (id="tips"）部分"：

<a href="//keaiu.com/html_links.html#tips"> Visit the Useful Tips Section</a>

HTML头部

HTML<head>元素

<head> 元素包含了所有的头部标签元素。

在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head>元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

HTML<link>元素

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

HTML<style>元素

在<style>元素中你需要指定格式的文件来自流染HTML文件：

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

HTML<meta>元素

元数据是关于数据的信息。

典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta name="keaiu" content="HTML, CSS, XML" />

name和content属性的作用是描述页面的内容。

HTML头元素

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

HTML区块

<div>标签可以把文档分割为独立的不同的部分。

HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。

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

实例：

<p>我有一双

<span style="color:gold">金色</span> 的
<span style="font-size:50px">大眼睛</span>和 
<span style="color:blue">蓝色的头发</span>。
</p>

演示：我有一双金色的大眼睛和蓝色的头发。

HTML样式CSS

CSS（Cascading Style Sheet）可译为“层级样式表”或“层叠样式表”，它决定如何显示HTML元素，用于控制网页界面的外观。通过使用CSS实际页面的内容与表格形式分离，极大提高了工作效率。样式存储在样式表中，通常释放于<head>部分或存储在外部CSS文件中。作为网页标准设计的趋势，CSS得了渗透浏览器厂商的广泛支持，正越来越多被应用到网页设计中去。

内联式

当特殊的样式需要应用到个别元素时，就可以使用内部样式，可以在<head>部分通过<style>标签确定内部样式表。内部连接样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示如何更改部分分解下的颜色。

<p style="color:blue;margin-left:20px;">可爱柚keaiu.com</p>

内部样式表

当单个文件需要特殊样式时，就可以使用内部样式表。你可以在<head>部分通过<style>标签确定内部样式表：

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

外部样式表

当样式需要被应用到很多页面的时候，外部样式将是理性的选择。使用外部样式，你就可以通过修改一个文件来修改改变整个站点的外观。

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

HTML脚本

JavaScript是可插入HTML页面的编程代码。

JavaScript使HTML页面具有更强的动态和交互性。

JavaScript插入HTML页面后，可由所有的现代浏览器执行。

HTML<script>标签

JavaScript最常用于图片操作、表单验证以及内容动态更新。

<script>
document.write("可爱柚keaiu.com")
</script>

HTML<noscript>标签

比如在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

只有在浏览器不支持脚本或者禁用脚本时，才会显示<noscript>元素中的内容。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>可爱柚keaiu.com</title> 
</head> 
<body>
<script>
document.write("可爱柚keaiu.com")
</script>
<noscript>抱歉，你的浏览器不支持JavaScript!</noscript>
<p>不支持JavaScript的浏览器会使用noscript元素中定义的内容（文本）来替代。</p>
</body>
</html>

HTML脚本标签

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

HTML基础

柚子

邮箱

微信

回顶