您的位置：首页 > Web前端

前端学习之路html基础(01)——常用标签

2017-02-20 14:21 931 查看
HTML：是用来描述网页的一种语言

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

-

HTML 标签：通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如<b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

声明和编码

在文件中引用<!DOCTYPE html>声明有助于浏览器正确地显示网页，声明中其所有字母均不区分大小写；

为了防止在浏览器中的中文出现乱码，我们一般需要在头部声明为UTF-8；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>hello world</p>
</body>
</html>


html编辑器

Notepad++：https://notepad-plus-plus.org/

Sublime Text：http://www.sublimetext.com/

HBuilder：http://www.dcloud.io/

html头部<head>

<head>元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以在头部添加的元素标签为：<title>、<style>、<meta>、<link>、<script>、<noscript>、<base>；

<title>元素

定义了不同文档的标题，它在html文档中是必不可少的；

它定义了浏览器工具的标签、收藏夹时的标题、显示在搜索引擎结果页的标题；

<!DOCTYPE html>
<html>
<head>
<title>this is title</title>
</head>
<body>
this is body
</body>
</html>




<base>元素

描述了基本的链接地址、链接目标，该链接作为html文档中所有链接的默认链接地址。

如果html文档中<a>没有设置具体的值，则使用该默认链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>

<img src="logo.png"><br>
- 注意这里我们设置了图片的相对地址,图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>

<a href="http://www.baidu.com">百度一下</a><br>
- 注意这个链接会在新窗口打开，因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>


<link>元素

标签定义了文档与外部资源之间的关系。

标签通常用于链接到样式表:

ink 元素是空元素，它仅包含属性。

此元素只能存在于 head 部分，不过它可出现任何次数。

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


<style>元素

标签定义了HTML文档的样式文件引用地址.

在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。

<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {color: red;}
p  {color: blue;}
</style>
<title>页面标题</title>
</head>
<body>
<h1>demo标题</h1>
<p>hello world</p>
</body>
</html>


<meta>元素

描述了一些基本的元数据；

浏览器会解析元数据，但是在页面上不会体现出来

一般元数据都定义在<head>部分；

为搜索添加关键字

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
<!-- 为搜索添加关键字 -->
<meta name="keywords" content="html, css, html5">
<!-- 为网页添加描述性内容 -->
<meta name="description" content="this is the tag named meta">
<!-- 定义网页作者 -->
<meta name="author" content="qidl">
<!-- 每个n秒刷新页面 -->
<meta http-equiv="refresh" content="5">
</head>
<body>
<h1>demo标题</h1>
<p>hello world</p>
</body>
</html>


<scrip>元素

用于加载脚本文件，如JavaScript，以后会加以学习。

html标题、段落、文本格式化

<h1>-<h6>标题

<h1>表示最大标题，<h6>表示最小标题。

<p>段落

数据分段显示，默认换行，会忽略其中多余的空格和换行。

<br>换行

标签插入一个简单的换行符。

<hr />水平线

标签在 HTML 页面中创建水平线，用于分隔内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>demo标题1</h1>
<hr />
<h2>demo标题2</h2>
<h3>demo标题3</h3>
<h4>demo标题4</h4>
<h5>demo标题5</h5>
<h6>demo标题6</h6>
</body>
</html>




<b>粗体

<em>着重文字

<i>斜体

<small>小号字

<big>大号字

<strong>加重语气

<sub>下标字

<sup>上标字

<ins>插入字

<del>删除字

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<b>粗体</b><br>
<em>着重文字</em><br>
<i>斜体</i><br>
<small>小号字</small><br>
<big>大号字</big><br>
<strong>加重语气</strong><br>
<sub>下标字</sub><br>
<sup>上标字</sup><br>
<ins>插入字</ins><br>
<del>删除字</del><br>
<b><i>加粗斜体字</i></b><br>
</body>
</html>




<code>计算机代码

<kbd>键盘码

<samp>计算机代码样本

<var>变量

<pre>预格式文本

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<code>计算机代码</code>
<kbd>键盘码</kbd>
<samp>计算机代码样本</samp>
<var>变量</var>
<pre>
日照香炉生紫烟
下一句话是啥忘了  ......
</pre>
</body>
</html>




<abbr>缩写，在浏览器显示缩写内容，鼠标放置此处显示隐藏内容；

<address>地址

<bdo>文字方向

<blockquote>长的引用

<q>短的引用语

<cite>引用、引证，定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

<dfn>一个定义项目

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
合肥有个<abbr title="中国科学技术大学">科大</abbr>
<address>
qdl, china<br>
2017.02.21
</address>
<p>正常的文字显示方向</p>
<p><bdo dir="rtl">正常的文字显示方向</bdo></p>
<blockquote>今天天气不错，气温有所回升，但是雾霾还在...</blockquote>
<p>一位伟人曾经说过<q>人饿了就要吃饭</q></p>
<p>这部伟大的作品叫<cite>金瓶梅</cite></p>
</body>
</html>




html中的链接

我们用标签<a>来设置超文本链接。超链接可以是一个字、一个词、一组词、一幅画等等。

<a>中使用了href属性来描述链接的地址。

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

target属性

使用target属性可以定义被链接的文档在何处显示；

target=”_blank”会显示新的窗口；；

id属性

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

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

请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”http://www.baidu.com”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.baidu.com/”。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>创建图片链接:</p>
<a href="http://www.baidu.com/">
<img src="girl01.jpg" alt="妹子哇" width="200" height="200">
</a>

<p>
<a href="#C1">查看第一部分</a>
<br>
<a href="#C2">查看第二部分</a>
</p>
<p id="C1">這就是第一部分</p>

</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 前端 标签
相关文章推荐
新的分享
章节导航