HTML入门

HTML简介

HTML(Hyper Text Markup Language)HTML是超文本标记语言,不是编程语言,使用标记标签来描述网页。

HTML标签是由尖括号包围的关键词,通常成对出现。第一个为开始标签,第二个为结束标签。

HTML文档也称为网页。

HTML可以使用Notepad或TextEdit编写。保存HTML时使用.html为扩展名。


HTML元素


开始标签其实,结束标签终止,某些HTML元素具有空内容,空元素在开始标签进行关闭,大多数HTML元素可拥有属性,大多数HTML元素可进行嵌套。

HTML通过<a>标签定义链接,在href属性中指定链接的地址,通过<p>标签定义段落,通过<h1>-<h6>等标签定义标题,通过<img>标签定义图像,名称和尺寸以属性形式提供,scre=,<body> 元素定义了 HTML 文档的主体,<table>定义HTML表格,<html> 元素定义了整个 HTML 文档。

没有内容的HTML标签被称为空元素,在开始标签中添加斜杠,是关闭空元素的正确方法,<html> 元素定义了整个 HTML 文档,即使<br>在所有浏览器中有效,关闭空元素具有更长远的保障。


HTML属性

属性提供了有关HTML元素更多的信息。属性总是以名称/值对的形式出现,在HTML的开始标签中进行规定。

属性和属性值对大小写不敏感,推荐使用小写属性,属性值应该始终被包括在引号内,在个别情况下,比如属性值本身具有双引号,必须使用单引号。

HTML标题通过<hx>实现,确保HTML heading标签只用于标题,<hr/>在HTML页面中创建水平线,<!-->定义注释,讲注释插入HTML代码中,可使代码更容易被人理解。在网页中单击右键选择“查看源文件”或“查看页面源代码”即可查看源代码。浏览器会自动地在段落的前后添加空行,如果想在不产生新段落下进行换行,可以使用<br/>标签。

HTML的style属性提供了一种改变所有HTML样式的通用方法,background-color 属性为元素定义了背景颜色,font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。


HTML文本格式化

文本格式化标签:

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

“计算机输出”标签:

<code>定义计算机代码。<kbd>定义键盘码。<samp>定义计算机代码样本。<tt>定义打字机代码。<var>定义变量。<pre>定义预格式文本。

引用、引用和语术定义:

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

HTML<q>元素定义短的引用,通常会被浏览器进行包围引导,<blockquote>定义被引用的节,通常浏览器会对<blockquote>元素进行缩进处理<abbr> 元素定义缩写或首字母缩略语。HTML <dfn> 元素定义项目或缩写的定义。HTML <address> 元素定义文档或文章的联系信息(作者/拥有者),通常以斜体显示。HTML <cite> 元素定义著作的标题。通常以斜体显示。<bdo> 元素定义双流向覆盖(bi-directional override)。

计算机代码元素

<code>定义计算机代码文本。<kbd>定义键盘文本。<samp>定义计算机代码示例。<var>定义变量。<pre>定义预格式化文本。

注释标签 <!-- 与 --> 用于在 HTML 插入注释, 注释对于 HTML 纠错也大有帮助,因为您可以一次注释一行 HTML 代码,以搜索错误.条件注释定义只有 Internet Explorer 执行的 HTML 标签。各种HTML软件也能生成HTML注释。


HTML CSS

HTML中的样式

分为外部样式表、内部样式表、内联样式。当样式需要被应用到很多页面的时候,使用外部样式表,可以通过更改一个文件来改变整个站点的外观。当单个文件需要特别样式时,就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<style>定义样式定义。<link>定义资源引用。<div>定义文档中的节或区域(块级)。<span>定义文档中的行内的小块或区域。

在 HTML图像

由 <img> 标签定义。<img> 是空标签,只包含属性,没有闭合标签。要在页面上显示图像,需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img>定义图像。<map>定义图像地图。<area>定义图像地图中的可点击区域。

表格

由 <table> 标签来定义。如果不定义边框属性,表格将不显示边框。表格的表头使用 <th> 标签进行定义。为了避免空的单元格的边框没有被显示出来,在空单元格中添加一个空格占位符,就可以将边框显示出来。<table>定义表格。<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。

列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>

有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

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

HTML <div> 和 <span>

<div> 元素是块级元素,可用于组合其他 HTML 元素的容器。浏览器会在其前后显示折行。与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类。

HTML <span> 元素是内联元素,可用作文本的容器。没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。分类行内元素。

HTML 响应式 Web 设计

RWD 指的是响应式 Web 设计(Responsive Web Design),RWD 能够以可变尺寸传递网页,RWD 对于平板和移动设备是必需的。

HTML框架

通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。使用框架的坏处:开发人员必须同时跟踪更多的HTML文档,很难打印整张页面。

框架结构标签(<frameset>)定义如何将窗口分割为框架,每个 frameset 定义了一系列行列,rows/columns 的值规定了每行或每列占据屏幕的面积假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签noresize="noresize"。不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1 41
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 10,990评论 46 548
  • 博主在使用Flask过程,预在项目中使用中Jinja模板。学习Jinja模板离不开基础的HTML的知识。本文是学习...
    stoneyang94阅读 462评论 0 0