HTML知识总结

最新推荐文章于 2024-06-22 23:29:57 发布

心丶本无意

最新推荐文章于 2024-06-22 23:29:57 发布

阅读量449

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_45338523/article/details/114597608

版权

HTML知识总结

一、HTML的定义
二、HTML的结构
1.基本结构
2.常用标签
3.HTML的常用元素
三、总结

一、HTML的定义

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

二、HTML的结构

1.基本结构

结构如下（示例）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

HTML的编写离不开标签，HTML元素由开始标签和结束标签组成。如<p>/<p>,<h1><h1/>。

2.常用标签

标签	作用
`<font>`	字体标签，用于展示效果中修饰文字样式
`<br/>`	HTML源码中换行，浏览器解析时会自动忽略
`<p></p>`	段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
`<h1></h1>`	标题标签，用于展示效果中划分标题
` `	空格符号，用于展示效果中显示一个空白的位置
`<img/>`	用于在页面效果中展示一张图片
`<ul></ul>`	无序列表标签，用于在效果中定义一个无序列表
`<ul></ul>`	无序列表标签，用于在效果中定义一个无序列表
`<li></li>`	列表条目项标签，用于在效果中定义一个列表的条目
`<ol></ol>`	有序列表标签，用于在效果中定义一个有序列表
`<a></a>`	超链接标签，用于在效果中定义一个可以点击跳转的链接
`<table></table>`	表格标签，用于在效果中定义一个表格
`<tr></tr>`	表格的行标签，用于在效果中定义一个表格行
`<td></td>`	表格的单元格标签，用于在效果中定义一个表格行中的单元格
`<th></th>`	表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
`<span></span>`	行级的块标签，用于在效果中一行上定义一个块，进行内容显示。

3.HTML的常用元素

1.换行符`<br/>`

当文字写满一行，需要换行。或者根据需要，在文本中换行，这都是可以的。如下例子：

<body>
     我要换行<br />换行后
 </body>

2.段落 `<p></p>`

在写文章时，我们可以用p标签来定义一个段落。如下定义了两个段落：

<p>

UTF-8。UTF-8就是在互联网上使用最广的一种unicode的实现方式。

</p>

<p>

GBK编码，包括了GB2312中的编码，同时扩充了许多，通行于大陆。

</p>

3.标题`<h1></h1>`

<h1>标题1</h1>             

<h2>标题2</h2>

4.文本格式化

<b>定义粗体文本</b><br />

         <i> 定义斜体文本 </i><br />

         <del>定义删除文本</del><br />

         <sup>定义上标字</sup><br />

         <sub>定义下标字</sub><br />

5.定义超链接 `<a href=“网址或地址”></a>`

语法：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>

a标签用来定义一条超链接，其中要有的是href属性，href的作用是指明超链接要链接到的网址。除了href属性，还有title属性表示链接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页)，_top（当前页）。

6.锚点

有时我们在浏览网页时会发现，有些网页比较人性化，会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。

<a href="#位置名"> </a>

<a name="位置名"> </a>

7.图像`<img />`

属性	属性值	说明
src	url	图像资源的地址
width	像素（px）	图像宽度
height	像素（px）	图像高度
alt	替代文字	图片的替代文字

如下：
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

8.列表

（1）无序列表
Html中列表也是常用的元素。无序列表用<ul><li></li></ul>表示。
说明：

属性：type

<ul type="disc">
         <li>苹果</li>
         <li>香蕉</li>
         <li>雪梨</li>
 </ul>

disc 　　实心原点

circle　　　符号为空心圆

square　　符号为方形
(2)有序列表
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。

 <ol type="1" start="2">

         <li>苹果</li>

         <li>香蕉</li>

         <li>雪梨</li>

         </ol>

         <ol type="a">

         <li>苹果</li>

         <li>香蕉</li>

         <li>雪梨</li>

         </ol>

         <ol type="A">

         <li>苹果</li>

         <li>香蕉</li>

         <li>雪梨</li>

         </ol>

在这里插入图片描述

(3)定义列表
定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。

<dl>

<dt>爱好</dt>

<dd>听歌</dd>

<dt>爱好</dt>

<dd>跑步 </dd>

<dd>唱歌 </dd>

</dl>

在这里插入图片描述

9.HTML实体字符

在html中，有些特殊字符是需要用html语言表示出来的。一个字符实体包含三个部分：一个&符，一个实体名或者一个实体号，最后一个分号（；）。如下表格所示：
*实体名是大小写敏感的。

实体字符	字符实体
大于号 (>)	`>`
小于号 (<)	`<`
引号 (")	`"`
注册商标(®)	`®`
版权	`©`

10.表格

表格由<table>标签以及一个或多个 tr、th或td 元素组成。
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
基本结构：

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在这里插入图片描述
说明：

html有10个表格相关的标签。
在这里插入图片描述

11.表单

html中表单的作用是很强大的。我们生活中经常要用到表单，如一些基本信息的填写。在网页中也是如此，我们免不了注册一些账号，此时用到的表单就比较多了。

表单主要负责获取用户填写的数据，并通过浏览器向服务器传送数据。

表单使用标签（<form>）定义。

表单的基本结构：

<form name="form1" action="URL" method="get|post" target="文档显示方式">
   用户名：<input type="text" name="uname" />
   密 码：<input type="password" name="passwd" />
</form>