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>
posted @ 2019-06-11 19:51  林染  阅读(640)  评论(1)  编辑  收藏  举报