Html的标签和属性

拼搏现实的明天。 2022-03-09 05:08 234阅读 0赞

### HTML标签用途 ###

**熟练使用的标签** [万变不离W3C祖宗;][W3C]

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>用途</th> 
   <th>使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>html</td> 
   <td>创建一个HTML文档</td> 
   <td>&lt;!DOCTYPE html&gt;…&lt;/html&gt;</td> 
  </tr> 
  <tr> 
   <td>head</td> 
   <td>规定文档相关的配置信息</td> 
   <td>包含meta,title,link,base,script标签</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>设置html唯一标题，搜索引擎优化SEO<br>（关键字排名）</td> 
   <td>&lt;title&gt;…&lt;/title&gt;</td> 
  </tr> 
  <tr> 
   <td>meta</td> 
   <td>网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签(SEO)</td> 
   <td>&lt;meta name=“keywords” content="…" /&gt;&lt;meta name=“description” content="…"/&gt;</td> 
  </tr> 
  <tr> 
   <td>base</td> 
   <td>为文档的所有链接规定默认打开方式或默认地址</td> 
   <td>&lt;base target="_blank" href=“URL地址” /&gt;</td> 
  </tr> 
  <tr> 
   <td>link</td> 
   <td>定义一个链接和源之间的相互关系<br>（css文件引用、favicon.ico图标引用）</td> 
   <td>css/ico:&lt;link href=“address” rel=“stylesheet” type=“text/css”/&gt;<br>&lt;link rel=“icon” href=“favicon.ico” type=“image/x-icon”&gt;</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>写放css样式代码</td> 
   <td>&lt;style type=“text/css”&gt;…&lt;/style&gt;</td> 
  </tr> 
  <tr> 
   <td>script</td> 
   <td>写放js代码的标签<br>通常使用src属性导入外部js文件</td> 
   <td>&lt;script src=“address”&gt;&lt;/script&gt;</td> 
  </tr> 
  <tr> 
   <td>body</td> 
   <td>标签定义文档的主体，包含文档的所有内容</td> 
   <td>&lt;body&gt;…&lt;/body&gt;</td> 
  </tr> 
  <tr> 
   <td>div</td> 
   <td>无语义标签，通常用于布局，典型的块级元素（独占一行，可设置宽高、margin、padding）</td> 
   <td>&lt;div class=".name"&gt;…&lt;/div&gt;</td> 
  </tr> 
  <tr> 
   <td>h1-h6</td> 
   <td>一级大标题到六级标题</td> 
   <td>&lt;h1&gt;…&lt;/h1&gt;</td> 
  </tr> 
  <tr> 
   <td>hr</td> 
   <td>在 HTML 页面中创建一条水平线</td> 
   <td>&lt;hr /&gt;</td> 
  </tr> 
  <tr> 
   <td>ul</td> 
   <td>创建一个标有圆点的无序列表，中间只能放li</td> 
   <td>&lt;ul&gt;&lt;li&gt;…&lt;/li&gt;&lt;/ul&gt;</td> 
  </tr> 
  <tr> 
   <td>ol</td> 
   <td>创建一个标有数字的有序列表，中间只能放li</td> 
   <td>&lt;ol&gt;&lt;li&gt;…&lt;/li&gt;&lt;/ol&gt;</td> 
  </tr> 
  <tr> 
   <td>li</td> 
   <td>通常放在ul、ol中增加列表项<br>li标签里可以放任何标签，常见a标签</td> 
   <td>&lt;li&gt;…&lt;/li&gt;</td> 
  </tr> 
  <tr> 
   <td>a</td> 
   <td>锚文本超链接标志</td> 
   <td>&lt;a href=“address” target="_black" &gt;&lt;/a&gt;<br>创建文档内的书签&lt;a name=“name”&gt;&lt;/a&gt;<br>指向文档书签的链接&lt;a href="#name"&gt;&lt;/a&gt;</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>引入外部图片到网页中显示</td> 
   <td>&lt;img src=".png" alt="…" /&gt;</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>网页中数据提交(按钮及文本)</td> 
   <td>&lt;form action=“address” method=“post”&gt;…&lt;/form&gt; action是提交到的位置</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>改变type值实现输入框,单选、多选、按钮等控件</td> 
   <td>&lt;input name="…" type=“submit” value=“提交”/&gt;</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>按钮双标签便于css优化调整</td> 
   <td>&lt;button&gt;…&lt;/button&gt;</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>创建单选或多选菜单</td> 
   <td>&lt;select&gt; &lt;option value =“volvo”&gt;…&lt;/option&gt;&lt;/select&gt;</td> 
  </tr> 
  <tr> 
   <td>table</td> 
   <td>定义 HTML 表格</td> 
   <td>&lt;table border=“1”&lt;&gt;…&lt;/table&gt;</td> 
  </tr> 
  <tr> 
   <td>thead</td> 
   <td>对 HTML 表格中的主体内容进行分组</td> 
   <td>&lt;thead&gt;&lt;tr&gt;&lt;th&gt;…&lt;th&gt;&lt;/tr&gt;&lt;thead&gt;</td> 
  </tr> 
  <tr> 
   <td>tfoot</td> 
   <td>对 HTML 表格中的表注（页脚）内容进行分组</td> 
   <td>&lt;tfoot&gt;&lt;tr&gt;&lt;td&gt;…&lt;td&gt;&lt;/tr&gt;&lt;tfoot&gt;</td> 
  </tr> 
  <tr> 
   <td>tbody</td> 
   <td>对 HTML 表格中的表注（页脚）内容进行分组</td> 
   <td>&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;…&lt;td&gt;&lt;/tr&gt;&lt;tbody&gt;</td> 
  </tr> 
  <tr> 
   <td>tr</td> 
   <td>table表格中的行标签，中间只放th、td标签</td> 
   <td>&lt;tr&gt;&lt;th&gt;…&lt;th&gt;&lt;/tr&gt;</td> 
  </tr> 
  <tr> 
   <td>th</td> 
   <td>表格内的表头单元格(粗体文本)</td> 
   <td>同上</td> 
  </tr> 
  <tr> 
   <td>td</td> 
   <td>表格中的标准单元格</td> 
   <td>&lt;tr&gt;&lt;td&gt;…&lt;td&gt;&lt;/tr&gt;</td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td>创建一个段落，每个段落间有两个换行的距离</td> 
   <td>&lt;p&gt;…&lt;/p&gt;</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td>无语义标签，通常用于组合文档中的行内元素（同行排列，不可设置宽高、margin、paddind上下）</td> 
   <td>&lt;span&gt;…&lt;/span&gt;</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td>加强文本的语气（粗黑体），起强调作用</td> 
   <td>&lt;strong&gt;…&lt;/strong&gt;</td> 
  </tr> 
  <tr> 
   <td>dl</td> 
   <td>创建一个自定义列表<br>一般用于底部导航栏</td> 
   <td>&lt;dl&gt;&lt;dt&gt;…&lt;/dt&gt;&lt;/dd&gt;…&lt;/dd&gt;&lt;/dl&gt;</td> 
  </tr> 
  <tr> 
   <td>dt</td> 
   <td>自定义列表的主要成员（标题）</td> 
   <td>同上</td> 
  </tr> 
  <tr> 
   <td>dd</td> 
   <td>用于修饰、详细介绍dt的分支</td> 
   <td>同上</td> 
  </tr> 
 </tbody> 
