HTML常用标记

一、基础篇

1. 基础示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文档标题</title>
  </head>
   
  <body>
    文档内容......
  </body>
 
</html>

2.基础结构

  • html文档分为文本+标记,通过显示标记语言对文本进行修饰,然后表达渲染后的文本内容
  • 一个网页由声明+head+body三部分组成
    • 声明文档使用HTML5语法
    • head 部分在页面中不显示
    • body 部分为显示在页面中的内容

二、常用标签

1. 文本标签

  • <hn>...</hn> n为1-6的数字。标记为标题,加粗独立行。
  • <i>...</i> 斜体
  • <em>...</em> 强调斜体
  • <b>...</b> 加粗
  • <strong>...</strong> 强调加粗,方便搜索引擎收录
  • <cite>...</cite> 作品标题(引用)
  • <sub>...</sub> 下标
  • <sup>...</sup> 上标
  • <del>...</del> 删除线

2. 格式化标签

  • <br/> 换行
  • <p>...</p> 换段
  • <hr/> 水平分割线
  • 列表
    • <ul>...</ul> 无序列表

    • <ol>...</ol> 有序列表,其中type的值:代表起始值。

    • <li>...</li> 列表项,在每一个列表中使用

    • <dl>...</dl> 自定义列表

    • <dt>...</dt> 自定义列表头

    • <dd>...</dd> 自定义列表内容,会缩进

  • <div>...</div> 常用于组合块元素(高度为0,宽度填满),通过CSS对这些元素进行格式化
  • <span>...</span> 常用于包含的文本(没有特殊效果),可以使用CSS对他进行格式化,或通过JavaScript对他进行操作

3. 图片标签

  • /HTML常用标记 在网页中插入一张图片
  • 属性:
    • src:图片引用地址,图片名及url地址。(可以使用相对地址,或者网络地址)
    • alt:图片加载失败时的提示信息
    • title:文字提示的属性。(把鼠标放在图片上时提示的文字)
    • width:图片宽度
    • height:图片高度(通常高度和宽度只使用一个,否则容易失真)
    • border:边框线粗细(颜色与字体颜色相同,通常不用)

4. 超级链接标签

  • <a href="">...</a> 网页中插入超级链接
  • 属性:
    • href:必填项,指链接跳转地址
    • target:表示链接的打开方式
      • _blank 新窗口
      • _parent 父窗口
      • _self 本窗口(默认)
      • _top *窗口
    • framename 窗口名
    • title:文字提示属性(详情)
  • 锚点链接:
    • <a id="a1"> 通过id来定义一个锚点,以前用name
    • <a href="#a1">跳转a1处<a> 也可以在#前加入其他页面链接

5. 表格标签

  • <table>...<\table> 表格标签

  • 属性:

    • border 表格线,0是没有
    • width 表格宽度
    • cellspacing 单元格之间的距离,默认是2,0时没有缝隙
    • cellpadding 单元格的字于四边保持的最小距离,默认是0
  • <capion>...</capion> 表格标题

  • <tr>...</tr> 行标签

  • <th>...</th> 列头标签

  • <td>...</td> 列标签

  • 属性:

    • rowapan 跨行
    • colspan 跨列
  • <thead>...</thead> 表头

  • <tbody>...</tbody> 表体

  • <tfoot>...</tfoot> 表尾

6. 表单标签**

  • <form>...</form> 表单标签
  • 属性:
    • action 目标地址,就是当提交表单时,提交到的地址。
    • method 发送方式,分为get(以明文的方式提交),post(以隐藏的方式提交)
  • <input/> 表单项标签,通过不同type创建不同表单项
  • 属性:
    • type 表单项类型
      • text 文本
      • password 密码
      • radio 单选
      • checkbox 复选
      • submit 提交
      • reset 重置
      • button 按钮,没有效果,可以添加事件
      • file 上传文件
      • image 图片
      • email 邮箱
      • number 下拉选择数字
      • url 网址
      • date 日历
      • color 颜色
    • name 变量名字,实现互相排斥需要相同的name
    • value 默认值
    • disabled 默认不能修改
    • checked 默认选中,针对单选和多选使用
    • min 最小值
    • max 最大值
    • maxlength 长度
  • <select> 文本选项
    • </option>...<option> 每一项使用此标记,selected为默认选此项
    • 对下拉框分组
  • <datalist>...</datalist> 可选的下拉列表
    • </option>...<option> 每一项使用此标记,selected为默认选此项
  • <textarea>...</textarea> 多行文本输入
  • <button>...</botton> 标签自定义按钮

7. 行内框架标签

  • <iframe>...</iframe> 在网页放另一个网页
  • 属性:
    • src:规定在iframe中显示的url
    • name:规定iframe的名称
    • height:高度
    • width:宽度
    • frameborder:是否显示边框

8. 多媒体标签

  • <audio>...<autio> 音频标签
  • 属性:
    • src:音频引用的地址
    • controls,是否显示控制
  • <video>...<video> 视频标签
  • 属性:
    • src:视频引用的地址
    • controls,是否显示控制
上一篇:03-Docker基本操作


下一篇:2018年递增三元组{巧解}