HTML知识点总结

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。类型和类型之间有什么区别，css课上讲。

不能往网页中插入的图片格式是：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）&lt;  就是<的字符实体；

2）&gt;  就是>的字符实体；

3）&copy;  就是©  版权符号；

4）&nbsp;  就是空格的实体，防止空白折叠现象；