HTML基础1

AA.png

该<!DOCTYPE html>声明定义这个文件是HTML
该<html>元素是HTML页面的根元素
该<head>元素包含有关该文档的元信息
该<title>元素指定文档的标题
该<body>元素包含可见页面内容
该<h1>元素定义了一个大的标题
该<p>元素定义了一个段落

换行

HTML标题
HTML标题由<h1>至<h6>标签定义。
<h1>定义了最重要的标题。<h6>定义了最不重要的标题:

HTML段落
HTML段落使用<p>标记定义:

HTML链接
HTML链接使用<a>标签定义:

<a href="https://www.w3schools.com">This is a link</a>

HTML图片
HTML图像使用<img>标签定义。
源文件(src),替代文本(alt),宽度和高度作为属性提供:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
[尝试自己»

](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img)

HTML元素
HTML元素通常由起始标记和结束标记组成,其中插入的内容包括:
< tagname >内容到这里... < / tagname >

嵌套HTML元素
HTML元素可以嵌套(元素可以包含元素)。

所有HTML文档都由嵌套的HTML元素组成。

此示例包含四个HTML元素

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

空HTML元素
没有内容的HTML元素称为空元素。

是没有结束标记的空元素(
标记定义换行符)。
空元素可以在开始标签中“关闭”,如下所示:<br />。
HTML5不需要关闭空的元素。但是,如果要更严格的验证,或者如果您需要使XML解析器可读取文档,则必须正确关闭所有HTML元素。

HTML属性
所有HTML元素都可以有属性
属性提供有关元素的其他信息
属性始终在开始标签中指定
属性通常来自名称/值对,如:name =“value”
href属性
HTML链接使用<a>标签定义。链接地址在href属性中指定:

<a href="https://www.w3schools.com">This is a link</a>

src属性
HTML图像使用<img>标签定义。
图像源的文件名在src属性中指定:

![](img_girl.jpg)

宽度和高度属性
HTML中的图像具有一组大小属性,指定图像的宽度和高度:

![](img_girl.jpg)

alt属性
当不能显示图像时,alt属性指定要使用的替代文本。
属性的值可以由屏幕阅读器读取。这样,有人“听”网页,例如盲人,可以“听到”元素。

![](img_girl.jpg)

HTML标题
标题由<h1>至<h6>标签定义。

<h1>定义了最重要的标题。<h6>定义了最不重要的标题。

a.png
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

标题很重要
搜索引擎使用标题来索引您的网页的结构和内容。
用户按标题浏览您的页面。使用标题显示文档结构很重要。
主要标题应使用<h1>标题,后跟<h2>标题,然后不太重要的<h3>等等。
更大的标题
每个HTML标题都有一个默认大小。但是,您可以使用style属性指定任何标题的大小:

<h1 style="font-size:60px;">Heading 1</h1>

HTML水平规则


标签定义HTML页面中的专题中断,并且通常以水平规则的形式显示。

元素用于分隔HTML页面中的内容(或定义更改):

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML段落
HTML <p>元素定义一个段落:

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

HTML显示
您无法确定HTML的显示方式。
大屏幕或小屏幕,并且调整大小的窗口将创建不同的结果。
使用HTML,您不能通过在HTML代码中添加额外的空格或额外的行来更改输出。
当页面显示时,浏览器将删除任何额外的空格和额外的行:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

不要忘记结束标签
大多数浏览器会正确显示HTML,即使您忘记了结束标签

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

HTML <pre>元素
HTML <pre>元素定义了预格式化的文本。

<pre>元素中的文本以固定宽度字体(通常为Courier)显示,并保留空格和换行符:

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

HTML样式属性
设置HTML元素的样式,可以使用style属性。

HTML样式属性具有以下语法:

<tagname style="property:value;">

该属性是一个CSS属性。该值是一个CSS值。

HTML背景颜色
的背景颜色属性定义HTML元素的背景颜色。
此示例将页面的背景颜色设置为蓝色:

<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

HTML文本对齐
的文本对齐属性定义HTML元素水平文本对齐:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
使用样式属性来设置HTML元素
使用背景色作为背景色
使用颜色的文字颜色
为文字字体使用font-family
对于文字大小使用font-size
使用text-align进行文本对齐

HTML格式元素
在上一章中,您了解了HTML 样式属性。
HTML还定义了用于定义具有特殊含义的文本的特殊元素。
HTML使用像<b>和<i>这样的元素来格式化输出,比如粗体或斜体文字。
格式化元素旨在显示特殊类型的文本:

