2010年南非世界杯_韩国世界杯 - sopeiyin.com

2025-05-14 14:51:55

html常用元素总结

中国2002世界杯
[an error occurred while processing the directive]

一.HTML的基本结构

一个最基本的HTML文件需要包括以下代码块中的内容:

1.：

该行与最后一行的构成一对标签；

它始终放在文档的第一行；

该行中的!DOCTYPE用来告诉浏览器应该用什么样的html规范还解释该html文件，!DOCTYPE表示用标准的W3C标准来解释

2.：

该标签中主要有标签和（下文中详细解释）

中的标签不在浏览器页面显示，主要是一些声明性的内容

3.:

该标签内的内容均为显示在浏览器页面中的内容

Title

二.中的标签解释：

如代码块所示：

1.:

第一句解释本html的编码格式是UTF-8第二句解释了本页面的关键词，content的内容就是关键字，比如我们在百度搜索关键字时，搜索结果就是根据这条展示的；第三句表示每三秒页面刷新跳转到URL标识的页面

2.，<link></p> <p>第四句和第五句分别表示浏览器顶层表示该页面的标题和图标，如下图所示的【写文章-CSDN博客】和红底白字的大写C：</p> <p><meta charset="UTF-8"></p> <p><meta name="keywords" content="江苏 江苏省 苏 江苏行政区划 江苏地理环境 江苏自然资源 江苏人口民族 江苏政治 江苏经济 江苏社会事业 江苏交通 江苏民俗文化 江苏风景名胜 江苏名优特产 江苏著名人物 已有14个省市开启高考改革！未来高考将有哪些新趋势？"></p> <p><meta http-equiv="Refresh" content="3;URL=https://www.baidu.com"></p> <p><title>Title

三.中的标签解释：

body中的标签主要分为【块级标签】和【内联标签】，两者可以通过display属性进行转换

块级标签：一个标签占一行的内容，下一个标签需要另起一行；块级标签可以更改长宽

内联标签：一个标签是多大就占多大位置，下一个标签在右侧补上；内联标签不可以更改长宽

内联标签转换为块级标签：display=block

块级标签转换为内联标签：display=inline

块级标签转换为内联标签以后还可以更改长宽：display=inline-block

3.1基本标签

:其中n的范围为1~6，用来表示标题，1~6表示字体从大到小


:换行

:该行的内容会基于上一个标签另起一行，同时上下有一倍行距

,：两者都是加粗

：字体为斜体

:上角标

:下角标

:水平线

:显示图片，属性有src=文件路径；height；width；title等

:具有超链接和类似目录的功能

超链接：点击【点我】后，页面会跳转到前面url的页面

点我

类似目录功能：点击【目录】后，页面就会跳转到当前页中id为“target”标签的位置。注意，这里只能用id属性，并且标签中id号前需要用#标识。

目录

...

...

...

页面跳转位置

3.2列表标签

    :无序列表

    • 第一项

    • 第二项

    • 第三项

      :有序列表，每一项前有编号

      1. 第一项

      2. 第二项

      3. 第三项

      :自定义列表，其中
      表示列表标题；
      表示列表项

      列表标题

      第一项

      第二项

      列表标题2

      第一项

      第二项

      3.3表格标签

      标签内由两部分标签组成和，这两个标签分别表示表头和表体，在表头和表体中主要由和表示某一行的内容，
      两个标签组成，
      表示某一列的内容。有以下几个属性：border表示表格边框粗细；cellpadding表示表格内边距；cellspacing表示表格外边距；width表示表格宽度。

      表头第二列 表头第二列
      1 2
      3 4

      合并单元格

      可以使用

      		的colspan和rowspan属性；colspan表示合并一行的单元格，属性值为待合并列数；rowspan同理，举例如下：

      表头第二列 表头第二列
      1,2
      3 4

      3.4表单标签

      表单标签与上述标签不同，表单标签的功能是向服务器传输客户端的数据，比如登录界面上的用户名密码输入框就是一个表单元素，表单元素的内容是需要传输给服务器的。

      1.的属性值有：

      action：表示数据传输给服务端的哪个函数进行处理，通常是一个url路径；

      method:表示数据的提交方式是post还是get；get提交的数据键值对直接放在地址栏url后面，数据明文传输，安全性较差，对提交的数据内容有长度限制，适合用于【查找且无需加密传输】的场景，相比post少去了一些加密运算等消耗；post提交的数据键值对不放在地址栏后，安全性较高，对数据传输的内容长度无限制。

      表单元素：

      表单内的标签称为表单元素。

      2.标签：

      属性：

      1.type属性:

      "text":文本框,"password"：密码框，输入密码时隐藏密码明文,"submit"：提交按钮，点击后当前表单的元素内容会传给form中属性action指定的服务器函数进行处理,"button"：按钮，一般与js配合使用，用来触发一个事件,"radio"：单选框,"checkbox"：复选框,"file"：上传文件，前提是需要在form标签后添加属性：enctype="multipart/form-data"

      2.name属性：

      表单提交时，该标签传入值得键值；也就是传入服务端得数据的变量名，需要与后端变量名统一使用。举例如下：

      用户名

      当我们在文本框输入abc，并点击提交时，username='abc'的键值对将会传输给服务端。

      3.value属性：

      当type="button"/"reset"/"submit"时，value表示按钮上显示的文本当type="text"/"password"/"hidden"时，value表示输入字段的默认值当type="checkbox"/"radio"/"image"时，value表示与输入相关联的值，比如单选框radio，选择【男】/【女】时，我们与服务端协商好，选择男时用1表示，选择女时用2表示，那么这里的1和2就是value。

      4.id属性：

      id属性与后端无交互，一个页面中一个标签的id值是唯一的，主要为了方便css或js定位到该标签。

      3.

      4.