前端——HTML（二）-创新互联
一、HTML的结构
这是页面的标题 这是页面的内容
二、在HTML中，一般来说，只有6个标签能让能放在head标签内。
注：
1.link标签：用于引入外部样式文件（CSS文件）
2.meta标签：定义页面的特殊信息，例如页面关键字、页面描述等。
①name属性
②http-equiv属性
//定义页面所使用的编码；这一句必须放在title标签以及其他meta标签前面
//6秒后刷新当前页面
3.script标签：定义页面的JavaScript代码，也可以引入外部JavaScript文件
4.style标签：定义元素的css样式
三、静态页面和动态页面
1.静态页面：文字、图片、超链接、音频和视频（绝大部分）
2.静态页面和动态页面的区别在于：是否服务器进行数据交互。
四、一般标签和自闭合标签
1.一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。
2.自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。
标签：划分区域
五、块元素和行内元素
1.块元素：在浏览器显示状态下将占据一整行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。
2.行内元素：可以与其他行内元素位于同一行，只可以容纳其他行内元素，不可以容纳块元素。
六、网页中的“空格”
:下标 :上标
七、列表
1.有序列表（ordered list）
①type属性
2.无序列表(unordered list）
①type属性
（注：我们一般都是使用无序列表，几乎用不到有序列表。）
3.定义列表(definition list)
定义名词（definition term）:
定义描述（definition description）:
八、表格
1.在HTML中，一个表格一般会由以下三个部分组成。
①表格：table标签
②行：tr标签
③单元格：td标签
表格标题：caption标签（只能有一个，位于第一行）
表头单元格：th标签
注：th和td的区别
①显示上：浏览器会以粗体和居中来显示th标签中的内容，但是td标签不会
②语义上：th标签用于表头，而td标签用于表行
2.HTML引入thead、tbody和tfoot这三个标签把表格分为三部分：表头、表身、表脚。使表格语义更加良好，结构更清晰，也更具有可读性和可维护性。还能方便分块来控制表格的css样式
3.合并行属性：rowspan（将纵向的N个单元格合并）
合并列：colspan（将横向的N个单元格合并）
九、图片
1.img标签是空标签，它只包含属性，并且没有闭合标签。
2.img的属性
①src属性：src 指 "source"，源属性的值是图像的 URL 地址。
②alt属性：用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。
③title属性：也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。
④height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
3.图片路径
①绝对路径：指的是图片在电脑中的完整路径
②相对路径：指的是图片相对当前页面的路径
比如：index1.html和img文件夹处于同一目录下，如果index1.html要引用img文件夹中的1.jpg。则正确的相对路径为 img/1.jpg
如果work4.html要引用img文件夹中的2.jpg。则正确的相对路径为../img/2.jpg
如果work4.html要引用test文件夹中的3.jpg。则正确的相对路径为../3.jpg,因为code2文件夹和3.jpg位于同一级目录中，我们只需要找到work4.html的上一级，就可以找到3.jpg了
注：../表示上一级目录；在实际开发中站内文件不管是图片还是超链接等，我们都使用相对路径，几乎不会使用绝对路径，这是因为如果网站文件一旦移动，则绝大多数路径都会失效。
4.图片格式
①位图：“像素图”，由像素组成的图片。将位图放大缩小后，图片会失真。
.jpg(或.jpeg)：.jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，.jpg体积较大，并且不支持透明。
.png：.png是一种无损格式，可以无损压缩以保证页面打开速度。此外，.png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
.gif：.gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ发的动图都是.gif格式的
也就是说，如果想要展示色彩丰富而高品质图片，可以使用.jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用.png格式；如果是动画图片，可以使用.gif格式。
②矢量图：“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。矢量图大的优点是：图片无论放大、缩小或旋转等都不会失真。大的缺点是：难以表现色彩丰富的图片效果（非常差）。
常见格式：.ai .cdf .fh .swf
十、超链接
文本超链接和图片超链接，都是把文字和图片放在a标签内部来实现的
内部链接：自身网站的页面
锚点链接：是内部链接的一种，它的链接地址指向的是当前页面的某个部分。简单来说，就是点击当前某一个超链接，然后它就会跳到“当前页面”某一部分。
需要定义两个元素：目标元素的id，a标签的href属性指向该id。
1.a标签
href属性：表示想要跳转的页面的路径
target属性：定义超链接的打开新窗口的方式
注意：一般情况下，我们只会用到_blank这一个值
十一、表单
在HTML中，表单标签有五种：form、input、textarea、select和option。
从外观上来划分，表单可以分为以下八种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。
1.form标签：我们要把所有表单标签放在form标签内部
form标签属性
其中method属性的两个属性值：
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
2.input标签：在HTML中，大多数表单都是使用input标签实现的。
input标签是自闭和标签，它是没有结束符号的。
input标签属性
①单行文本框
常用属性
②密码文本框
常用属性
③单选框
checked属性表示默认选中，HTML5的最新写法，checked属性没有属性值
为了得到更好的语义化，表单元素与后面的文本一般都需要借助label标签关联起来。
男女注：value属性取值一般跟后面的文本相同，之所以加上value属性，是为了方便JavaScript或者服务器操作数据。所有表单元素的value属性的作用都是一样的。
④复选框
checked属性表示默认选中
注：复选框中的name跟单选框中的name都是用来设置“组名”的，表示该选项位于哪一组中。
两者都设置name属性，为什么单选框只能选中一项，而复选框可以选择多项呢？其实这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（其实就是根据type属性取值来识别）。如果是单选框组，就只能选择一项；如果是复选框组，就可以选择多项。
如果想在默认情况下，让复选框某几项选中，我们也可以使用checked属性来实现。
⑤按钮
在HTML中，常见的按钮有三种：普通按钮button、提交按钮submit、重置按钮reset
value取值就是按钮上的文字
普通按钮、提交按钮以及重置按钮的区别。
普通按钮一般情况下都是配合JavaScript来进行各种操作的。
提交按钮一般都是用来给服务器提交数据的；
重置按钮一般用来清除用户在表单中输入的内容。
⑥文件上传
3.textare标签
多行文本框:
4.select标签和option标签
下拉列表由select和option这两个标签配合使用
select标签常用属性
注：默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。想要选取多项，可以使用“Ctrl+鼠标左键”来选取。
有些小伙伴将size取值为1、2、3时，会发现在Chrome浏览器中无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。
option常用属性：selected默认选中
十一、框架
iframe标签：在HTML中，我们可以使用iframe标签来实现一个内嵌框架，就是在当前页面嵌入另外一个网页。
你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧
文章名称：前端——HTML（二）-创新互联
分享URL：http://scjbc.cn/article/jdiog.html
