1、HTML+CSS基础知识点HTML+CSS笔记1.学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。(1)HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。(2)CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。(3)JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。2.添加
2、样式如: h1 font-size:12px; color:#930; text-align:center; 3.(1)就是标题标签;是段落标签;我的第一个段落我的第二个段落(2)标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:里嵌套,那么必须放在的前面。4.(1) 称为根标签,所有的网页标签都在中。(2)标签用于定义文档的头部,它是所有头部元素的容器。头部元素有、等标签 (3)在和标签之间的内容是网页的主要内容,如、等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。5.head部分的标签 . . .6.7. 需要强调的文本,在浏览器中 默认用斜体表示需要强调的文本, 用粗体表
3、示:一个想要成名名叫尼克卡拉威(托比马奎尔Tobey Maguire饰)的作家8. 强调标签比较和标签是为了强调一段话中的关键字时使用,它们的语义是强调。标签是没有语义的,它的作用就是为了设置单独的样式用的。 注:span color:blue; 9. 标签,短文本引用 引用文本 “庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的锦瑟 。因为不是作者自己的文字,所以需要使用实现引用。注意:要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。庄生晓梦迷蝴蝶。望帝春心托杜鹃。10. 标签,长文本引用 引用文本11.使用标签分行显示文本需要加回车换行的地方加入,标签作用相
4、当于word文档中的回车 暗淡轻黄体性柔,情疏迹远只香留。何须浅碧深红色,自是花中第一流。 标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有、和。总结:在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入。11.空格:要想输入空格,必须写入 语法: 12.认识标签,添加水平横线13. 标签,为网页加入地址信息联系地址信息14.使用加入一行代码 代码语言;注:如果是多行代码,可以使用标签。语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。15.
5、使用ul,添加信息列表(无序列表):如下图 信息 信息 .ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点16.使用制作有序列表 如下图: 信息 信息 .17. 板块18.认识table标签,认识网页上的表格 创建表格的四个元素:table、tbody、tr、th、td (1):整个表格以标记开始、标记结束。(2):当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。(3):表格的一行,所以有几对tr 表格就有几行。(4):表格的一个单元格,一行中包含几对.,说明一行中就有几列。(5):表格的头部的一
6、个单元格,表格表头。(6)表格中列的个数,取决于一行中数据单元格的个数。19.caption标签,为表格添加标题和摘要摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。标题:用以描述表格内容,标题的显示位置:表格上方。 语法: 标题文本20.使用标签,链接到另一个页面语法:链接显示的文本 例如:click here!上面例子作用是单击click here!文字,网页链接到这个网页。title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容21在新建浏览器窗口中打开链接 标签在默
7、认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。如下代码:click here!22.使用mailto在网页中链接Email地址 标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。下面是一个完整的实例:23.认识标签,为网页插入图片语法:举例:讲解:1、src:标识图像的位置;2、alt:指定图像的描述性文本,当图像不可见时(下载不成功
8、时),可看到该属性指定的文本;3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);4、图像可以是GIF,PNG,JPEG格式的图像文件。24.使用表单标签,与用户交流语法:讲解:1. :标签是成对出现的,以开始,以结束。2.action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method:数据传送的方式(get/post)。 用户名: 密码: 注意:1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间(否则用户输入的信息可提交不到服务器上哦!)2、method:post/get的区别这一部分内容属于后端程序员考
9、虑的问题注:Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法。二者主要区别如下:1、Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。如下形式: 2、Get是不安全的,因为在传输过程,数据被存放在请求的URL地址中,这样就可能会有一些隐私的信息被第三方看到。3、Get方式传输的数据量非常小,一般限制在 2KB 左右,但是执行效率却比 Post 方法好;而 P
10、ost 方式传递的数据量相对较大,它是等待服务器来读取数据,不过也有字节限制,这是为了避免对服务器用大量数据进行恶意攻击,根据微软方面的说法,微软对用 Request.Form()可接收的最大数据有限制,IIS4中为 80KB 字节,IIS5 中为 100KB 字节。综上所述,请尽量用 Post 方法。25.文本输入框,密码输入框语法: 1、type: 当type=text时,输入框为文本输入框; 当type=password时,输入框为密码输入框。2、name:为文本框命名,以备后台程序ASP 、PHP使用。3、value:为文本输入框设置默认值。(一般起到提示作用)举例: 姓名: 密码: 26.文本域,支持多行文本输入语法:文本1、标签是成对出现的,以开始,以结束。2、cols :多行输入域的列数。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1