前端学习笔记--HTML

All from w3school

HTML简介

HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），不是一种编程语言，而是一种标记语言。

文档=网页

HTML文档描述网页，文档包含HTML标签和纯文本；Web浏览器的作用就是读取HTML文档，并以网页的形式去显示他们。

<html>
<body>
<h1>hello world</h1>
<p>这是一个段落</p>
</body>
</html>

例子解释

<html>与</html>之间的文本描述网页
<body>与</body>之间的文本是可见的页面内容
<h1>与</h1>之间的文本被显示为标题
<p>与</p>之间的文本被显示为段落

HTML基础

HTML标题

HTML标题是通过h1-h6等标签进行定义的。

实例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML段落

HTML段落是通过<p>标签进行定义的。

实例

<p> This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML链接

HTML链接是通过a进行定义的。

<a href="https://github.com/LiuYing0111">这是刘莹的博客</a>

注：在href属性中指定链接的地址。

HTML图像

HTML图像是通过img标签进行定义的。

<img src="img.jpg" width="104" height="142"/>

注：图像的名称和尺寸是以属性的形式提供的。

HTML元素

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
<p>	This is a paragraph	</p>
<a href="default.htm">	This is a link	</a>
<br />

嵌套的HTML元素

大多数HTML元素可以嵌套（可以包含其他HTML元素）。
HTML文档由嵌套的HTML元素构成。
HTML文档实例

<html>
<body>
<p>这是一个段落</p>
</body>
</html>

上面的例子包含三个HTML元素。

空的HTML元素

没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。
< br > 就是没有关闭标签的空元素（< br >标签定义换行）。
在开始标签中添加斜杠，比如< br/ >,是关闭空元素的正确方法。

HTML属性

属性为HTML元素提供附加信息。
HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在HTML元素的开始标签中规定。

属性例子

<h1 align="center">拥有关于对齐方式的附加信息。
<body bgcolor="yellow">拥有关于背景颜色的附加信息。
<table boder="1">拥有关于表格边框的附加信息。

HTML水平线

< hr/>标签在HTML页面中创建水平线。
hr 元素可用于分隔内容。

实例

<p>This is a paragraph. </p>
<hr/>
<p>This is a paragraph. </p>
<hr/>
<p>This is a paragraph. </p>

<p>This is a paragraph. </p>

<p>This is a paragraph. </p>

<p>This is a paragraph. </p>

HTML注释

HTML折行

在不产生一个新段落的情况下进行换行，使用< br/>标签。

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

HTML样式

style 属性用于改变HTML元素的样式。
background-color属性为元素定义了背景颜色；
font-family定义了文本的字体系列；
color 定义了字体颜色；
font-size定义了字体尺寸;
text-align规定了元素中文本的水平对齐方式。

实例

<html>
<body style ="background-color:PowderBlue;">
<h1>Look!Styles and colors </h1>
<p style ="font-family：verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green.</p>
<p style ="font-size:30px">This text is 30 pixels high</p>
<h1 style="text-align:center">This is a heading.</h1>
</body>
</html>

结果：

HTML文本格式化

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

HTML引用

HTML短的引用

<q>元素定义短的引用

HTML长应用

HTML<blockquote>元素定义被引用的节。
浏览器通常会对<blockquote>元素进行缩进处理。

<p>超长的引用。</p>
<blockquote>
洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥
</blockquote>

结果：

HTML缩略词abbr

<abbr>元素定义缩写或首字母缩略语。
实例：

<p><abbr title="World Health Organization">WHO</abbr>成立于1948年。</p>

HTML引文、引用和定义元素

标签	描述
<abbr>	定义缩写或首字母缩略语
<address>	定义文档作者或拥有者的联系信息
<bdo>	定义文本方向
<blockquote>	定义从其他来源引用的节
<dfn>	定义项目或缩略词的定义
<q>	定义短的行内引用
<cite>	定义著作的标题

HTML笔记一