html基本标签及常用方法

发布于 2015-08-17 19:37 类别: tech

<head>区域

<title>标题

在<head>中，定义文档的标题，最终将显示在浏览器标题栏上。

<meta>

  • 定义页面元信息，主要包含了搜索信息。
  • META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)
  • HTTP-EQUIV 似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容 ,响应报头信息，如页面编码、缓存模式等等。
  • NAME 定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面。
  • Content-Type和Content-Language (显示字符集的设定) 。使用如下两行来解决html的乱码问题
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
<Meta http-equiv="Content-Language" Content="zh-CN">
  • name属性用于描述页面内容，主要是向搜索引擎提供查询关键字等
  • Keywords－关键字
<Meta name=“Keywords” Content="vacation,greece">
  • Description－简介
<Meta name="Description" Content="你网页的简述">
  • Author－作者
<Meta name="Author" Content="张三，abc@sina.com">
  • Copyright (版权)
<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">

<body>

<h1>到<h6>标题标签

标题标签是显示标题文字从h1到h6，从大到小的过程。SEO也按照标题标签的级别来选择信息，所以合理使用标题标签也能提高网页被爬取到的机率。

<strong>强调文本

Strong 标签用于强调文本，但它强调的程度更强一些。 浏览器通常会以加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。 使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的

<font>文本标签

Font标签规定文本的字体、字体尺寸、字体颜色（不建议使用） 字体尺寸 <font size=#> 文字</font> # =1，2，3，4，5，6 字体颜色 <font color=#> 文字 </font> # =“#rrggbb” * 16 进制数码，或者是下列预定义色彩Black, Olive, Teal, Red, Blue 字体 <font face="#, #, ..., #">..</font> #=客户端可获得的字体

<a>链接标签

HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接src路径来访问其他网页资源。 属性： href：规定链接指向的页面的 UR target:规定在何处打开链接文档

Alt text

  • _blank:浏览器总在一个新打开、未命名的窗口中载入目标文档
  • _parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
  • _self:这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base>标签中的 target 属性一起使用。
  • _top:这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

<P>段落标签

元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定 align居中显示 <b>加粗 <i>斜体

<br/>换行

呈现换行符效果 <br/>可插入一个简单的换行符。 <br/>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br/>。 * 请注意，<br/>标签只是简单地开始新的一行，而当浏览器遇到 <p>标签时，通常会在相邻的段落之间插入一些垂直的间距

列表标签

定义列表

  • <dl>：自定义列表
  • <dt>：自定义标题
  • <dd>：自定义内容

    dt在最左边 dd 也单独占一行但是有错位

ol有序列表

type属性默认值为1 表示从哪里开始自动排列

ul无序列表

type属性表示前面图案形状

内联元素 块级元素

div特点：高度可设，宽度可设，独立占用一行。 span特点：不可设置宽度高度，不能设置margin，长度包裹内容。 span可以变成块状元素，设置display属性为block，相反的，把div变成内联，把display属性设置为inline即可。 文本框是内联块状 可以设置宽度和高度 display为inlineblock是内联块状元素 内联块的特点：不独自占一行，宽度和高度可以设定。比如<a>本来是内联的，但好多时候做导航栏把它要设置为块。

一般来说，不包含子元素的才是内联块

<img>链接图象标签

默认相对路径跟当前html路径相同 ../表示往上移一级目录，网上的图片为绝对路径。

alt表示默认提示值，应用场景为您所查看的图片已删除，一般来说加一个红色的边框border显示。

<hr>水平线标签

默认贯穿全屏，可以设定宽度、高度，单位是像素px，可以改变颜色。个人经验来讲，其样式如下：

/**
宽度、高度、颜色可替换
**/
width:500px;
height:3px;
border:none;
background-color:#cecece;

<table>表格标签

  • 表头 <th>
  • 行<tr>
  • 列<td>

border设定边框，可以改变高度宽度，高度改变行，宽度改变列。每个格内容长默认自动加长，通过<tr>下的<thead>可以实现表格内自动换行。可以设定背景颜色，背景图片，cellpadding表格内间距，表格与外边框之间的距离，单位都是像素，表格的位置由align属性决定。

<form>表单标签

一类用于显示，一类用于输出。 * form标签：表单，完成用户与服务器的交互。原则上讲所有的表单标签都应该放在form里。 readonly是HTML的一个bug，不管他等于什么值，只要他出现了，都只读。但javascript可以识别，解决这个缺陷就是使用javascript。disabled不可改变。

  • <select>下拉框 select与option元素合用。 length只能获取到option的数量，用于js。

  • option：value属性设置option的提交值，如果value为空，则提交option标签之间的内容。 text也是在HTML中使用无效，要通过javascript实现，可以设定或获取到option标签之间的内容。 selectedindex：默认选中。 selected：设定选项被选中，多个被选中执行最后一个。

  • <textArea>文本域 多行文本输入框。value不能在HTML中使用，但可以在js当中使用，作为显示值和提交值。 row是页面显示的行数，col是页面显示的列数，因为数字字母文字宽度不等，所以列数要大概估计。 wrap，默认soft自动换行，off不自动换行。

  • checkbox多选框 name value type check默认选中 要写好名字，因为后台是按名字分组提交的。

  • radio单选按钮 要分组写好name check默认选中 与checkbox使用方式差不多。单选按钮的名称必须相同，否则不能控制单选checked。

  • text文本框 size只限定输入字段宽度，maxlength设定最大输入长度。

  • button按钮 只是页面显示按钮，想要提交必须通过js实现。

  • file元素 在本地选择文件路径，普通表单信息是数值信息，文件是二进制信息，根据名字获取二进制代码，服务器根据二进制代码生成文件。

  • reset重置按钮 Reset可以重置文本框里面的内容，并不是把所有信息清空，而是还原到刚加载页面状态。

  • submit元素 提交表单，submit可以提交表单内容。

frame框架

frame用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图

Alt text Alt text

<iframe>标签

包含其他页面的页面信息，width最好用百分比，height不支持百分比，只能用js判断页面高度 scrolling显示滚动条。

特殊字符

Alt text

Html 前端