zenyangcode
zenyangcode

HTML 常用标签简介

HTML 常用标签

div 标签

div 标签用于组合其他 HTML 元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告

div标签可修改

你好


span 标签

span 标签是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。 与

元素很相似，但
是一个 块元素 而 则是 行内元素。

h1 ~ h6 标签

h1 ~ h6 用于设置文本字体大小

p 标签

p 标签表示文本的一个段落

这是第一个段落。这是第一个段落。
   这是第一个段落。这是第一个段落。


这是第二个段落。这是第二个段落。
   这是第二个段落。这是第二个段落。


strong 标签

strong 标签表示文本十分重要，一般用粗体显示。strong是一个逻辑状态，表示强调

b 标签

b 标签，一个物理状态，仅表示加粗。

ol 标签

ol 标签，用于有序列表

    
    
  1. li 列表项（list item）
    2. 
    
  2. li 列表项（list item）
    3.


ul 标签

ul 标签，用于无序列表

    
    
  • li 列表项（list item）
    • 
    
  • li 列表项（list item）
    •


dl dt dd 标签

dl 标签是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。


    
dt 字典标题（dictionary title）

    
dd 字典数据（dictionary data）
    

    
dt 字典标题（dictionary title）

    
dd 字典数据（dictionary data）


form 标签

form 标签表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。

form 标签也有 target 参数，逻辑跟 a 标签一样

form 标签 type 属性细节

没有写 type 属性，自动升级为提交按钮

写了类型，点了没用，说明 form 表单没有提交按钮

这也不能提交，只是个普通按钮

属性是 submit，可以提交

爱我

出现正方形的勾选框，只能点击勾选框有反应

点击爱我，就等于点击了勾选框

点击用户名或密码，光标就跳到对应的输入框内

这样写，不用 id 也跟上面同样效果


   
  
  喜欢的水果
  
  
  爱我

输入用户名密码勾选橘子香蕉，单选框选中 yes,选项默认第四组，选择第一组，
点击提交按钮，发送 get 请求，请求地址为：
localhost:8080/users?username=1&password=2&fruit=orange&fruit=banana&loveme=yes&group=1

select 有 multiple 属性，按住 Ctrl 键可以多选



button 标签

button 标签表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。


table 标签

table 标签表示表格数据 — 即通过二维数据表表示的信息。


  

    First name
    Last name
  

  

    John
    Doe
  

  

    Jane
    Doe
  





  
    

      班级姓名分数
    

  
  
    

      1小明93
    

  
  
    

      2小红90


textarea 标签

textarea 标签表示一个多行纯文本编辑控件。 用于多行文本输入。

用 style 控制文本框的大小或用 cols 或 rows 控制

img 标签

img 标签用于链接图片,alt 这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的，该图像不在 支持的格式 列表中，或者如果图像还没有被下载。

图片


canvas 标签

canvas 标签提供了一个空白绘图区域，可以使用 APIs （比如 Canvas 2D 或 WebGL）来绘制图形。


  您的浏览器不支援canvas元素（此信息在浏览器不支援canvas元素时显示）


a 标签

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

You can reach Michael at:

iframe 标签

iframe 标签是在当前网页嵌套一个目标网页


QQ
baidu

a 标签间的区别

QQ
// 在空页面打开

QQ
// 在自己页面打开，如果嵌套在iframe中，就在iframe中打开

QQ
// 在父节点页面打开

QQ
// 在祖先节点页面打开

下载
// 下载页面
// 不设置 download 属性，如果 http 的 
// Content-type: application/octet-stream 会以下载的方式接收请求

a 标签的 href 细节问题

QQ

会将 qq.com 当作文件处理，加到当前网址后面

QQ

当前文件是什么协议，就以什么协议打开。
若想以 http 协议打开，可以上传到 github 浏览方式打开，或启用本地的 nodejs server

npm i -g http-server
http-server -c -1 // 不用缓存启动本地nodejs server



QQ
// 跳转到/xxx.html ，根目录下的xxx.html

QQ
// 锚点，直接加到网址上，本页锚点定位，不会发请求

QQ
// 后缀直接加到网址上，发送一个带参数的 get 请求

QQ
// 伪协议,点击出现 alert 窗口

QQ
// 什么也不会做

QQ
// 发送一个 get 请求到自身网址，刷新页面




hi


hi


hi


hi


hi


hi


hi


hi


hi

QQ// 点击，页面动一下，跳到 p 标签位置



HTML 空元素

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， 的闭标签是无效的 HTML。
在 HTML 中有以下这些空元素：






 when the span is present


可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如