5-2 HTML与HTML5常用标签

最新推荐文章于 2022-12-16 19:19:31 发布

Pikachu_x

最新推荐文章于 2022-12-16 19:19:31 发布

阅读量368

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43072239/article/details/109210557

版权

HTML与HTML5

1.HTML简介

1.1 HTML是什么？

HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是 超⽂本标记语⾔
HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔
超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成
⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm
html⽂档也叫 Web⻚⾯，其实就是⼀个⽹⻚，html⽂件⽤编辑器打开显示的是⽂本，可以⽤⽂本的⽅式编辑它
如果⽤浏览器打开，浏览器会按照标签描述内容将⽂件渲染成⽹⻚，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚

1.2 HTML的版本发展历史：

在这里插入图片描述

1.3 HTML文档类型的设定

HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值。
- (1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- (2) XHTML ，其基本结构如下：
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- (3) HTML5 ，其基本格式如下:
  <!doctype html>

2.HTML基础语法

2.1 HTML基本结构

HTML⽂件的扩展名为 .html 或者 .htm
HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容
HTML是由：标签和内容构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 … 标签包裹
HTML标签（标记）的语法是由 < 和 > 括起来
HTML标签有两种：双标签： <标签名>…</标签名> 和单标签： <标签名 />
HTML标签中还可以添加属性： <标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>
HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果。

2.2 HTML注释

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

<!-- 这就是唯⼀的⼀种HTML注释了 -->

2.3 HTML中HEAD头部设置

head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置
在head中常包含如下⼦标签：

3. HTML文本标签

常见文本标签如下:

<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独⽴⾏）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引⽤）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

在这里插入图片描述

运行结果
在这里插入图片描述

4. HTML格式化标签

4.1 常见格式：

	<br/> 换⾏
	<p>...</p> 换段
	<hr /> ⽔平分割线
列表：
	<ul>...</ul> ⽆序列表（列表前的小黑圆心样式也可以更改，利用type属性进行更改）
	<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值（列表前的编号是可以更改的，利用type属性可以更改）
	<li>...</li> 列表项
	<dl>...</dl> ⾃定义列表
	<dt>...</dt> ⾃定义列表头
	<dd>...</dd> ⾃定义列表内容
	<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化
	<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。

5. HTML图像标签

5.1 常用属性

在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />
其中img标签中常⽤属性如下：
	src： 图⽚名及url地址
	alt: 图⽚加载失败时的提示信息
	title：⽂字提示属性
	width：图⽚宽度
	height：图⽚⾼度
	border：边框线粗细

5.2 理解绝对路径和相对路径

绝对路径：绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)例如：C:\xyz\test.txt
相对路径：
相对与某个基准⽬录的路径。例如：在Web开发中：
"/"代表Web应⽤的根⽬录
“./” 代表当前⽬录

6. HTML超链接标签

超级链接标签a：

格式： <a href="链接⽬标url地址">显示⽂字</a>
a标签的属性：
href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）

锚点链接：

定义⼀个锚点： <a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
使⽤锚点： <a href="#a1">跳到a1处</a>

实例：
在这里插入图片描述

7. HTML表格标签

表格中的标签：

在这里插入图片描述

cellspacing 是指外边距
cellpadding 是指内边距
colspan 是指跨列操作
rowspan 是指跨行操作
align 是指水平位置
valign 是指垂直位置

实例：
在这里插入图片描述

8. HTML表单标签

1) <font></font> 表单标签

form标签常⽤属性：

action属性:提交的⽬标地址(URL【*】
method属性:提交⽅式:get(默认)和post【*】
- get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
- post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。