HTML的总结
HTML的基本内容
一、 HTML的语法
1. 标签与属性区别
在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“<标签名>”表示，结束标签用“</标签名>”表示。
元素值都是包含标签在内的整体，出去标签的部分叫做内容。
属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以"属性名="值“ ”的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序。
2. 表格的必备知识
2.1 表格的基本架构
<table>
<tr>
<td>
</td>
</tr>
</table>
2.2 表格的基本属性
- colspan 合并单元格 横向（表格默认为10行）
- rowspan 合并单元格 列向 （表格默认为10行）
- 常用 width=“ %” height=“ %"占初始长表长的百分比 比较好用
- 文本 <input type=”text“ size=” px"/> 文本需要插入 可以设置他的面积
- 文本框 文本框 常与 cols=” “，rows=” “配合使用
- 对齐方式 algin 有左对齐（left）右对齐（right）居中（center）三种方式
3 . 表单的必备知识
3.1 表单的基本框架
<form action=“ ” method= “get” >
<input tye="text"> </input>
<input type=“radio” name=“gener” value=“male”>男</input>
<input type="radio" name="gener" value="femal">女</input>
</from>
3.2 表单的标签与属性
-
标签：
-
插入标签
-
嵌套标签 复选标签
-
换行标签 -
文本域标签 与cols rows配合使用
-
属性：
-
placeholder 是文本预输入
-
value 程序员为标签命名 传送给浏览器
-
name 程序员让人看的名字
-
checked 当加入这个属性时 会第一显示该选项 不适合select
-
selected 当加入这个属性在select中时 会优先显示该选项
-
type：
-
- password 密码属性 输入数据会被隐藏
-
- radio 单选按钮 单选按钮 必须有两个或两个以上的按钮 相同名字下不同的选择才可生效
-
- checkbox 多选按钮 同一个选项会有多个选择
-
- submit 提交按钮
-
- reset 重置按钮
4. 图片的基本知识
·
4.1 图片的基本格式
·
<img src=" " id=" " border= " " title=" " alt=“ ”></img>
·
4.2 图片的基本属性
- title 光标移动到该图片上时会显示该图片的名字
- alt 当图片无法显示时，会显示图片的名字以代替图片
- border 图片的边框
- sec 图片的地址，用来搜索查找图片的地址并引用 （注意src = “…/img/1.png” …意思是上级目录的意思）
- width： 设置图片的宽度 当单独设置一个时（width height 一般配设使用）另一个会成等比例缩放。
4.3 图片的基本格式
·
1. BMP格式图像
BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能被多种Windows应用程序支持。
特点：
1.1 包含图像信息丰富，几乎不进行压缩。（单机游戏上比较流行）
1.2 在windows环境下运行的所有图像软件都支持BMP图像文件格式。系统内部个图象绘制操作都是以BMP为基础的。
1.3 文件拓展名是BMP或者bmp（有时.DIB或.RLE）
- GIF格式图像
GIF 是Graphics Intwerchange Format的简写，他是图形转换格式，采用LZW压缩算法进行编码，用于以超文本标志语言（Hypertex Markup Language）方式显示索引彩色图像，在因特网和其他在线服务系统上得到广泛应用。GIF是一种公用的图像文件格式标准。版权归Compu Serve公司所有/
特点：
2.1 GIF是无损的。文件大小远小于BMP格式的图片，文件小。
2.2 GIF具有支持动画以及透明的优点。
2.3 GIF格式仅支持8bit的索引，在整个图片只存在256种不同的颜色
适用：
企业logo、线框类的图 - PNG格式图像
PNG是Portable Network Graphics的简写，他是便携式网络图形，PNG是一种无损压缩的位图片形格式，目的代替GIF与TIFF。
特点：
3.1 压缩比高，生成文件体积小
3.2 压缩不失真、透明背景
3.3 格式有8位、24位、32位三种形式，其中8位支持两种透明形式（索引透明和alpha透明），24位PNG不支持透明，32位在24位基础上增加了8位透明通道，因此可展现256级透明程度。 - JPG格式图像
JPG是JPEG Joint Photographic Experts Group 的简写，一种常见的图画格式。
特点：
4.1 压缩比高，体积小 可以把文件压缩到最小的格式。
4.2 JPG去掉一部分图片的原始信息，进行了有损压缩。
4.3 采用直接色，适合存储图片（可表达颜色渐变）
4.4 编辑和重新保存JPG文件时，JPG会混合原始图片数据的质量下降，并且可叠加
5.I CON格式图像
ICON是 Icon file 的缩写，含有透明图层功能的图片
特点：
5.1 桌面图标都是这种格式的图片，实际形状是正方形
5.2 原本方形的图形因为含有透明图层，则可以做头像或者图标。以及网站的logo
·
5. HTML 其余知识
·
5.1 颜色
代表语法 后面数字 是十六进制组成的颜色
颜色 也可以用名称表示
5.2 HTML字符实体
 ； 表示一个完整的空格；
