HTML+CSS基础知识点.docx
- 文档编号:30170711
- 上传时间:2023-08-05
- 格式:DOCX
- 页数:15
- 大小:151.83KB
HTML+CSS基础知识点.docx
《HTML+CSS基础知识点.docx》由会员分享,可在线阅读,更多相关《HTML+CSS基础知识点.docx(15页珍藏版)》请在冰豆网上搜索。
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.强调标签比较
和标签是为了强调一段话中的关键字时使用,它们的语义是强调。
标签是没有语义的,它的作用就是为了设置单独的样式用的。
注:
span{color:
blue;}
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、
2、cols:
多行输入域的列数。
3、rows:
多行输入域的行数。
4、在
标签之间可以输入默认值。 举例:
在这里输入内容... 27.使用单选框,复选框,让用户选择
html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选
语法:
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:
提交数据到服务器的值(后台程序PHP使用)
3、name:
为控件命名,以备后台程序ASP、PHP使用
4、checked:
当设置checked="checked"时,该选项被默认选中
注意:
同一组的单选按钮,name取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
28.使用下拉列表框,节省空间
讲解:
1、value:
2、selected="selected":
设置selected="selected"属性,则该选项就被默认选中。
29.使用下拉列表框进行多选
下拉列表也可以进行多选操作,在
如下代码:
30.使用提交按钮,提交数据
语法:
type:
只有当type值设置为submit时,按钮才有提交作用
value:
按钮上显示的文字
注:
在type中只有submit是用来提交表单的,button只是一个按钮...不能提交表单。
31.使用重置按钮,重置表单信息
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。
只需要把type设置为"reset"就可以
语法:
type:
只有当type值设置为reset时,按钮才有重置作用
value:
按钮上显示的文字
32.form表单中的label标签
语法:
注意:
标签的 for属性中的值应当与相关控件的 id属性值一定要相同。
32.认识CSS样式
CSS全称为“层叠样式表(CascadingStyleSheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
如下列代码:
p{
font-size:
12px;
color:
red;
font-weight:
bold;
}
33.CSS注释代码
用/*注释语句*/来标明(Html中使用
--注释语句-->)
34.CSS代码语法
css样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
选择符:
又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:
在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:
”分隔。
当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{font-size:
12px;color:
red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
font-size:
12px;
color:
red;
}
35.内联式CSS样式,直接写在现有的HTML标签中
从CSS样式代码插入的形式来看基本可以分为以下3种:
内联式、嵌入式和外部式三种。
这一小节先来讲解内联式。
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
red">这里文字是红色。
注意要写在元素的开始标签里,下面这种写法是错误的:
这里文字是红色。
red">
并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
如下代码:
red;font-size:
12px">这里文字是红色。
36.内联式css样式,直接写在现有的HTML标签中
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
red">这里文字是红色。
注意要写在元素的开始标签里,下面这种写法是错误的:
这里文字是红色。
red">
并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
如下代码:
red;font-size:
12px">这里文字是红色。
37.嵌入式css样式,写在当前的文件中
嵌入式css样式,就是可以把css样式代码写在
标签之间。 如下面代码实现把三个标签中的文字设置为红色:
span{
color:
red;
}
嵌入式css样式必须写在之间,并且一般情况下嵌入式css样式写在
之间。38.外部式css样式,卸载单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在
内(不是在