HTML+CSS基础知识点.docx

《HTML+CSS基础知识点.docx》由会员分享，可在线阅读，更多相关《HTML+CSS基础知识点.docx（13页珍藏版）》请在冰豆网上搜索。

HTML+CSS基础知识点

HTML+CSS笔记

1.学习web前端开发基础技术需要掌握：

HTML、CSS、JavaScript语言。

（1）HTML是网页内容的载体。

内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

（2） CSS样式是表现。

就像网页的外衣。

比如，标题字体、颜色变化，或为标题加入背景图片、边框等。

所有这些用来改变内容外观的东西称之为表现。

（3）JavaScript是用来实现网页上的特效效果。

如：

鼠标滑过弹出下拉菜单。

或鼠标滑过表格的背景颜色改变。

还有焦点新闻（新闻图片）的轮换。

可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2.添加样式如：

h1{

font-size:

12px;

color:

#930;

text-align:

center;

}

3.

（1）

我的第一个段落

我的第二个段落

（2）标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

4.

（1）称为根标签，所有的网页标签都在中。

（2）标签用于定义文档的头部，它是所有头部元素的容器。

头部元素有

6.

--注释文字-->

7.需要强调的文本，在浏览器中默认用斜体表示

需要强调的文本，用粗体表示：

一个想要成名名叫尼克•卡拉威（托比•马奎尔TobeyMaguire饰）的作家

8.强调标签比较

和标签是为了强调一段话中的关键字时使用，它们的语义是强调。

标签是没有语义的，它的作用就是为了设置单独的样式用的。

注：

9.标签，短文本引用引用文本

“庄生晓梦迷蝴蝶。

望帝春心托杜鹃。

”这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。

因为不是作者自己的文字，所以需要使用实现引用。

注意：

要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

庄生晓梦迷蝴蝶。

望帝春心托杜鹃。

10.

标签，长文本引用

引用文本

11.使用
标签分行显示文本

需要加回车换行的地方加入
，
标签作用相当于word文档中的回车

暗淡轻黄体性柔，

情疏迹远只香留。

何须浅碧深红色，

自是花中第一流。

标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
、

---

和。

总结：

在html代码中输入回车、空格都是没有作用的。

在html文本中想输入回车换行，就必须输入
。

11.空格：

要想输入空格，必须写入 语法：

 

12.认识

---

标签，添加水平横线

13.

标签，为网页加入地址信息

联系地址信息

14.使用加入一行代码

代码语言；

注：

如果是多行代码，可以使用

标签。
语言代码段
标签的主要作用:
预格式化的文本。
被包围在pre元素中的文本通常会保留空格和换行符。
15.使用ul,添加信息列表（无序列表）：
如下图
信息
信息
......
ul-li在网页中显示的默认样式一般为：
每项li前都自带一个圆点
16.使用
制作有序列表如下图：
信息
信息
......
17.
板块
…
18.认识table标签，认识网页上的表格
创建表格的四个元素：
table、tbody、tr、th、td
（1）
…：
整个表格以
标记开始、标记结束。
（2）…：
当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。
如右侧代码编辑器中的代码。
（3）…：
表格的一行，所以有几对tr表格就有几行。
（4）…：
表格的一个单元格，一行中包含几对...，说明一行中就有几列。
（5）…：
表格的头部的一个单元格，表格表头。
（6）表格中列的个数，取决于一行中数据单元格的个数。
19.caption标签，为表格添加标题和摘要
摘要：
摘要的内容是不会在浏览器中显示出来的。
它的作用是增加表格的可读性（语义化），使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
标题：
用以描述表格内容，标题的显示位置：
表格上方。
语法：
标题文本
20.使用标签，链接到另一个页面
语法：
链接显示的文本
例如：
clickhere!
上面例子作用是单击clickhere!
文字，网页链接到这个网页。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容
21．在新建浏览器窗口中打开链接
标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：
clickhere!
22.使用mailto在网页中链接Email地址
标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。
我们还可以利用mailto做许多其它事情。
下面一一进行讲解，请看详细图示：
注意：
如果mailto后面同时有多个参数的话，第一个参数必须以“?
”开头，后面的参数每一个都以“&”分隔。
下面是一个完整的实例:
23.认识标签，为网页插入图片
语法：
举例：
讲解：
1、src：
标识图像的位置；
2、alt：
指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：
提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
24.使用表单标签，与用户交流
语法：
讲解：
1.：
标签是成对出现的，以开始，以结束。
2.action ：
浏览者输入的数据被传送到的地方,比如一个PHP页面（save.php）。
3.method ：
 数据传送的方式（get/post）。
用户名:
密码:
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在
标签之间（否则用户输入的信息可提交不到服务器上哦！
）
2、method:
post/get的区别这一部分内容属于后端程序员考虑的问题
注：
Form中的get和post方法，在数据传输过程中分别对应了GET和POST方法。
二者主要区别如下：
1、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?
”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
如下形式：
    
2、Get是不安全的，因为在传输过程，数据被存放在请求的URL地址中，这样就可能会有一些隐私的信息被第三方看到。
3、Get方式传输的数据量非常小，一般限制在2KB左右，但是执行效率却比Post方法好；而Post方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，根据微软方面的说法，微软对用Request.Form（）可接收的最大数据有限制，IIS4中为80KB字节，IIS5中为100KB字节。
综上所述，请尽量用Post方法。
25.文本输入框，密码输入框
语法：
1、type：
  当type="text"时，输入框为文本输入框;
  当type="password"时, 输入框为密码输入框。
2、name：
为文本框命名，以备后台程序ASP、PHP使用。
3、value：
为文本输入框设置默认值。
（一般起到提示作用）
举例：
姓名：

密码：
26.文本域，支持多行文本输入
语法：
文本
1、标签是成对出现的，以<textarea>开始，以结束。
2、cols：
多行输入域的列数。