HTML 入门

2020-06-12 本文已影响0人流水留星

超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言（markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”(head)部分和“主体”(body)部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

标签和属性

学习HTML把握2个重点：标签和属性。
HTML的标签大约几十个。每个标签有几个属性。在初学阶段，你不需要将它全部记下来。你只需记住最常用的十几个即可。

当你在实践中，遇到生疏的标签或属性时，请查阅w3cschool的手册：https://m.w3cschool.cn/htmltags/html-reference.html
对照列表中的例子用起来就能解决实际的问题了

元素构成及其属性

示例：

<div id="upgradeDianoseWrapperTitle" class="none">软件升级</div>

开始标签：开始标签包含元素的名称（本例为 div元素），被一对尖括号“<>”包围。它表示元素从这里开始，本例则表示段落由此开始。<div>

结束标签：与开始标签相似，结束标签多了符号“/”。它表示元素在这里结束，在本例中表示段落由此结束。</div>

内容：元素的内容。本例是文本描述：软件升级。

元素属性：本例中，属性“class”，“id”额外说明了<div>元素的识别名字，“class”可以用作识别<p>元素的样式以及其它信息。
元素属性必须包含：
空格：在元素和属性之间必须有一个空格。如果一个元素同时具有多个属性，属性之间也用空格隔开。
符号“=”：属性后面紧跟着一个符号“=”。
值：“=”后面必须有一个属性值。它由一对引号“ ”包围。
关于属性的值，有三个细节需要注意：
1.必须在英文状态下，输入引号。
2.可使用双引号也可使用单引号。但是，双引号和单引号不得在一个属性值里混用。
3.如果在属性值中已使用了双引号，双引号里面的内容还需要引用，则得使用单引号。

元素的嵌套

把元素放到其他元素中被替换元素的层叠。
元素的开始标签和结束标签需要成对出现。
每对标签独立或是全部被包含在另一标签对中。
eg:

<p>We are <strong>friends</strong></p>

块级元素和内联元素

在HTML中有两种元素类别：块级元素和内联元素。

块级元素 ：其代码如块状显示。块级元素通常用于展示页面上层结构化的内容。如：进行，列表，导航菜单，页脚等。中，但可嵌入在其他块级元素中。

内联元素：它常出现在块级元素中并包裹着一小部分文档内容。内联元素在形式上通常如行状显示。它通常出现在一堆文字之间。如，超链接元素<a> ，专有元素<em>元素和<strong>元素都是内联元素。

空元素

一个完整元素=开始标签+内容+结束标签
以上公式并不能适用所有的HTML元素。
一些元素只有一个标签，元素的标签内附有一些额外信息。这样的元素叫做“空元素”。

<img>就是一个空元素。它通常被插入一张一张指定的图片。

html文档结构

eg:

<!DOCTYPE html>
<html>
  <head>
    <title>dw</title>
  </head>
  <body>
    <p>Doctor Who！</p>
  </body>
</html>

<!DOCTYPE html >:它是文档声明。你不需要记忆这行代码，也不需要纠结于它的意义。当它出现时，知道它是一行文档类型的说明即可。
<html></html>: <html>元素是整个完整页面的根元素。
<head></head>：<head>元素是一个容器。它包含了所有HTML页面的头部信息。这些信息用户不一定全都看见。这些信息包括搜索关键字，页面描述，CSS样式等。
<title></title>:<title>元素用来设置页面标题。它出现在浏览器标签上，当你的浏览器标记或收藏页面时，它可用来描述页面。如：w3cschool.cn的微课页面title
<body></body>:<body>元素包含了访问页面时所有显示在页面上的内容：文本，图片，音频，视频、动画等等。之前的课程，我们介绍过的<h>元素、<p>元素、<img>元素均可嵌套在<body>元素之中形成网页的主体内容。
综上：HTML的文档结构包括网页的<head>头部和<body>主体两个部分。

文档结构中的常见元素

第1步：使用<h>元素构成网页标题。标题可分为6级：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>。每级标题的字体依次减小。除非是超大型的项目，否则，很少用到<h4>,<h5>,<h6>。
第2步：使用<img>元素。它是空元素，它只有一个标签。它是用来在<img>所在的位置插入一张指定的图片
第3步：使用<p>元素。在前面的知识点中，我们常用它来举例子。它表示段落。它可描述文本

<img>元素

<img>元素，我们知道它是空元素。该元素包含属性src将图像文件路径的地址包裹其中，可在网页内容中嵌入图像。
该元素还包括一个替换文字属性alt。该属性是图像的描述内容。当图像不能正常显示时，它负责说明

<a>元素

我们可以通过<a>元素对文本植入超链接。

<a href="https://www.w3cschool.cn/">随时随地学编程，请上w3cschool.cn</a>

列表

标有序号的内容是有序列表的样式。在HTML代码中，它用一个<ol>元素包围。
标有黑色小圆点的内容是无序列表的样式。在HTML代码中，它用一个<ul>元素包围。
列表中的每个项目都要用一个<li>元素包围。

零散基础知识点

1.编码格式，浏览器用什么方式打开代码。

<meta charset =“ utf-8”>

< br > 也是空元素。它的作用是折行。它能够使图片和下面的段落文本分离成两行。这样能使网页结构更加清晰，看起来更加美观

3.<strong>元素的效果是加粗;<em>元素的效果是斜体。