html学习笔记(史上最实用)

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

、editplus复制一行的内容快捷键：ctrl+j
2、editplus可以设置模板在工具菜单下的参数设置
3、html的注释：

********学习的方法，各种编辑器都要注意颜色*********
4、在editplus中，有颜色区别：
html标记是蓝色的，标记属性是红色的
注释是绿色的，标记属性的值是紫色的
*********记住思路--原则--思想的东西，不会了，查手册（w3school）
5、html元素、html标签、html标记是同一个东西
6、练习1.html----文件名在本地电脑上可以用中文，如果上传到服务器上必须要用英文，所以全部用英文
*******html语义说明********
7、写html代码时候的流程
（1）先写我们的控制内容的标记，例如这内容比较重要，可以再与以上加权。

<strong>关键字</strong>
这部分内容是这个文章网页的主题---推荐使用<h1>文章标题</h1> （2）网页段落文字内容----<p>咖啡姐姐啊</p>
8、用适合的html标记去优化网页内容，便于搜索引擎收录
9、在xhtml中，所有的标签都必须要有属性值，如果没有则使用属性名。

例如：<hrnoshade="noshade"/>----xhtml(优先用这个)
<hrnoshade>----html
******改变线的颜色
<hr color="red">
*****图片位置引用***********
10、绝对位置与相对位置
相对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。

因此，当保存于不同目录的网页引用同一个文件时
，所使用的路径将不相同，故称之为相对。

绝对路径-以Web站点根目录为参考基础的目录路径。

之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路
径都是一样的。

其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。

由于对网站上所有文件而言，根目
录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。

以下为建立路径所使用的几个特殊符号，及其所代表的意义。

"./"—根目录。

"../"--代表上一层目录。

"/"—当前根目录。

../../上一层的上一层目录
11、制作过程
（1）先分析页面结构这个页面大概分为哪些部分
（2）在适当的html中去加入页面的内容（信息）--信息载体--文字、图片
12、传统的网页布局方式----使用table表格
布局--table---改用div
布局思想----排版----
1、从大到小排版
2、从左向右排版
13、在editplus中的缩进技巧：tab:向右缩进tab+shift:向左缩进
14、表格合并思想，当将多个内容合并时，就会有多余的东西，应删除例如：有三列：3个td 当合并时要删除2列
合并单元格：就是删除多余的td
推出一个合并删除的td公式，删除的个数=合并的个数-1
15、立体表格效果，其实就是将表格的亮边框颜色与暗边框颜色进行对比。

****表格自身有边框。

单元格自身也有边框****
16、
*****细线表格效果公式******
（1）将表格自身的border="0"
(2)给表格设置背景颜色====细线颜色
（3）给表哥设置单元格之间的距离===细线粗细
17、模仿网站---hao123
<td>与</td>之间没有内容时，默认没有边框，想要显示边框则加上空格就可以了
****可以通过标签的嵌套来完成复杂的结构****
嵌套表格的大小可以使用相对单位，即百分比
18、<colgroup span="2"></colgroup>
colgroupbgcolor="red"></colgroup>
设置表格第三列为红色
19、超链接：HyperLink
其中title指鼠标移到上面的文字提示
<a href="" title="baidu" target="_blank"></a> target 默认为在原来窗口打开连接
_blank表示在新窗口中打开
_self 在自身窗口中打开（默认）
_parent 在上一级窗口中打开，框架会经常使用？？？？
_top 在浏览器的整个窗口中打开忽略任何框架？？？？
20、链接分类：
（1）内部链接：<a href="文档位置"></a>
（2）外部链接:<a href="URL"></a>
（3）email链接<a href="mailto:lukehanenen@"></a> ***********
链接重要的使用原则，必须是回路，有去有回。

----优化相关链接（4）锚点链接：可以跳转到某个页面的某个位置
跳到本页面的某个位置：
step1:定好名字：<a name="锚点名字"></a>
step2：设置锚点链接<a href="#锚点名字"></a>
跳到指定页面的某个位置
<a href="maodian.html#锚点名字"></a>
（5）空链接
一般用来做例如：收藏网站和设为首页这样的特效
<a href="#"></a>
(6)脚本链接
<a href="javascript:window.open('')"></a> 用来做打开窗口和关闭窗口
21、布局的核心思想
22、B/S：浏览器与服务器
23、表单标记
method 值（默认）get 浏览器输入栏上会有提交内容出现（网页跳转时显示来源会有这种设计）
post 不会有
24、type="radio" 单选框
*****设置成单选时候：name的属性值必须一样
type="checkbox"复选框
type="reset"取消重置表单项的值
点文字也可以把单选框或者复选框选上的处理方法：
<lable>标注内容</lable>此标签为input元素定义标注。

<lable>标签的for属性应当与相关元素的ID属性相同
例子：<input type="radio" id="man" value="男" name="sex"
/><lable for="man">男</lable>
25、表单元素大部分用input 插入
也有部分例外：
(1)列表框
<select name="citys">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
</select>
(2)多行文本框
<textarea rows="5" cols="50">
</textarea>
26、插入多媒体
插入flash用embed
<embed src="" width="" height="" wmode="transparent"></embed> wmode可以用来控制flash的背景透明
*****在网页中插入flash的方式：有两种
（1）embed标签
（2）用dreamwaver自动生成（用object）
27、企业视频推广思想：
（1）上传到所有可以上传的视频网站
（2）在自己的企业网站中加入该视频网站分享代码
28、字幕滚动效果
用在新闻滚动招聘网站的招聘信息滚动
**不是很好用**
<marquee>滚动的文字</marquee>
direction= left（默认）right up down
behavior=scroll一圈一圈走slide走一次alternate来回走loop="数字" 默认循环不止
bgcolor width height
onmouseover=" this.stop()"
onmouseout="this.start()"
scrollamount="速度"
scrolldelay ="延时"(走一步停一停)
29、框架技术
（1）先做主框架文件126.html
（2）再分别制作，被包含文件left.html 与right.html
（3）通过框架技术，将left与right包含到126中（类似于CRM为前台制作的审核页做展示？？）
（4）如果还需要，框架中操作其他文件，还必须去制作其他文件
*****框架的链接******
<a href=""></a> 的target的值默认在自身框架中打开
如果链接指向的目标是一个框架中的区域，则必须要给这个区域起个名称
<a href="write.html"target="left"></a> left 是框架名称
在网页之中嵌入网页---内嵌框架----iframe
目前最常用的是过度标准
注意：
xhtml标签必须被正确的嵌套
xhtml标签必须被关闭 eg:<br />
标签名必须用小写字母
属性名必小写，比有值，值必加引号
*****iframe内嵌网页*****
<html>
<head>
<title>浮动框架</title>
</head>
<body bgcolor="#E1FFE1">
<center>
<iframesrc="ml1.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true">
这是一个浮动窗口
</iframe>
<p><a href="sl1.html" target="aa">爱在深秋</a></p>
<p><a href="sl2.html" target="aa">图像对文字的水平居中</a></p>
<p><a href="sl3.html" target="aa">图像与文本之间的距离</a></p>
<p><a href="sl4.html" target="aa">图像大小的设定</a></p>
<p><a href="" target="aa3">新浪网站</a></p>
</center>
</body>
</html>
注意: Internet Explorer 5.5 支持浮动框架的内容透明。

如果想要为浮动框架定义透明内容，则必须满足下列条件。

与IFRAME 元素一起使用的ALLOWTRANSPARENCY 标签属性必须设置为true。

在IFRAME 内容源文档，background-color 或BODY 元素的BGCOLOR 标签属性必须设置为transparent。