</table>

**整合归纳区分标签**

*  基本属性：  
    input的type值：type="text"文本框；type="radio"单选按钮（一般给同一组定义相同的name值）；type="checkbox"复选框；type="button"普通按钮；type="submit"提交按钮。checked=checked可以设置默认选中项，option设置selected=selected同理。
 *  name，id，class属性：  
    ①name给同一种类的选项定义相同name值；  
    ②id的值在一个HTML文档中只能出现一个，唯一标识，用于CSS的id选择器和JS的document.getElementById查询；  
    ③class在一个HTML文档中可以出现多个，用于CSS的类选择器和JS的document.getElementsByClassName查询。
 *  行内元素，块级元素，空元素：  
    行内元素：a、b、span、img、input、strong、select、label、em、button、textarea  
    块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote  
    空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
 *  px、pt、em长度单位的区别：  
    px 像素pixel；pt的值相对于游览器而言一般是固定的，游览器默认字体高度都是16px；  
    em 是相对长度单位，且em会继承父级元素的字体大小。  
    pt 点point；绝对长度单位，绝对固定；  
    未经调整的浏览器都符合: 1em=16px。
 *  > 为方便计算、设置em长度单位，在body标签下初始font-size=62.5%后，em与px单位就只有10倍差距，可此后面布局可依据以下技巧进行  
    > font-size:1.2em等于font-size:12px  
    > font-size:1.4em等于font-size:14px
 *  文本格式化标签：  
    strong：粗体，强调标签中内容的重要性，b：仅仅加粗；  
    em：斜体，强调标签中内容的句意，i：仅仅倾斜；  
    del：删除线，推荐使用，s：删除线；  
    ins：下划线，推荐使用，u：下划线。
 *  meta用法整合：  
    <meta charset=“utf-8”>  
    <meta name=“keywords” content=“关键字,方便SEO搜索”>  
    <meta name=“description” content=“网页描述,SEO挂钩”>  
    <meta http-equiv=“refresh” content=“10; http://www.baidu.com”>  
    <meta name=“Author” content=“冰谷悠”>
 *  H5新增的标签：  
    header，footer，nav，article，section，datalist（input里定义list=id，datalist定义id），aside，fieldset（加legend标签），video（ogg，mp4，webm），audio（ogg，mp3，wav）
 *  H5新增的属性：  
    placeholder，autofocus(自动聚焦)，multiple（可多选文件），autocomplete（必须加Name值），required（必填项），accesskey（加一个键盘字母定光标）
 *  H5中input新增type值：  
    input新type值：email，tel，url，number，search，range（滑块），time，date，datetime，month，week。