5.3 HTML5是最新版本（伴随手机出现）
5.4 超链接 添加属性 herf=“ ” 链接的网址
5.5 HTML 框架 iframe
·
这是一个frame。
<a href="listlink.html">连接一</a>
<a href="imglink.html" target="mainFrame">链接二</a>
<a href="textlink.html">连接三</a>
<iframe name="mainFrame" frameborder="0px" width="500" height="600" src="http://www.hao123.com"></iframe>
·
引用网址 并且设置该显示区域的长度与宽度
ifream 经常与href配合使用 当显示东西完全显示时 可添加属性 frameborder=“ 0” 去除边框
5.6 块级元素 div 布局时经常使用
5.7 span标签 目的时添加简单的css效果
5.8 头部中添加 外来引用的东西 以及浏览器的图标 更新的频率 搜索时的关键字
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
搜索时 kewords 可以搜索到关键词
<meta name=" "></meta>
网页自动刷新 content 时间 每隔几秒刷新网页
<meta http-equiv="refresh" content="3" />
网站图标的显示
<link rel="icon" href="../img/yc.png" />
-->
<meta name="keywords" content="太工，太原工业学院，化校"></meta>
<meta http-equiv="refresh" content="3" />
<link rel="icon" href="../img/yc.png" />
</head>
<body>
头部meta标记的使用
</body>
</html>
·
5.9 搜错三大引擎：百度 谷歌 必应（微软）
5.10 图片的格式 ： jdp/jpeg/icon/png/gif
HTML 的面试题
- 单选按钮名字不一样会有影响吗？
名字不一样时，可以进行多选。则名字不一样时错误。 - 准确口述（现场面试）
2.1 单选按钮名字不同是什么效果？
名字不同时，单选按钮可以进行并列选择（同类型情况多选）
常用的标签有 radio（单选） checkbox（复选）以及select 内含option的（选择）。
2.2 表单的post和get有什么区别？（超级面试题）
一、指代不同- get：从指定的资源请求数据
- post： 向指定的资源提交要处理的数据
二、安全性不同 - get：GET的安全性较差，因为所发送的数据时URL的一部分。
- post：POST比GET更安全，因为参数不会被保存在浏览器历史或web服务器日志中。POST请求不会被缓存，请求不会保留在浏览器历史记录中，POST不能被收藏为书签，请求对数据长度没有要求。
三、数据限制不同 - get：当发送数据时，GET方法向URL添加数据；URL的长度是受限制的（URL的最大长度是2048个字符）
- post：无限制。
- 图片
- 如何把图片与按钮相互配合，点击按钮显示图片，图片显示，按钮变成隐藏图片，点击后隐藏图片？
- 区分块元素与内联元素
内联元素：没有换行效果
块元素： 有新的一行产生
- HTML的空格用什么表示
 ； 表示一个完整的空格；
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
