HTML知识点总结
一、需要熟悉的基本快捷键
ctrl+c 复制
ctrl+v 粘贴
ctrl+x 剪切
ctrl+tab 切换(具体切换什么,要看是什么软件)
alt+F4 关闭程序
F2 重命名
F5 刷新,比如看网页的时候,想刷新网页,按f5
ctrl+z 撤销,就是这一步干错了,就ctrl+z撤销
windows+E 打开资源管理器
windows+D 显示桌面
ctrl+空格 切换中英文
二、HTTP
1.超文本传输协议,Hypertext Transfer Protocol
2.这是一个文件的传输协议,我们上网的时候,所有的文件都是通过HTTP这个协议,从服务器上传输到客户的电脑里面的
3.网页是真实物理的文件。并且一个网页是很多的物理文件组成的:html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器,访问网址,服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中,在用户的电脑中执行、渲染、呈递。
4.网页的原理:用户输入网址之后,对应的服务器就发现有人请求我的网页了,所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电脑里面。HTML页面在用户的电脑里面进行渲染。HTTP协议指的是超文本传输协议。每一个网址,都对应了服务器上面的确定的文件。
三、HTML初步认识
1.html、css、js都是纯本文的
纯文本文件是:
1) 只有文本,没有样式;
2) 用记事本等纯文本编辑器可读,不是乱码
2.HTML是超文本标记语言
1)英语:HyperText Markup Language;
2)现在的业界的标准,网页技术严格的三层分离:html就是负责描述页面的语义;css负责描述页面的样式;js负责描述页面的动态效果的;
四、字符集
1.两种字符集:区别
UTF-8 字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
gb2312字少,只用中文和少数外语和符号,但是尺寸小,文件小巧
2.关键字和页面描述
1)设置页面描述:
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
只要设置的Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO,search engine optimization,搜索引擎优化。
2)定义关键词:
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。
3)title也是有助于SEO搜索引擎优化的
五、HTML基本语法特性
1.HTML对换行不敏感,对tab键不敏感
2.空白折叠现象
1)HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
3.HTML标签是分等级的
HTML将所有的标签分为两种:容器级、文本级。
容器级的标签,里面可以放置任何东西;
文本级的标签里面,只能放置文字、图片、表单元素。
1)p是一个文本级的标签,p里面只能放文字、图片、表单元素
2)a是一个文本级的标签
六、图片
1.能用的图片类型
页面上可以插入图片,能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是:psd、ai。
2.语法
插入图片的方法:
<img src="baby.jpg" alt="巴黎结婚照" />
src是img标签的属性,baby.jpg是这个属性的值
alt是英语alternate“替代”的意思,就表示不管因为什么原因,当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)
七、超链接
语法:<a href="1.html">结婚照</a>
1.a标签的另外两个属性
1)title 悬停文本
2)target 是否在新窗口中打开
eg:<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
blank就是“空白”的意思,就表示新建一个空白窗口
2.页面内的锚点
<a href="#wdzp">点击我就查看我的作品</a>
<h2><a id="gzjy">工作经验</a>
首先设置h2的id,点击href="#wdzp"直接跳转到工作经验。
八、列表
1.无序列表
无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的;
无序列表中的li不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li;
注意:ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的;
ul的儿子,只能是li。但是li是一个容器级标签,li里面什么都能放;
2.有序列表
ordered list 有序列表,用ol表示;
3.定义列表
1)定义列表也是一个组标签,不过比较复杂,出现了三个标签:
dl表示definition list 定义列表;
dt表示definition title 定义标题;
dd表示definition description 定义表述词儿;
dt、dd只能在dl里面;dl里面只能有dt、dd;
定义列表用法非常灵活,可以一个dt配很多dd;
2)dt、dd都是容器级标签,想放什么都可以。所以,现在就应该更加清晰的知道:
用什么标签,不是根据样子来决定,而是语义
九、div和span
1)div的语义是division“分割”; span的语义就是span“范围、跨度”
2)div标签是一个容器级标签,里面什么都能放,甚至可以放div自己
span也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。
就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的,div里面放置大东西的。
十、表单
form是英语表单的意思。form标签里面有action属性和method属性,action属性就是表示,表单将提交到哪里。 method属性表示用什么HTTP方法提交,有get、post两种。
1.文本框
<input type="text" value="默认有的值" />
value表示“值”,value属性就是默认有的值,文本框中已经被填写好了
2.密码框
<input type="password" />
3.单选按钮
<input type="radio" name="xingbie" checked="checked" /> 男
<input type="radio" name="xingbie" /> 女
默认被选择,就应该书写checked=”checked”
4.复选框
<p>
请选择你的爱好:
<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 乒乓球
<input type="checkbox" name="aihao"/> 打豆豆
</p>
5.下拉列表
select就是“选择”,option“选项”。
select标签和ul、ol、dl一样,都是组标签
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
6.多行文本框(文本域)
<textarea cols="30" rows="10"></textarea>
cols属性表示columns“列”,rows属性表示rows“行”
7.三种按钮
1)普通按钮:<input type="button" value="我是一个普通按钮" />
2)提交按钮:<input type="submit" />
3)重置按钮:<input type="reset" />
十一、HTML杂项
1 .HTML注释
任何的程序、代码都有注释,注释就是给程序员看的,不影响程序的;
HTML注释的语法:<!--注释的内容-->
2.字符实体
1)< 就是<的字符实体;
2)> 就是>的字符实体;
3)© 就是© 版权符号;
4) 就是空格的实体,防止空白折叠现象;