HTML的常用基础标签

xulei1998
312 阅读3分钟

1.HTML 诞生

HTML的英文全称是 Hypertext Marked Language，即超文本标记语言，目的是让用户在页面上看到更好看、更有层次的文字。HTML是由万维网的创造者Tim Berners-Lee于1990左右年创立的（WWW=URL+HTTP+HTML）

2.初识HTML

<!DOCTYPE html>            <!--文档类型-->
<html lang="zh-CN">        <!--语言设置为中文-->
<head>
  <meta charset="UTF-8">    <!--文件的字符编码-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!--告诉IE使用最新的内核-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--禁用缩放-->
  <title>Document</title>
</head>
<body>
  
</body>
</html>

3.标签的全局属性：所有标签都有的属性

  • class 最常用的属性
  • contenteditable 让用户可以直接编辑内容
  • hidden 隐藏标签
  • id 有唯一性 但尽量不用 因为window里有很多已经定义好的全局属性，不可以和这些属性同名。
  • style 优先级：JS > HTML的style标签 > CSS
  • tabindex 按tab键顺序访问
    • 正数，如tabindex=1 / 2/ 3/，表示按顺序访问
    • 0， 表示最后访问
    • -1， 表示不要用tab访问
  • title 当鼠标移动到省略的地方上时，可以浮动地显示完整内容

4.划分章节标签

  • 标题 h1~h6
  • 章节 section
  • 页头 header
  • 页脚 footer
  • 主要内容 main
  • 旁支内容 aside
  • 划分 div
  • 段落 p

5.内容标签

  • ol li 有序列表
  • ul li 无序列表
  • dl + dt 要描述的对象 + dd 要描述的内容
  • pre保留文字内部的多数空格、回车键；
  • code 书写代码
  • hr 水平分隔线
  • br 换行
  • em 字体斜体 语气上的强调
  • strong 字体加粗 内容本身很重要
  • quote 行内引用
  • blockquote 换行的引用

6. 超链接标签：a 标签

作用

  • 跳转到外部页面
  • 跳转到内部锚点
  • 跳转到邮箱或电话

href 属性

a链接的地址，取值可以为：

  1. 网址：

  2. 路径:

    • 绝对路径：/a/b/c
    • 相对路径：index.html和./index.html

  3. 伪协议:

    • javascript:希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：
    • mailto:邮箱
    • tel:手机号

  4. id: href=#id名，可以跳转到id名为Id的标签

target 属性

决定是在本页面还是新开一个页面打开链接，取值：

  • 系统内置的名字：
  • a_blank 打开新页面
  • a_self 在当前页面打开
  • a_top 顶部页面打开
  • a_parent 在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况

7. img 标签

作用：发出GET请求，展示一张图片

属性：

  • src: 图片地址
  • alt: 图片无法加载时会显示这个alt属性值的文字作为备用
  • width 如果只写宽度，高度会自适应，不能让图片变形
  • height 如果只写高度，宽度会自适应

事件：

  • onload 加载成功
  • onerror 加载失败

8. table 标签

完整的table标签包含的元素有：

  • thead

    • tr (table row) 一行

      • th (table head) 表头

  • tbody

    • tr (table row)

      • td (table data) 数据

  • tfoot

    • tr (table row)

      • td (table data) 数据

table的样式:

table {
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

9. form标签

作用：发GET或POST请求，然后刷新页面

属性：

  • action 指明哪个页面
  • method 指明请求方式是get还是post
  • autocomplete 是否自动填充
  • target 指定提交的是哪个页面

事件

onsubmit

以下是form标签内嵌套的标签

10. input标签

属性type的取值：

  • text：可输入文本框
  • password：密码框
  • radio：单选框，通过设置相同name实现单选
  • checkbox：复选框，通过设置相同name实现
  • file：添加文件
  • submit：提交
  • select：下拉框，选项为option

11. button标签：按钮

可以设置type=“submit”实现提交。

注意

<input type="submit" value="提交"/>与<button type="submit">提交</button>的区别：

  • button标签可以对按钮中的内容添加标签修饰，内容是可以嵌套其他标签的，而input不行。

  • 关闭标签设置。input 标签使用时是单个标签；而 button 标签必须使用< /button>来结束标签的使用。

  • 样式属性。input 标签不可以在标签内添加样式属性， button 可以添加。

  • 按钮名称。input 标签的按钮名称需要添加value属性来显示； button 标签则是将按钮名称写在起始标签和闭合标签中间。

  • button 标签可以在内部添加其他内容，如图片等多媒体内容

avatar
文章
阅读
粉丝