标签：cells otto 外部 词汇 glin 作用 css 嵌套 eset
一个html的基本结构如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页标题</title> 6 </head> 7 <body> 8 网页显示内容 9 </body> 10 </html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是‘lang="zh-CN"‘,不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
文档示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title> xhtml 1.0 文档类型 </title> 6 </head> 7 <body> 8 9 </body> 10 </html>
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
文档示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> html5文档类型 </title> 6 </head> 7 <body> 8 9 </body> 10 </html>
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：
1 <!-- 成对出现的标签 --> 2 <body>......</body> 3 <p>......</p> 4 <div>......</div> 5 <b>......</b> 6 7 <!-- 单个出现的标签 --> 8 <br /> 9 <img src="..." /> 10 <input type="..." /> 11 12 <!-- 标签之间的嵌套 --> 13 <p> 14 <span>...</span> 15 <a href="...">...</a> 16 </p> 17 <div> 18 <h3>...</h3> 19 <div> 20 <span>...</span> 21 <p>...</p> 22 </div> 23 </div>
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
1 <h1>这是一级标题</h1> 2 <h2>这是二级标题</h2> 3 <h3>这是三级标题</h3>
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>段落</title> 6 </head> 7 <body> 8 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超 9 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的 10 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 11 </p> 12 13 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 14 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 15 页可以从一个网页链接跳转到另外一个网页。</p> 16 </body> 17 </html>
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，代码如下：
1 <p> 2 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 3 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 4 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。 5 </p>
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
1 <!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> 2 <p> 3 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 4 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 5 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
1 <!-- “<” 和 “>” 的字符实体为 < 和 > --> 2 <p> 3 3 < 5 <br> 4 10 > 5 5 </p>
1、div标签 块元素，表示一块内容，没有具体的语义。
2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
1、em标签 行内元素，表示语气中的强调词
2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
4、strong标签 行内元素，表示非常重要的内容
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
<img src="images/pic.jpg" alt="产品图片" />
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
1 <a href="#"></a> <!-- # 表示链接到页面顶部 --> 2 <a href="http://www.cnblogs.com/wanglinjie/" title="跳转到王琳杰的博客">王琳杰的博客</a> 3 <a href="2.html">测试页面2</a>
页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
1 <a href="#mao1">标题一</a> 2 ...... 3 ...... 4 <h3 id="mao1">跳转到的标题</h3>
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
1 <ol> 2 <li>列表文字一</li> 3 <li>列表文字二</li> 4 <li>列表文字三</li> 5 </ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
1 <ul> 2 <li>列表文字一</li> 3 <li>列表文字二</li> 4 <li>列表文字三</li> 5 </ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
1 <h3>前端三大块</h3> 2 <dl> 3 <dt>html</dt> 4 <dd>负责页面的结构</dd> 5 6 <dt>css</dt> 7 <dd>负责页面的表现</dd> 8 9 <dt>javascript</dt> 10 <dd>负责页面的行为</dd> 11 12 </dl>
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简历</title> 6 </head> 7 <body> 8 <table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center"> 9 <tr> 10 <td width="260" valign="top" bgcolor="#f2f2f2"> 11 12 <table width="260" border="0" cellpadding="0" cellspacing="0"> 13 <tr height="100"> 14 <td></td> 15 <td></td> 16 </tr> 17 <tr> 18 <td width="230" align="right"><img src="images/person.png" alt="人物图片"></td> 19 <td width="30"></td> 20 </tr> 21 <tr> 22 <td align="right">张达山</td> 23 <td></td> 24 </tr> 25 <tr> 26 <td align="right">18210898888</td> 27 <td></td> 28 </tr> 29 <tr> 30 <td align="right">zhangdasan@126.com</td> 31 <td></td> 32 </tr> 33 </table> 34 35 36 37 </td> 38 <td width="30"></td> 39 <td width="480" valign="top"> 40 41 <table border="0" cellpadding="0" cellspacing="0" width="480"> 42 <tr height="75"> 43 <td></td> 44 </tr> 45 <tr> 46 <td align="right"><img src="images/resume.png"></td> 47 </tr> 48 </table> 49 50 <hr /> 51 52 <table border="0" cellpadding="0" cellspacing="0" width="480" height="180"> 53 <tr height="30"> 54 <td></td> 55 </tr> 56 <tr> 57 <td colspan="2"><b>个人基本情况</b></td> 58 </tr> 59 <tr> 60 <td width="50%">姓 名：张达山 </td> 61 <td width="50%">籍 贯：北京昌平</td> 62 </tr> 63 <tr> 64 <td>性 别：男</td> 65 <td>身 高：175cm</td> 66 </tr> 67 <tr> 68 <td>民 族：汉</td> 69 <td>体 重：70kg</td> 70 </tr> 71 <tr> 72 <td>出生日期：1992.03.28</td> 73 <td>电 话：18210898888</td> 74 </tr> 75 <tr> 76 <td>专 业：工业设计</td> 77 <td>现居住地：昌平天通苑</td> 78 </tr> 79 </table> 80 81 82 83 84 85 </td> 86 <td width="30"></td> 87 </tr> 88 89 </table> 90 </body> 91 </html>
border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下伪代码：
1 <!-- form定义一个表单区域,action属性定义表单数据提交的地址， 2 method属性定义提交的方式。 --> 3 <form action="http://www..." method="get"> 4 5 <!-- label标签定义表单控件的文字标注，input类型为text定义了 6 一个单行文本输入框 --> 7 <p> 8 <label>姓名：</label><input type="text" name="username" /> 9 </p> 10 11 <!-- input类型为password定义了一个密码输入框 --> 12 <p> 13 <label>密码：</label><input type="password" name="password" /> 14 </p> 15 16 <!-- input类型为radio定义了单选框 --> 17 <p> 18 <label>性别：</label> 19 <input type="radio" name="gender" value="0" /> 男 20 <input type="radio" name="gender" value="1" /> 女 21 </p> 22 23 <!-- input类型为checkbox定义了单选框 --> 24 <p> 25 <label>爱好：</label> 26 <input type="checkbox" name="like" value="sing" /> 唱歌 27 <input type="checkbox" name="like" value="run" /> 跑步 28 <input type="checkbox" name="like" value="swiming" /> 游泳 29 </p> 30 31 <!-- input类型为file定义上传照片或文件等资源 --> 32 <p> 33 <label>照片：</label> 34 <input type="file" name="person_pic"> 35 </p> 36 37 <!-- textarea定义多行文本输入 --> 38 <p> 39 <label>个人描述：</label> 40 <textarea name="about"></textarea> 41 </p> 42 43 <!-- select定义下拉列表选择 --> 44 <p> 45 <label>籍贯：</label> 46 <select name="site"> 47 <option value="0">北京</option> 48 <option value="1">上海</option> 49 <option value="2">广州</option> 50 <option value="3">深圳</option> 51 </select> 52 </p> 53 54 <!-- input类型为submit定义提交按钮 55 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如： 56 <input type="image" src="xxx.gif"> 57 --> 58 <p> 59 <input type="submit" name="" value="提交"> 60 61 <!-- input类型为reset定义重置按钮 --> 62 <input type="reset" name="" value="重置"> 63 </p> 64 65 </form>
<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：
1 <a href="01.html" target="myframe">页面一</a> 2 <a href="02.html" target="myframe">页面二</a> 3 <a href="03.html" target="myframe">页面三</a> 4 <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>内嵌框架</title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" target="myframe">百度网</a> 9 <a href="https://www.cnblogs.com/wanglinjie" target="myframe">王琳杰的博客</a> 10 <a href="http://www.qq.com" target="myframe">腾讯网</a><br /> 11 <iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no" name="myframe"></iframe> 12 <iframe src="001列表.html" width="900" height="500" frameborder="0" scrolling="no"></iframe> 13 </body> 14 </html>
标签：cells otto 外部 词汇 glin 作用 css 嵌套 eset
原文地址：https://www.cnblogs.com/wanglinjie/p/9165106.html
