HTML结构
HTML的结构一般包括<head>标签和<body>标签
<head>和<body>这2个标记符分别表示网页的头部和正文。
- 头部中可包含页面的标题、关键词、描述说明等内容,它本身不作为内容来显示,但影响网页显示的效果。
- <body></body>当中是网页实际显示的内容,正文标记符又被称为实体标记。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
HTML编辑规范
- 文件拓展名默认使用htm或者html,便于操作系统或者程序辨认文件,而图片则基本上存为gif或jpg
- 浏览器默认忽视回车符,不过为了方便阅览,人们还是会习惯地在写完一段代码后进行回车
- 标记符号用尖括号括起来,带斜杠的元素表示该标记说明结束,大多数标记符必须成对使用,用以说明起始和结束。
- 必须使用半角而不是全角字符
- HTML注释<--注释内容-->的内容不给予显示。
HTML 基础
标题<h1>-<h6>
HTML 标题是通过 <h1>-<h6>标签来定义的.(h
是英文header
标题的缩写)
这里有六个标题元素标签 —— <h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
,每个元素代表文档中不同级别的内容:
<h1>
表示主标题( the main heading ),<h2>
表示二级子标题( subheadings ),<h3>
表示三级子标题( sub-subheadings ),<h4>
、<h5>
、<h6>
字体的大小依次递减。
实例
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
HTML 水平线<hr>
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
HTML 注释
注释: 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
<!-- 这是一个注释 -->
段落<p>
HTML 段落是通过标签<p>
来定义的,P
是英文paragraph
段落的缩写,经常被用来创建一个段落。
实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
HTML 换行<br>
<br>
标签定义为一个换行符,它可以理解为简单的输入一个空行
<br> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
链接<a>
HTML 链接是通过标签<a>
来定义的。既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
例:
<a href="http://www.w3cschool.cn">这是一个链接</a>
HTML 超链接(链接)
HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签 <a> 中使用了 href 属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时,链接显示为红色并带上下划线
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定来显示
HTML 空链接
HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。
临时加的空链接,主要为了能更好的看到最终的效果。
基本语法:
<a href="#">链接文字</a>
其中“ # ”表示空链接。
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。
示例:
<a href="https://www.w3cschool.cn/" target="">访问W3Cschool教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
提示:默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
图像<img>
HTML 图像是通过标签<img>
来定义的。使用img
元素来为你的网站添加图片,使用src
属性指向一个图片的具体地址。
举例如下:<img src="https://www.baidu.com/your-image.jpg" rel="external nofollow" >
请注意:
img
元素是自关闭元素,不需要结束标记。
示例:
<img src="logonew2.png" width="206" height="36">
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
<a href="https://www.baidu.com">这是一个链接使用了 href 属性</a>
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
属性参考
适用于大多数 HTML 元素的属性:
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |