首页 > > 网页制作 > css >

HTML标签笔记

2019-01-10 07:49:18来源：博客园阅读 ()

换行符：<br/>
首部:
<!DOCTYPE>: 说明html文档使用的标准, 在HTML5中仅为 <!DOCTYPE html>
1、头标签

<head></head>：在head里使用的标签为头标签
- <title></title>:在标签上显示的内容　　
- <meta>:设置页面的一些相关内容　　
  - 实现页面定时跳转：<meta http-equiv="refresh" content="秒数;url=路径" />　　　　
- <base />:设置超链接的一些内容　　
- <link />:引入外部文件　　
  - 属性：　　　　
    - rel:当前文档与被链接文档之间的关系　　　　　　
    - type：被链接文档的 MIME 类型　　　　　　
    - href：文件路径　　　　　　
  - 引入css文件:<link rel="stylesheet" type="text/css" href="文件路径" />　　　　
- <style></style>:定义样式信息，与css文件相同

2、文字标签和注释标签

文字标签：修改文字样式
- <font></font>　　
- 属性：　　
  - size:文字的大小，取值范围1-7，超出7，默认是7　　　　
  - color:文字颜色　　　　
    - 两种表示方式：　　　　　　
      - 英文单词：red green ......　　　　　　　　
      - 使用十六进制数表示 #ffffff　　　　　　　　
- <b></b>:加粗　　
- <s></s>:删除线　　
- <u></u>:下划线　　
- <i></i>:斜体　　
- <pre></pre>:原样输出　　
- <sub></sub>:上角标　　
- <sup></sup>:下角标　　
- <p></p>:段落标签，比br标签多一行　　
注释标签
-

3、标题标签、水平线标签和特殊字符

标题标签
- <h1></h1> <h2></h2> ......<h6></h6>　　
- 从h1到h6，大小依次变小，同时自动换行　　
水平线标签
- <hr/>　　
- 属性：　　
  - size:水平线的粗细，取值范围1-7　　　　
  - color:颜色　　　　
特殊字符
- < <　　
- > >　　
- 空格  　　
- & &

4、列表标签

<dl> </dl>:表示列表的范围
- 在dl里面 <dt> </dt>:上层内容　　
- 在dl里面 <dd> </dd>:下层内容　　
<ol> </ol>:有序列表的范围
- 属性：type 设置排序方式 1 a i　　
- 在ol里面 <li> 具体内容 </li>　　
<ul> </ul>:无序列表的范围
- 属性：type 空心圆 circle 实心圆 disc 实心方块 square 默认 disc　　
- 在ul里面 <li> </li>

5、图像标签

<figure>
- 一般用于图片的布局　　
<img />
- 属性：　　
  - src：图片路径　　　　
  - width：图片宽度　　　　
  - height：图片高度　　　　
  - title: 当鼠标放上去时显示的文字　　　　
  - alt：图片读取异常时显示文字（图片上显示文字（兼容性差））

6、超链接标签

链接资源
- <a> </a>　　
  - 属性：　　　　
    - href:链接的资源地址　　　　　　
    - target：设置打开方式　　　　　　
      - _blank: 在新窗口打开　　　　　　　　
      - _self: 在当前页打开(默认)　　　　　　　　
      - framesetName: 在指定名称的框架中打开　　　　　　　　
定位资源
- 定义位置　　
  - <a> </a>　　　　
    - 属性：　　　　　　
      - name: 位置名称，定义一个位置　　　　　　　　
      - href: 定位到指定名称的位置处( this.html#name)

7、表格标签

<table> </table>: 表示表格的范围
- <thead>和<tbody> 定义表格的标题与主题,标识作用　　
- 在table里面 <caption> </caption>:设置标题　　
- 在table里面 <tr> </tr>:表示行　　
  - 在tr里面 <td> </td>:表示列　　　　
  - 在tr里面 <th> </th>:相当于td的基础上做了居中和加粗的操作　　　　
- table属性：　　
  - border：设置表格边框的宽度　　　　
  - bordercolor：设置表格边框颜色　　　　
  - cellspacing：设置单元格之间的距离　　　　
  - width：表格宽　　　　
  - height：表格高　　　　
- tr属性：　　
  - align：设置显示方式居左(left),居中(center),居右(right)　　　　
- td属性：　　
  - align：设置显示方式居左(left),居中(center),居右(right)　　　　
  - rowspan：跨行的数量　　　　
  - colspan:跨列的数量

8、表单标签(注册)

<form> </form>: 定义一个表单的范围
- 属性：　　
  - action：数据提交地址，默认当前路径　　　　
  - method：表单提交方式，有get(默认) post　　　　
<input />:输入项
- input属性：　　
  - type：输入项的类型　　　　
    - text：普通输入项　　　　　　
    - number: 数字项　　　　　　
    - password：密码输入项　　　　　　
    - radio: 单选输入项　　　　　　
    - checkbox：复选输入项　　　　　　
    - file：文件输入项(为表单添加 enctype="multipart/form-data" 属性, 且method="post")　　　　　　
      - accept: 指定上传文件格式　　　　　　　　
    - hidden：隐藏项　　　　　　
    - submin：提交按钮　　　　　　
    - image：图片形式提交按钮，src指定路径　　　　　　
    - reset：重置按钮　　　　　　
    - button：普通按钮　　　　　　
    - placeholder: 提示信息(HTML5)　　　　　　
    - name：元素名称　　　　　　
    - value: 元素值　　　　　　
    - checked：预先选定复选框或单选按钮　　　　　　
    - readonly: 指定输入框为只读,不可编辑(布尔值)　　　　　　
    - disabled: 禁用输入(布尔值), 不可与 type 为 hidden 的同时出现　　　　　　
    - required: 该项必须填写　　　　　　
    - pattern: 指定正则表达式, 与该表达式匹配才可以提交　　　　　　
    - autofocus: 自动聚焦　　　　　　
    - maxlength: 限制最大输入长度　　　　　　
<label></label>: 绑定表单控件　　
- for: 控件id, 当点击其中文字时, 焦点到该控件上　　
<textarea> </textarea>:文本域　　
- textarea属性：　　
  - cols:列的数量　　　　
  - rows:行的数量　　　　
<select> </select>:下拉的输入项
- <option> </option>：选择列表　　
select 属性：
- name　　
option 属性：
- value：元素值　　
- selected: 预选值

9、框架标签

<frameset></frameset>:定义框架集
- 在frameset里面 <frame></frame>:frameset 中的一个特定的窗口　　
frameset属性：
- rows：按照行进行划分，*代表剩下所有(200px, *)　　
- cols：按照列进行划分，*代表剩下所有(200px, *)　　
<noscript></noscript>: 其中的内容只有在浏览器不支持js或禁用了js时执行

10、内容标签

无意义标签(用来布局):
- <div></div>:自动换行　　
- <span></span>:在一行显示　　
- <nav>: 导航块(HTML5)　　
- <header>: 头部(HTML5)　　
- <footer>: 在页面尾部显示(HTML5)　　
- <section>: 表示页面一个内容区块,如章节,页眉等(HTML5)　　
- <article>: 表示独立的内容,如文章等(HTML5)　　
- <aside>: 表示 article 的辅助信息(HTML5)　　
- <bgroup>: 页面中的标题(HTML5)