<b> - 粗体文字
<strong> - 重要文字
<i> - 斜体文字
<em> - 强调文字
标记文字
<small> - 小文字
<del> - 已删除的文字
<ins> - 插入的文字
<sub> - 下标文字
<sup> - 上标文字

HTML文本格式元素


[<b>]           Defines bold text

[<em>]       Defines emphasized text 

[<i>]             Defines italic text

[<small>]   Defines smaller text

[<strong>]   Defines important text

[<sub>]       Defines subscripted text

[<sup>     Defines superscripted text

[<ins>]      Defines inserted text

[<del>]       Defines deleted text

[<mark>]     Defines marked/highlighted text

HTML <q>用于简短报价
HTML <q>元素定义了一个简短的引号。
浏览器通常在<q>元素周​​围插入引号。

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <abbr>缩写
HTML <abbr>元素定义缩写或首字母缩略词。
标记缩写可以为浏览器,翻译系统和搜索引擎提供有用的信息。

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <cite>作品标题
HTML <cite>元素定义了作品的标题。
浏览器通常以斜体显示<cite>元素。

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo>用于双向覆盖
HTML <bdo>元素定义了双向覆盖。
<bdo>元素用于覆盖当前文本方向

<bdo dir="rtl">This text will be written from right to left</bdo>
<!-- Write your comments here -->

内联CSS
内联CSS用于将唯一样式应用于单个HTML元素。
内联CSS使用HTML元素的style属性。
此示例将<h1>元素的文本颜色设置为蓝色:

<h1 style="color:blue;">This is a Blue Heading</h1>

内部CSS
内部CSS用于为单个HTML页面定义样式。
内部CSS在HTML页面的<head>部分中定义,在<style>元素中:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

外部CSS
外部样式表用于定义许多HTML页面的样式。
使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!
要使用外部样式表,请在HTML页面的<head>部分添加一个链接:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

外部样式表可以写入任何文本编辑器。该文件不能包含任何HTML代码,并且必须使用.css扩展名保存。
以下是“styles.css”的样子:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS字体
CSS 颜色属性定义要使用的文本颜色。
CSS font-family属性定义要使用的字体。
CSS font-size属性定义要使用的文本大小。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS边框
CSS 边框属性定义HTML元素周围的边框:

p {
    border: 1px solid powderblue;
}

CSS填充
CSS 填充属性定义文本和边框之间的填充(空格):

p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSS保证金
CSS 边距属性定义了边框外的边距(空格):

p {
    border: 1px solid powderblue;
    margin: 50px;
}

id属性
要为一个特殊元素定义特定样式,请向元素添加一个id属性:

<p id="p01">I am different</p>

然后为具有特定ID的元素定义样式:

#p01 {
    color: blue;
}

类属性
要为特殊类型的元素定义样式,请向元素添加类属性:

<p class="error">I am different</p>

然后为具有特定类的元素定义样式:

p.error {
    color: red;
}

外部参考
可以使用完整的URL或相对于当前网页的路径引用外部样式表。
此示例使用完整的URL链接到样式表:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

此示例链接到位于当前网站的html文件夹中的样式表:

<link rel="stylesheet" href="/html/styles.css">

此示例链接到与当前页面位于同一文件夹中的样式表:

<link rel="stylesheet" href="styles.css">
使用HTML 样式属性进行内联样式
使用HTML <style>元素定义内部CSS
使用HTML <link>元素来引用外部CSS文件
使用HTML <head>元素来存储<style>和<link>元素
对文本颜色使用CSS 颜色属性
将CSS font-family属性用于文本字体
将CSS font-size属性用于文本大小
对边框使用CSS 边框属性
对边框内的空格使用CSS padding属性
对边框外的空格使用CSS margin属性

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,210评论 1 41
  • 我又出来赶博客了,这几天接触的知识量有点大,欠了能有10几篇博客吧,我觉得我再不赶出来,知识点就全忘记了,所以我决...
    头大如牛阅读 224评论 0 0
  • 有一个朋友叫静静,说心里话,我挺想静静。 周末一场小雪,下了相当于没下,希望通过以雪盖霾的人们叹了口气。 于是我开...
    coco刘阅读 858评论 0 0
  • 华盛顿奇才队今天宣布,当家球星约翰-沃尔左膝盖出现不适以及炎症,他将因此缺阵两周左右的时间。沃尔接受了核磁共振检测...
    Sandy体育风云阅读 238评论 0 0