• html的常用标签


    标签:又称为标记

    • 双闭合标签
      • 示例:<html></html>
    • 单闭合标签
      • 示例:<meta charset="UTF-8">

    一、head标签

    1. title标签:显示网站的标题
    2. meta标签:提供有关页面的元信息
    3. style标签:定义内部样式表
    4. link标签:链接css资源文件、网站图标
    5. script标签:链接脚本js文件

    二、 body标签

    2.1 标题标签

    1. h1~h6标题标签
    2. 示例:<h1>标题</h1>

    2.2 段落标签

    1. 又称p标签,每个段落都要用p标签包裹
    2. 示例:<p>段落内容</p>

    2.3 超链接标签

    1. 又称a标签

    2. 示例:<a href = "网址">内容</a>

    3. a属性:

      • href:链接新网址,回到顶部,跳转邮箱,下载文件
      • title:鼠标悬浮上的标题
      • style:行内样式
      • target:目标
        • _self:默认值,在当前页面中打开新的链接
        • _blank:在新的空白页面打开新的链接
    4. 如何清除a标签的下划线?

      text-decoration: none;
      
      none;无线
      underline:下划线
      overline:上划线
      line-through:删除线
      

    2.4 图片标签

    1. 又称img标签
    2. 示例:<img src = "图片地址" alt = "图片加载失败时显示的内容">
    3. img属性:
      • src:图片的资源地址
      • alt:图片加载失败时显示的标题
      • title:鼠标悬浮时显示的标题
      • width:设置图片的宽度
      • height:设置图片的高度

    2.5 字体标签

    1. 标题标签:h1~h6
    2. 粗体标签:<b><strong>
    3. 斜体标签:<i><em>
    4. 上标:<sup>
    5. 下标:<sub>

    2.6 列表标签

    1. 无序列表:<ul>,无序列表中的每一项是<li>
      • ul:unordered list
      • li:list item(列表项)
      • ul属性:type
        • disc:实心圆点,默认
        • square:实心方点
        • circle:空心圆
      • 设置为无序号:list-style:none;
    2. 有序列表:<ol>,里面的每一项是<li>
      • ol:ordered list
      • ol属性:type
        • 1:阿拉伯数字,默认
        • i
        • I

    2.7 表格标签

    1. 又称table标签

    2. 表格:<table>,表头:<th>,行:<tr>,列:<td>

    3. table属性:

      • border:边框
      • cellspacing:单元格和单元格之间的距离(外边距)
      • bordercolor:表格的边框颜色
    4. 简单示例:

      <table border='1' cellspacing=0>
      	<th>
      		<td>id</td>
      		<td>name</td>
      	</th>
      	<tr>
      		<td>1</td>
      		<td>mjj</td>
      	</tr>
      </table>
      

    2.8 表单标签

    1. 又称from标签
    2. from属性:
      • action:定义表单被提交时发生的动作,提交给服务器处理程序的地址
      • method:表单数据的提交方式,默认get,还有post
        • get:明文提交,不安全,只能提交2kb信息,提交的内容会在地址上显示
        • post:密文提交,安全,可以提交大量信息
      • enctype:表单数据的编码方式(加密方式),只能在post方式下使用
    3. 输入标签(文本框):<input>
      • input属性:
        • type:控件的类型
          • text:单行文本输入框
          • password:密码框
          • radio:单选框
            • 产生互斥效果:给每个单选按钮设置相同的name属性值
            • 默认选中:给单选按钮添加checked属性
          • checkbox:多选框
            • 默认选中:添加checked属性
          • submit:提交按钮
          • file:上传文件
          • datetime-local:时间
        • name:控件的名称,提交到当前服务器的名称
        • value:控件的值,提交到当前服务器的值
    4. label标签:<label>,可以设置和input有绑定关系
      • 设置方式:input元素要有一个id,然后label标签有一个for属性,和id相同,那么label和input就有绑定关系了
    5. 下拉列表标签:<select>,里面的每一项用
    6. 多行文本输入框:<textarea>
      • textarea属性:
        • cols:指定文本区域的列数
        • rows:指定文本区域的行数

    2.9 盒子标签

    1. div标签:<div>,division,分割

      • 定义:把网页分割成不同的独立的逻辑区域,必须独占一行
      • div属性:
        • align:设置区域的位置,可选left,right,center
    2. span标签:<span>

      • 定义:小区域标签,在不影响文本正常的情况下,单独设置对应的样式
      • span和div的唯一区别:span是不换行的,div是换行的
      <style>
          span.active{
              font-weight:bold;
          }
      </style>
      <p>
          <span class='active'>央视网消息</span>
      </p>
      
  • 相关阅读:
    Vue 入门. 如何在HTML代码里面快速使用Vue
    CSS3 神器总结
    《JavaScript高级程序设计(第3版)》阅读总结记录第二章之在HTML中使用JavaScript
    《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
    简单轮播的实现
    怎么作好一个领导者?什么是团队?怎么当好一个组员?
    谈BFC和haslayout
    JavaScript 数组
    ubuntu配置android开发环境和编译源码遇到的一些问题
    C语言文件操作函数大全
  • 原文地址:https://www.cnblogs.com/zengyi1995/p/11005636.html
Copyright © 2020-2023  润新知