HTML是一门典型的标记语言。

基本骨架

html文件首先是文档类型声明标签，然后是以的标签闭合。在其包含的标签中描述有头部信息，然后在其包含标签中可填入页面标题。在标签内填入网页内容。和为并列关系。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html5</title>
</head>
<body>
  Hello,Html!
</body>
</html>
<!-- 这是注释 -->

文本标签

标题标签

标题标签

单独占一行，大小从h1（最大）-h6（最小）。

1
2
3
4
5
6
<h1>This is html!</h1>
<h2>This is html!</h2>
<h3>This is html!</h3>
<h4>This is html!</h4>
<h5>This is html!</h5>
<h6>This is html!</h6>

段落标签

段落标签

以段落形式展现文本，实际在代码中写入的空格无效。文本在一个段落中会根据浏览器窗口的大小自动换行，并且段落和段落之间保有空隙。如果希望某段文本强制换行显示，就需要使用换行标签
。注意：
不是闭合标签，它的换行没有段落行间距。

在段落标签中可以加入下划线，斜体等操作，以下是相关标签：

语义

标签

加粗

****或

倾斜

****或

删除线

****或

下划线

****或

注：加粗的标签语义更强烈，更推荐。

1
2
3
4
<p>htmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtml <strong>加粗加粗加粗加粗加粗</strong> html <em>斜体斜体斜体斜体斜体</em>html<del>删除线删除线删除线删除线删除线</del>html<ins>下划线下划线下划线下划线下划线</ins>htmlhtmlhtmlhtml强制换行<br>htmlhtmlhtmlhtmlhtmlhtmlhtml</p>
<p>htmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtml <strong>加粗加粗加粗加粗加粗</strong> html
    <em>斜体斜体斜体斜体斜体</em>html<del>删除线删除线删除线删除线删除线</del>html<ins>下划线下划线下划线下划线下划线</ins>htmlhtmlhtmlhtml强制换行<br>htmlhtmlhtmlhtmlhtmlhtmlhtml
</p>

“盒子”标签

和标签都是闭合标签。**不同的是
标签一行只能放一个盒子,标签一行上可以多个盒子。** 
1
2
3
<div>这个可以做头部标签容器</div> <!-- 一个<div>标签在一行 -->
<span>这个可以做各项标签容器</span>
<span>这个可以做各项标签容器</span> <!-- 两个<span>标签在一行 -->

链接标签

图像标签

**图像标签是自闭合标签，**其允许向网页中添加图像元素。在使用时应当注意相对路径或url的可用性，必要时使用相关属性代替或说明。图像标签有多个属性，以下为相关属性：

属性

属性值

说明

src

图片路径

必须属性

alt

文本

替换文本，图像不能显示时显示此文字

title

文本

提示文本，鼠标放到图像上，显示文字

width

像素

设置图像的宽度

height

像素

设置图像的高度

border

像素

设置图像的边框粗细

在使用时应当注意：

  • 图像标签可以拥有多个属性，必须写在标签名的后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 属性采取键值对的格式，即 key=“value” 的格式，属性 =“属性值”。
1
2
<img src="https://media.alxcn.eu.org/links/头像.jpg" title="这是提示文本范例。" width="500" width="550" border="30">这是图像标签范例。
<img src="https:/notfind.notfound/404.jpg" alt="这是替换文本范例" border="1">这是图像标签范例。

超链接标签

超链接标签是闭合标签。其两个属性如下：

属性

作用

href

必须属性，用于指定链接目标的url地址

target

指定链接页面打开方式，其中_self为默认值在当前窗口打开，_blank为在新窗口打开

链接有许多种，以下是链接分类：

  • 外部链接: 例如 < a href=”http:// www.baidu.com “> 百度
  • 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=”index.html”> 首页
  • 空链接: 如果当时没有确定链接目标时，例如< a href=”#”> 首页
  • 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
  • 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
1
<a href="https://alx962.eu.org" target="_blank">Alx962の主页</a>

超链接标签之页内跳转

这种链接叫做锚点链接，点击链接可以快速定位到页面中某个位置。在链接文本的 href 属性中，设置属性值为 #名字 的形式，如点我跳转，再在目标位置标签里面添加一个id属性=刚才的名字，如：

跳转成功

。

1
2
3
<a href="#mark">点我跳转</a>
<!-- 网页内容 -->
<h1 id="mark">跳转成功</h1>

特殊字符

特殊字符见下表：

特殊字符

描述

（空格）

 

<

<

>

>

&

&

￥

¥

©

©

®

®

°（度）

°

±

±

×

×

÷

÷

²（平方）

²

³（立方）

³

常用特殊字符

Html第Ⅰ部分完。