HTML 常用标签

最新推荐文章于 2023-05-07 23:36:37 发布

龙龙老表

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量204

点赞数 1

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_32466937/article/details/106324743

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML 注释

养成写注释的习惯是一个优秀程序员的基本素养

<!--这是一段注释。注释不会在浏览器中显示。-->

<!DOCTYPE>

< !DOCTYPE> 声明必须是 HTML 文档的第一行，位于 < html> 标签之前。< !DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

在 HTML 4.01 中有三种常用的文档声明

<!-- HTML 4.01 Strict 严格型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional 过渡型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<!-- HTML 4.01 Frameset 框架型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Frameset.dtd">

在 HTML5 中只有一种

<!DOCTYPE html>

各个版本之间对标签的支持程度,更详细的可查看 https://www.w3school.com.cn/tags/html_ref_dtd.asp

<html> 限定了文档的开始点和结束点

<!DOCTYPE html>
<html></html>

<head> 定义文档的头部

文档的头部描述了文档的各种属性和信息，主要是一些配置内容。

<!DOCTYPE html>
<html>
  <head> </head>
</html>

<body> 定义文档的主体

也就是我们具体的网页标签部分

<!DOCTYPE html>
<html>
  <head> </head>
  <body></body>
</html>

<a> 超链接

可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

<!-- href 包含超链接指向的 URL -->
<a href="http://www.baidu.com">连接到百度</a>

<!-- download 定义文件下载 -->
<a href="CSSOM树.png" download="重命名">文件下载</a>

<!-- target 该属性指定在何处显示链接的资源 -->
<a href="http://www.baidu.com" target="_self">当前页面加载</a>

<a href="http://www.baidu.com" target="_blank"> 新窗口打开</a>

<!-- 锚点连接 连接到本页面的指定区域 -->
<a href="#属性">
  连接到 id=“属性” 的标签处
</a>

<img>

<!-- 常规用法 -->
<img src="图片地址" alt="找不到图片时，显示的文字" />

<!-- 图片尺寸 -->
<img
  src="图片地址"
  alt="找不到图片时，显示的文字"
  width="100px"
  height="100px"
/>

<!-- 特殊用法 -->

<!-- ismap 会将点击图片的坐标以 url 参数的形式发送给服务器 -->
<a href="http://127.0.0.1:3002">
  <img src="timg.gif" ismap />
</a>

<!-- usemap 点击图片中某个区域，将会跳转到指定路由 -->

<img src="eg_planets.jpg" usemap="#plmap" />

<map id="plmap" name="plmap">
  <area
    shape="circle"
    coords="105,165,90"
    href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3/24010?fr=aladdin"
    target="_blank"
    alt="太阳"
    title="太阳"
  />
  <area
    shape="circle"
    coords="250,110,12"
    href="https://baike.baidu.com/item/%E6%B0%B4%E6%98%9F/135917"
    target="_blank"
    alt="水星"
    title="水星"
  />
  <area
    shape="circle"
    coords="345,105,23"
    href="https://baike.baidu.com/item/%E9%87%91%E6%98%9F/19410"
    target="_blank"
    alt="金星"
    title="金星"
  />
  <area
    shape="circle"
    coords="372,50,23"
    href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431"
    target="_blank"
    alt="地球"
    title="地球"
  />

  <area
    shape="rect"
    coords="0,0,409,270"
    href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"
    target="_blank"
    alt="太阳系"
    title="太阳系"
  />
</map>

<table>

HTML 表格

<!-- 用法一 -->
<!-- border 定义表格外框线的粗细 -->
<!-- cellpadding 定义单元格的内边距 -->
<!-- cellspacing 定义单元格之间的空白 -->
<!-- width 定义表格的宽度 -->
<!-- height 定义表格的高度 -->

<table
  border="1px"
  cellpadding="5px"
  cellspacing="0px"
  width="200px"
  height="200px"
>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>19</td>
  </tr>
</table>

<form>

<form> 标签用于为用户输入创建 HTML 表单,form 元素是块级元素，其前后会产生折行

