二.HTML基础

1.HTML：用来结构化web网页和其内容的标记语言。你的内容可以是：一组段落，一个重点列表，可以包含图片，数据表等。

不是编程语言，是用来定义内容结构的标记语言。

 

2.HTML由一系列元素elements组成，不同元素来封装不同部分的内容，以不同的方式呈现。

My cat is very grumpy

想单独显示，可以封装为一个段落元素paragraph

<p>My cat is very grumpy</p>

段落元素定义如下：

前后为闭合标签tags，中间是内容，tags+内容=元素。

元素可以由属性：

Attribute包含了元素的额外信息，这些信息不需要被显现在内容中。

上例，class是属性名称，editor-note是属性值。class属性是你为元素加的标识名，便于对元素指定样式或进行其他操作。

一个属性包括：

（1）与元素名之间对空格，或属性与属性间的空格（多个属性的情况）（2）属性名称和=连接（3）引号包围的“属性值”

 

3.元素嵌套：元素置于其他元素之中，--------》》表示猫非常暴躁，用<strong>包围非常

<p>My cat is <strong>very</strong> grumpy</p>

4.空元素：不包含内容的元素，如<img>元素

<img src="images/firefox-icon.png" alt="My test image">

由2个属性，但没有</img>闭合，也没有内容。因为图像元素不需要内容来产生效果，------->>>其作用是向所在位置嵌入一个图像。

 

5.解析HTML文档

组合完整的HTML文档，结合之前的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My test page</title>
</head>
<body>
<img src="images/google-icon.jpg" alt="My test imgage">
</body>
</html>

（1）<!DOCTYPE html> ：文档类型。历史原因，必须加上，无他。

（2）<html></html> ：<html>元素。包含整个页面的内容，根元素。

（3）<head></head> ：<head>元素。其内容不向用户展示，包含：面向搜索引擎的搜索关键字（keywords），页面描述，css样式表，字符编码声明等。

（4）<body></body> ：<body>元素。包含用户可看到的内容。包含：文本，图像，音频，视频，游戏等。

（5）<meta charset="UTF-8"> 元素 ：指定文档使用的字符编码是UTF-8，可以处理任何文本。为了避免以后出问题，要设置字符编码。

（6）<title></title> ：<title>元素。设置页面的标题，显示在浏览器标签上，也是将你网页收藏时的默认名。

 

6.图像

<img src="images/google-icon.jpg" alt="My test imgage">

src与alt是img元素必要的两个属性

alt属性（alternative），可为空“”-----图像的描述，当用户看不到图像时，作为可以描述图像的文本。

看不到的原因：

（1）用户视觉障碍，可用屏幕阅读器读出alt属性的内容；

（2）代码错误使图像不可被展示。如，src路径错误，加载页面，会在图像位置显示alt提示内容。

alt：足够表达图像的内容。应完善为

<img src="images/google-icon.jpg" alt="A Google log:a big letter G">

7.标记文本

一些基本的用来标记文本的html元素。

（1）标题（不同于页面标题title）：标题元素允许你指定内容的标题和自标题，如大标题->中标题->小标题->微标题->看不见的标题->...

html文档也有标题，有六个级别，<h1>~<h6>，如

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
<h5>My image</h5>
<img src="images/google-icon.jpg" alt="My test imgage">

（2）段落

<p>元素指定段落，用来指定常规的文本内容。

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

添加到img元素之下。

（3）列表

很多web内容都是列表，包含两个元素：有序列表和无序列表。

无序列表（unordered lists）： 顺序不重要，如购物列表，内容放在<ul>元素里。

有序列表（ordered lists）：顺序重要，如流程，内容放<ol>元素中。

列表的每个项目包括在<li>元素中。

如将下面paragraph改为一个列表

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

可以

<p>A Mozilla,we're a global community of</p>
<ul>
    <li>tecknologists</li>
    <li>thinkers</li>
    <li>builders</li>
</ul> 
<p>working together ...</p>

8.链接

<a>元素植入链接，anchor锚，将文本添加称链接：

（1）文本放到<a>中

<a>Mozilla Manifesto</a>

（2）添加href属性

<a href="">Mozilla Manifesto</a>

（3）把链接网址放到href中

<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

网址开始省略https://或http://协议可能得到错误结果，完整书写。

href:    hypertext reference    超文本引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My test page</title>
</head>
<body>
<h1>Mozilla is cool</h1>
<h5>My image</h5>
<img src="images/google-icon.jpg" alt="My test imgage">
<p>A Mozilla,we're a global community of</p>
<ul>
    <li>tecknologists</li>
    <li>thinkers</li>
    <li>builders</li>
</ul>
<p>working together ...</p>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn more about them.</p>
</body>
</html>

 

 

posted @ 2018-12-20 18:31  rOtk1992  阅读(143)  评论(0)    收藏  举报