html标签

2023-10-10  本文已影响0人  渚清与沙白

基础

1 工具:vscode + chorme
2 vscode插件:Chinese中文简体、open in browser
3 ctrl + / 添加删除注释
4 当前文件所在的文件夹:.
5 进入当前文件所在的文件夹:./
6 当前文件所在父级文件夹:..
7进入当前文件所在父级文件夹:../

标签

  1. 标题标签:h1 ~ h6
    独占一行
    h1 一个网页只用一次,用来放新闻标题或网页logo

  2. 段落标签:p
    独占一行,段落之间存在间隙

  3. 换行:<br> 单标签

  4. 水平线:<hr>单标签

  5. 文本格式化标签:
    不会换行、突出重点,如加粗、倾斜、下划线、删除线
    加粗:strong / b
    倾斜:em / i
    下划线:ins / u
    删除线: del / s
    strong、em、ins、del标签自带强调含义

  6. 图像标签:<img> 单标签
    不换行
    属性:src、alt、width、height、title
    alt:图片不显示就显示alt的文本值
    title: 鼠标悬停显示的文本

  7. 超链接标签:a
    属性:href、target
    target=“_blank” 打开一个新页面

  8. 音频:audio
    属性:src、controls、loop、autoplay

  9. 视频:video
    属性:src、controls、loop、autoplay、muted

  10. 列表:无序列表、有序列表、定义列表
    无序列表:ul li
    有序列表:ol li
    定义列表:dl dt dd dt和dd标签可以嵌套其他标签

  11. 表格标签:table tr th td
    行:tr
    表头单元格:th
    内容单元格:td
    表格默认没有边框,需要为table设置border属性

  12. 表格结构标签:
    表格头部:thead
    表格主体:tbody
    表格底部:tfoot
    合并单元格
    保留最左最上
    跨行合并:rowspan
    跨列合并:colspan
    删除其他单元格

  13. 无语义的布局标签:div span
    划分区域
    div: 独占一行、大盒子
    span:不换行、小盒子

  14. 字符实体:
    <: &lt;
    >: &gt;
    空格: &nbsp;

表单
  1. 表单标签:form
    属性:action
  2. input标签:input
    属性:type
    type: text、password、radio、checkbox、file
    type属性
    text: placeholder
    radio: name、checked
    file: multiple
  3. 下拉菜单: select option
    option属性:selected、value
  4. 文本域:textarea
    属性:cols 、 rows
  5. label标签:label
    属性:for
    增大点击范围: 1 for属性值与input的id属性值保持一致
    2 label标签直接作为input和文本的父级
  6. 按钮:button
    属性:type
    type: submit、reset、button
上一篇 下一篇

猜你喜欢

热点阅读