<!DOCTYPE html>
<html>
  <body>
    <!-- action 指定表单的提交地址（这里一般会给你接口） -->
    <!-- method 指定表单发送数据的http方法（比如 GET、POST） -->
    <!-- enctype 规定在发送表单数据之前如何对其进行编码
      （application/x-www-form-urlencoded  表示在发送数据之前对所有的表单数据进行编码，空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值，默认 ） 
      （multipart/form-data   在包含文件的时候，必须使用该值）
      （text/plain   空格转换为 "+" 加号，但不对特殊字符编码）
    -->
    <form action="" method="" enctype=""></form>
  </body>
</html>

<input>

<input> 标签用于接收用户的输入信息。

规则描述
required 必填项
autocomplete=“off” 定是否使用输入字段的自动完成功能
maxlength=“5” 规定输入字段中的字符的最大长度
placeholder=“提示” 规定帮助用户填写输入字段的提示
readonly 规定输入字段为只读
disabled 禁用此元素

规则	描述
required	必填项
autocomplete=“off”	定是否使用输入字段的自动完成功能
maxlength=“5”	规定输入字段中的字符的最大长度
placeholder=“提示”	规定帮助用户填写输入字段的提示
readonly	规定输入字段为只读
disabled	禁用此元素

<!DOCTYPE html>
<html>
  <body>
    <!--autocomplete  信息录入提示，当然这是根据你之前的录入信息而定的,
      下面的代码当输入框获取到焦点时，会出现信息提示，默认时开启的-->
    <input name="username" id="username" />
    <!-- 现在不会出现信息提示了 -->
    <input autocomplete="off" />

    <!--autofocus 定义自动获取焦点-->
    <input autofocus />

    <!--disabled 禁用此元素-->
    <input disabled />

    <!--height，width-->
    <input height="50px" width="200px" />

    <!--type 	规定 input 元素的值-->
    <!--
      button    按钮
      checkbox  复选框
      file      选择文件
      password  显示密码框
      radio     单选框（有个要求是 name 值一样的 radio 才是单选框）
        <input name="xxx" type="radio" value="01" />
        <input name="xxx" type="radio" value="02"/>
      reset     重置按钮
      submit    提交按钮
      text      普通的文本框（默认）
    -->
    <input type="text" />
  </body>
</html>

<select>

下拉选框

<select>
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

<footer> 定义文档或节的页脚

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等

<footer>
  <!-- 其实显示的效果跟直接放 div 是一样的，只不过具备语义化 -->
</footer>

定义文档或文章的作者/拥有者的联系信息。
元素通常连同其他信息被包含在 < footer> 元素中

<address>
  <!-- 其实显示的效果跟直接放 div 是一样的，只不过具备语义化 -->
</address>

<article>

文章的详情页比较适合

<article>
  <!-- 其实显示的效果跟直接放 div 是一样的，只不过具备语义化 -->
</article>

<aside>

可用作文章的侧栏

<aside>
  <!-- 其实显示的效果跟直接放 div 是一样的，只不过具备语义化 -->
</aside>

<blockquote> 等价于自动加上了外边距

<!DOCTYPE html>
<html>
  <body>
    哈哈哈啊哈
    <blockquote>
      你好，世界
    </blockquote>
    哈哈哈啊哈
  </body>
</html>

<header>

定义文档的页眉

<label> 标记

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<!-- 现在你点击 “姓名：” 这几个字试试 -->
<label for="name">姓名：</label> <input id="name" type="text" />

<nav>

定义导航链接的部分

<span>

行内元素，无法给它设置宽高，它的宽高由其内容多少和行高而定

<div>

块级元素，每一个块级元素都会独占一个横排

龙龙老表

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 常用标签

HTML 注释养成写注释的习惯是一个优秀程序员的基本素养<!DOCTYPE>< !DOCTYPE> 声明必须是 HTML 文档的第一行，位于 < html> 标签之前。< !DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令在 HTML 4.01 中有三种常用的文档声明<!-- HTML 4.01 St
复制链接

扫一扫

专栏目录