**特殊标签/特殊规则**

*  DOCTYPE的作用：  
    DOCTYPE声明是指HTML文档开头处的一行或两行代码，它描述使用哪个DTD（文档类型定义）。浏览器通过分析页面的 DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。  
    DOCTYPE当前有两种风格，严格（strict）和过渡（transitional）  
    ① 严格版本禁止使用废弃的元素，从而把内容和表现分隔开。  
    ②过渡的目的是帮助开发人员从老版本迁移到新版本，仍然允许使用已经废弃的元素。
 *  XHTML和HTML的区别：  
    ①XHTML 元素必须被正确地嵌套。  
    ②XHTML 元素必须被关闭。  
    ③标签名必须用小写字母。  
    ④XHTML 文档必须拥有根元素。
 *  在标准文档流里面，块级元素具有以下特点：  
    ①总是在新行上开始，占据一整行；  
    ②高度，行高以及外边距和内边距都可控制；  
    ③宽带始终是与浏览器宽度一样，与内容无关；  
    ④它可以容纳内联元素和其他块元素。  
    ★行内元素的特点：  
    ①和其他元素都在一行上；  
    ②高，行高及外边距和内边距部分可改变；  
    ③宽度只与内容有关；  
    ④行内元素只能容纳文本或者其他行内元素。  
    不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。
 *  盒子模型：  
    每个标签（元素）占有空间的大小由几个部分构成，其中包括元素的内容content，元素的内边距padding，元素的边框border，元素的外边距margin四个部分。这四部分有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域，一般用于CSS美化界面，盒子模型共有两种：  
    ①w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。  
    ②IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
 *  HTML的语义：  
    根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。  
    语义化的目的：  
    ①为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；  
    ②用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；  
    ③有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；  
    方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；  
    ④便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
 *  编写HTML代码的注意事项：  
    ①不要使用纯样式标签，如：b、font、u等，改用css设置；  
    ②需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；  
    ③使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；  
    ④表单域要用fieldset标签包起来，并用legend标签说明表单的用途；  
    ⑤每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

[W3C]: http://www.w3school.com.cn/tags/index.asp