最新HTML+CSS基础知识点.doc

《最新HTML+CSS基础知识点.doc》由会员分享，可在线阅读，更多相关《最新HTML+CSS基础知识点.doc（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-dateHTML+CSS基础知识点HTML+CSS基础知识点HTML+CSS笔记1.学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。（1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。（2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些

2、用来改变内容外观的东西称之为表现。（3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。2.添加样式如： h1 font-size:12px; color:#930; text-align:center; 3.（1）就是标题标签；是段落标签；我的第一个段落我的第二个段落（2）标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套，那么必须放在的前面。4.（1） 称为根标签，所有的网页标签都在中。（2）标签用于定义文档的头部，它是

3、所有头部元素的容器。头部元素有、等标签 （3）在和标签之间的内容是网页的主要内容，如、等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。5.head部分的标签 . . .6.7. 需要强调的文本，在浏览器中 默认用斜体表示需要强调的文本， 用粗体表示：一个想要成名名叫尼克卡拉威（托比马奎尔Tobey Maguire饰）的作家8. 强调标签比较和标签是为了强调一段话中的关键字时使用，它们的语义是强调。标签是没有语义的，它的作用就是为了设置单独的样式用的。 注：span color:blue; 9. 标签，短文本引用 引用文本 “庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗

4、人李商隐的锦瑟 。因为不是作者自己的文字，所以需要使用实现引用。注意：要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。庄生晓梦迷蝴蝶。望帝春心托杜鹃。10. 标签，长文本引用 引用文本11.使用标签分行显示文本需要加回车换行的地方加入，标签作用相当于word文档中的回车 暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。 标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有、和。总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入。11.空格：要想输入空格，必须写入  语法：

5、 12.认识标签，添加水平横线13. 标签，为网页加入地址信息联系地址信息14.使用加入一行代码 代码语言；注：如果是多行代码，可以使用标签。语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。15.使用ul,添加信息列表（无序列表）：如下图 信息 信息 .ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点16.使用制作有序列表 如下图： 信息 信息 .17. 板块18.认识table标签，认识网页上的表格 创建表格的四个元素：table、tbody、tr、th、td （1）：整个表格以标记开始、标记结束。（2）：当表格内容

6、非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。（3）：表格的一行，所以有几对tr 表格就有几行。（4）：表格的一个单元格，一行中包含几对.，说明一行中就有几列。（5）：表格的头部的一个单元格，表格表头。（6）表格中列的个数，取决于一行中数据单元格的个数。19.caption标签，为表格添加标题和摘要摘要：摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。标题：用以描述表格内容，标题的显示位置：表格上方。 语法： 标题

7、文本20.使用标签，链接到另一个页面语法：链接显示的文本 例如：click here!上面例子作用是单击click here!文字，网页链接到这个网页。title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容21在新建浏览器窗口中打开链接 标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。如下代码：click here!22.使用mailto在网页中链接Email地址 标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：注意：如

8、果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。下面是一个完整的实例:23.认识标签，为网页插入图片语法：举例：讲解：1、src：标识图像的位置；2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；4、图像可以是GIF，PNG，JPEG格式的图像文件。24.使用表单标签，与用户交流语法：讲解：1. ：标签是成对出现的，以开始，以结束。2.action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.meth

9、od：数据传送的方式（get/post）。 用户名: 密码: 注意:1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上哦！）2、method:post/get的区别这一部分内容属于后端程序员考虑的问题注：Form中的get和post方法，在数据传输过程中分别对应了GET和POST方法。二者主要区别如下：1、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传

10、递到action所指向URL。如下形式： 2、Get是不安全的，因为在传输过程，数据被存放在请求的URL地址中，这样就可能会有一些隐私的信息被第三方看到。3、Get方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，根据微软方面的说法，微软对用 Request.Form()可接收的最大数据有限制，IIS4中为 80KB 字节，IIS5 中为 100KB 字节。综上所述，请尽量用 Post 方法。25.文本输入框，密码输入框语法： 1、

11、type： 当type=text时，输入框为文本输入框; 当type=password时,输入框为密码输入框。2、name：为文本框命名，以备后台程序ASP 、PHP使用。3、value：为文本输入框设置默认值。(一般起到提示作用)举例： 姓名： 密码： 26.文本域，支持多行文本输入语法：文本1、标签是成对出现的，以开始，以结束。2、cols ：多行输入域的列数。3、rows ：多行输入域的行数。4、在标签之间可以输入默认值。举例： 联系我们 在这里输入内容.27.使用单选框，复选框，让用户选择html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用

12、户可以任意选择多项，甚至全选语法：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属性

13、，则该选项就被默认选中。29.使用下拉列表框进行多选 下拉列表也可以进行多选操作，在标签中设置multiple=multiple属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用Command+单击），可以选择多个选项。如下代码：30.使用提交按钮，提交数据 语法：type：只有当type值设置为submit时，按钮才有提交作用value：按钮上显示的文字注：在type中只有submit是用来提交表单的，button只是一个按钮.不能提交表单。31.使用重置按钮，重置表单信息 当用户需要重置表单信息到初始时的状态时，比如用户输入“用户

14、名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为reset就可以语法：type：只有当type值设置为reset时，按钮才有重置作用value：按钮上显示的文字32.form表单中的label标签 语法：注意：标签的for 属性中的值应当与相关控件的id 属性值一定要相同。32.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p font-size:12px; color:red; font-weight:bold;33.

15、 CSS注释代码 用/*注释语句*/来标明（Html中使用)34.CSS代码语法 css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。声明：在英文大括号“”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：pfont-size:12px;color:red;注意：1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如

16、下所示：p font-size:12px; color:red;35.内联式CSS样式，直接写在现有的HTML标签中从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：这里文字是红色。注意要写在元素的开始标签里，下面这种写法是错误的：这里文字是红色。并且css样式代码要写在style=双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：这里文字是红色。36.内联式css样式，直接写在现有的HTML标签中内联式css样式表就是把css代码直接

17、写在现有的HTML标签中，如下面代码：这里文字是红色。注意要写在元素的开始标签里，下面这种写法是错误的：这里文字是红色。并且css样式代码要写在style=双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：这里文字是红色。37.嵌入式css样式，写在当前的文件中嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：spancolor:red;嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。38.外部式css样式，卸载单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，如下面代码：注意：1、css样式文件名称以有意义的英文字母命名，如 main.css。2、rel=stylesheet type=text/css 是固定写法不可修改。3、标签位置一般写在标签之内。-