HTML知识总结

une'

已于 2023-01-04 17:36:35 修改

阅读量557

点赞数

文章标签： html

于 2022-05-11 21:10:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52467890/article/details/124717043

版权

一.HTML简介

html是超文本标记语言（HyperText Markup Language）的缩写,我们常见的网页就是由其构建的。它定义了网页内容的含义和结构。

二. 基础内容

1. HTML的基本结构

2.html的基本标签

（1）html标签

这个元素包裹了整个完整的页面，其它元素都嵌套到其中。

（2）head标签

这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

（3）body标签

代表页面的身，包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

（4）title标签

设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。title标签在head标签中。

(5）空元素（br换行标签）

空元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如 br, hr, input, img, a等等。
br: 换行操作
hr: 水平分割线
input: 输入框

img图形插入标签: 将图像嵌入文档

<img src="face1.gif" >
     <img src="face1.gif" width="80" height="80">

语法： img src=“文件路径”
src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

a: 控制界面与界面之间的跳转，即超链接。

超链接
我们可以把任何东西加上超链接，不过常用的是文本、图片等。
语法：a href="地址“ target="blank"显示内容
标签的 href 属性用于指定超链接目标的 URL。
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即self）
浏览器中未访问链接的默认样式和颜色为下划线和蓝色
浏览器中激活链接的默认颜色是红色
:link 表示未访问的超链接
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。超链接中的地址需要有#符号
(如果我们需要发送电子邮件，那么锚链接的 href 属性以mailto关键字开始)
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

（6) p分段标签

p标签用于标记一个段落

（7）h1标题标签

HTML 提供了从大到小6级标题，分别是：h1 ~ h6，一级标题h1最醒目，应该用于页面的主标题，其次为二级标题，以此类推

（8）font文字标签

文字的字体、大小和颜色标签：

<html>
   <head>   …   </head>
   <body>
      <font color=“#FF0000” size=“2”><b>粗体文字示例  </b></font>
       <br>
       <i>斜体文字示例</i> 
       <br> 
       <u>下划线文字示例</u>
   </body>
</html>

（9）网页背景颜色和音乐

背景颜色：

 <body background="background.jpg">
          这是html文档的主体部分，也就是网页的内容。
  </body>

背景音乐：

  <head>
     <title>嵌入背景音乐</title>
     <bgsound src="1.mid" loop=-1>
  </head>

（10）文本格式标签

mark:使用标记突出显示文本
del:表示该行文本已经被删除
s:表示该行文本已经不再准确
ins:表示该行文本应被视为对文档的补充
u：表示该行文本将按下划线呈现
small：表示该行文本应被视为细则
strong:表示该行呈现为粗体文本
em:表示该行呈现为斜体文本

3.表格

table,tr,td是html表格最基本的三个标签，除此外还有th标签，其中：
table：表示者一个表格的开始与结束
tr：标记一行的开始与结束
td：表示单元格的开始与结束
th：表头单元格

4.列表

用列表来呈现内容，列表分为无序列表和有序列表。

无序列表

无序列表使用 ul 标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
例如，使用实心方块作为每项标志
ul type=“square”

有序列表

有序列表使用 ol 标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

5.表单form

表单的标签共4个：input,select,textarea,option。

input

大部分表单都是使用input标签，只是type值不同

textarea

多行文本框
语法：textarea rows=“行数” cols=“列数” 文本框内容

select和option

下拉列表由select与option标签配合使用

6.其它

区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：h1, pre, ul, table，div等。
div:div 标签可以把文档分割为独立的、不同的部分，现在大多数页面都使用的 DIV+CSS 布局

内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： span, input, td, a, img等。

预设格式

如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

特殊字符

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）