一个web初学者的笔记总结黎明前D黑暗

1.纯文本语言,javascript、css、java、txt、html,纯文本只有文本内容,无法记录文本样式。

2.html(hyperTextMarkupLanguage),超文本标记语言,就是通过标签对,给纯文本添加语义,实际上其实是用文本文本添加语义,并且可以添加图片、链接、视频等,一对对的标签成了标记,所以构成了“超文本标记语言”。

4.字符集采用meta标签定义,meta表示“元”配置,表示基础的配置项目,charset就是字符集。

5.常用的两种字符集:utf-8.全球国际通用,里面涵盖了所以人类语言,一个汉字3个字节,保存尺寸大,加载慢。gb2312.是国标,是中国的字库,里面仅仅涵盖了汉字和常见的英文,一个汉字2个字节,保存尺寸小,加载快。

6.meta出了可以设置字符集,还可以设置关键字和页面描述,description设置页面描述;keyword关键字,告诉搜索引擎,这个网页做什么的,能提高搜索效率,让别人能快速找到。

7.html对换行不敏感,对tab不敏感,不是依靠缩进来表示嵌套的,就是看标签的包裹关系,但是我们发现良好的缩进,代码更加易读,要求大家正确的缩进标签。

8.html中所以文字,如果有空格,换行,tab都会被折叠成一个空格显示。

9.html的标签有两种类型,容器级和文本级;容器级的标签里面可以存放任何东西,文本级的标签只能放文字,图片,表单元素。

10.自封闭标签,也称为单标签,因为没有反标签。

11.链接的target=_blank属性:如果没有在相同的标签打开,如果有,就在新的空白标签中打开,并且跳转的标签页还存在。

css部分

1.列表有三种:无序列表,有序列表,自定义列表。无序列表(unorderedlist):用来表示一个列表语义,并且每个项目之间不分先后顺序。有序列表(orderedlist):一般很少使用有序列表,基本使用无序列表。自定义列表:dl(definitionlist)定义列表,dd(definitiontitle):定义标题,dd(definitiondescription):定义表述词。

2.div(division)和span是盒子模型最重要的标签之一,div中的所有元素是一块区域,div是容器级的标签;span是文本级标签。

3.html负责结构,css负责样式,js负责行为。

4.标签选择器,使用html中的标签当选择,所有标签都能当选择器,选择的是所有,而不是某一个,是共性,不是特性。

5.类选择器,类就是class属性,任何标签都可以有class属性,class属性可以重复使用,一个标签可以属于多个类,用空格隔开。

6.id选择器,任何标签都可以有id,id命名以字母开头,可以有字母、数字、大小写严格区分;同一个页面不能重复,即使是不一样的标签,也不能有相同的id。在css中尽可能使用class,除非特殊才有id,id是js用的,js通过id属性得到标签。

7.一个标签可以同时被多种选择器选中,这些选择器可以选上同一个标签,来控制标签的内容(html),动作(js),排版(css)。

8.后代选择器,是一种共性、特性的平衡,当要把某个部分的所有的内容,进行样式改变,就要想到后代选择器。

9.交集选择器,要满足两个条件,必须都是同一个标签,必须有同一个类选择,可以连续交。

10.并集选择器,用逗号隔开就是并集选择器。

11.通配符,*代表所有的元素,效率不高,所以使用频率不多。

12.同一个标签有多个类名,有冲突,通过!important提高一个属性的权重;!important提升的是一个属性,而不是选择器,无法提升继承的权重,不影响就近原则。

13.盒子模型:一个模型主要有5个:width,height,padding(内边距),margin(外边距),border。

14.边框的三要素:粗细,线性,颜色;线性.dashed、dotted、solid、double、groove、ridge、inset、outset。

15.html将标签分为容器级和文本级,容器级有div、dt、dd、h、li。文本级有p、b、span、a、em、i、u。css将标签分为块级元素和行内元素,块级元素有div、p、dt、dd、h、li,行内元素有b、span、a、em、u、i。

16.块级元素:霸占一行,不能与其他任何元素并列;能接受宽高;如果不设置宽度,默认为父亲的100%。行内元素:与其他行内元素并排;不能设置宽高,默认是文字的宽度。

17.Display:”显示模式”,用来修改元素的行内、块级的性质

Inline就是“行内”

一旦给当前一个便签设置display:inline这个标签立刻改变为行内元素与span类似没有区别

一旦给当前一个便签设置display:block这个标签立刻改变为块级元素与div类似没有区别

18.清除浮动

1.clear:both(表示当前自己内部的元素不受其他盒子的影响)

2.overflow:hidden(超出范围就隐藏)

3.浮动的元素,只能被有高度的盒子高度,如果盒子的内部有浮动,那么浮动会在一定范围内互相影响(加高法)。

19.css中任何文本都有行高(line-height),行的高度,必须有元素对应的高度,才能使用。

20.text-indent:2em,首行空两个汉字的格,单位em,indent缩进的意思。

21.font-size(尺寸)line-height(行高)font-family(字体);页面中,中文使用:微软雅黑,宋体,黑体。需要其他字体,需要切图。英文:Arial、TimesNewRoman。

22.超链接的伪类

:link表示,用户没有点击过这个链接的样式。是英语“链接”。

:visited表示,用户访问过这个链接的样式。是英语“访问过”。

:hover表示,用户鼠标悬停时候的样式,是英语“悬停”。

:active表示,用户用鼠标点击过这个链接,但不松手,此时的样式。是英语“激活”。

23.z-index,只有定位的元素才有这个属性,不管是绝对定位,还是相对定位,数值大的在上面,float不能使用。

javascript部分

1.html结构层,从语义上来说,描述页面的结构。

css样式层,从审美的角度,美化页面

js行为层,从交互的角度,提升用户体验。

2.布兰登·艾奇(BrendanEich,1961年~),JavaScript之父JavaScript,js诞生于1995年。

4.js是前台语言,而不是后台语言;后台语言运行在服务器上,前端运行在客户的电脑里面。

5.程序由上到下依次执行,执行完上面的才执行下面的。

6.javascript对换行、缩进、空格不敏感。注意:每一条语句末尾都要加分号,虽然分号不是必须加的,如果不加分号,压缩过后不能运行。

7.直接量也叫字面量,数值的直接表达就是直接写上去,不需要任何的符号。字符串一定要加引号。

8.变量的命名规则:只能由字母、数字、下划线、美元($)符号构成,且不能以数字开头,严格区分大小写,不能使用空格,长度不能超过225个字符,还不能是js的保留字。

9.连接符和加号,如果加号两边是数值,就是加号,否则就是连接符。

10.运算符有:数学运算符,逻辑运算符、自增运算符等。

11.Math.pow(乘方),Math.sqrt(开根号)。

12.alert():提示框,prompt():输入框,parseInt():只能保留开头的数字,后面的自动消失,console.log(在控制台输出),document.write():文档打印输出,document文档对象,不可省略。

13.if:选择结构语句,给程序添加多个执行路线,for:循环语句,将结构类似的语句重复执行。

15.常用的事件名

onclck:鼠标单击

ondblclick:鼠标双击

onkeyup:按下并释放键盘上的一个键时触发

onchange:文本内容或下拉菜单中的选项发生改变

onfocus:获得焦点,表示文本框等获得鼠标光标

onfocus:失去焦点,表示文本框等失去鼠标光标

onmouseover:鼠标悬停,即鼠标停留在图片等的上方

onmouseout:鼠标移出,即鼠标离开图片等所在的区域

onload:网页文档加载事件

onunload:关闭网页时

onsubmit:表单提交事件

onreset:重置表单

16.事件三要素:事件源,事件,事件处理程序

17.隐藏样式

Display:none;display:block;显示的意思

Visibility:hidden;visibility:visible显示的意思

Display隐藏不占位置

Visibility:hidden隐藏占有位置停职留心

Overflow:hidden;隐藏超出的部分

18.入口函数

window.onload=function(){

内部放js代码

}

这个函数,当我们的页面加载完成之后,采取执行函数体里面的内容的JS部分。页面的结构样式、节点加载完成之后,执行当前这个函数。

19.js数据类型:数值型(number),利用Number()转换为数值型;布尔型(BOOLean),利用!!转换成布尔类型;字符串(string)利用String

THE END
1.网页设计(HTML+css)笔记网页设计笔记网页设计(HTML+css)【笔记】 一、互联网基本概念 1、关于WWW: 1)WWW是World Wide Web的缩写,常翻译为 “万维网” 、 “环球信息网”等,简称为Web、 WWW、3W、W3等。 2)它分为Web客户端和Web服务器程序。 3)3W可以让Web客户端(一般为浏览器)访问 浏览Web服务器上的页面。https://blog.csdn.net/weixin_52102581/article/details/134156209
2.网页制作——笔记网页制作——笔记 代码…… ※一、什么是网站?网站以网页的区别 网页是可以包括文字、图片、动画、视音频等内容的一个基于HTML标准的页面。而网站就是Webmaster将不同内容的网页按一定规律组合在一起,并互相加有超级链接的网页集群。 ※二、网站的访问机制https://www.jianshu.com/p/257b8e9fdc84
3.WebUI设计理论学习笔记Web UI设计理论学习笔记 web-ui是什么--网页的界面设计 UI就是用户界面,包括三个方向:用户研究,交互设计,界面设计。 WUI是网页用户界面。wui设计与常见网站建设的区别是,wui注重人与网站的互动和体验,以人为中心进行设计。 关于屏幕分辨率 确定计算机批屏幕上显示多少信息的设置,以水平和垂直像素来衡量。显示分辨率https://www.imooc.com/article/20171
4.网页设计5(学习笔记)在最新版Photoshop网站Web预设尺寸给了我们一些启示:常见尺寸(1366x768px)、大网页(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。这些是主流尺寸,而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的https://maimai.cn/article/detail?fid=592065474&efid=x8R687acOurcKppWYmUMGw
5.一份Web网页设计总结,请查收对于正在学习 Web网页设计的设计师们和爱好者们或许会需要一份全面的 Web 网页设计总结,这里有一份我整理的总结,说不定会帮到你,让你在工作中脱颖而出。本文不仅会详细讲述Web网页的定义,还会从网页设计的全流程、种类以及要素角度解答你的困惑,同时,在最后为大家带来网页设计规范,比如排版设计规范、文字设计规范、https://js.design/special/article/web-page-design-summary.html
6.《瞬间之美》读书笔记:Web界面设计如何让用户心动?今天跟大家分享的是《瞬间之美》之Web 界面设计如何让用户心动? 本书分为七个部分,第一部分到第三部分讲用户进入网站前30秒内做的事;第四部分到第六部分讲用户在深入网站时要做的事;第七部分关注用户离开网站,不管是暂时离开还是永久离开时要发生的事。 https://www.uisdc.com/design-moments-web-design/
7.HTML网页设计基础笔记?第8章页面布局与规划HTML网页设计基础笔记 ? 【第8章 页面布局与规划】,全部章节>>>本章目录8.1表格布局8.1.1表格布局8.2流式布局8.2.1瀑布流布局8https://blog.51cto.com/vmuu/5041628
8.web技术学习笔记和分享学习用途,个人开发,用于学习前端,java,python.主要用于这些技术的相关笔记记录,测试和技术分享http://kirk.wang/notes/canvas/15.html
9.webHTML学习笔记web-HTML学习笔记 一、link 知识点:target属性:view_window、view_frame、_blank、_self、_parent、_top 1、view_window (1)开始页面如下图 (2)点击A链接打开新窗口如下图 (3)回到开始页面,再次点击B_1链接,在打开的A窗口中显示B_1窗口如下图https://www.code456.com/article/3582955.html
10.自学考试《网页设计与制作》听课笔记(2)自考串讲笔记7.加强了数据库访问能力,提供了许多设计时控件,使WEB页面与数据库进行联系的能力得到加强。 FrontPage主要功能: 1.创建和管理Web站点;2.制作网页;3.发布站点;4.维护站点。 非商业组织的网站风格: 1.强调页面的主色调; 2.主题图形要求反映单位的风采,设计应有创意、有内涵,庄重中不乏活泼; https://www.hbzkw.com/exam/20081108201606.html
11.10.网页设计·初柒的笔记文档·看云JavaWeb 本文档使用 看云 构建10.网页设计网页设计 1.UI设计什么意思 人机交互,操作逻辑,界面美观 2.网页的定义 我们要根据产品的【功能和定位】向浏览器者传递出一个合适的信息,对网页【功能的策划】【设计的美化】【操作体验】进行一个整体的提升,网页时【对面宣传】【提升品牌形象】的重要表现形式。 2.网站种https://www.kancloud.cn/wpj0220/java/2534620
12.网页设计与制作知识点笔记4.响应式设计 随着移动设备的普及,网页设计需要考虑不同设备上的显示效果。要采用响应式设计的技术,使网页在不同设备上都能够以最佳的方式展示。 总结: 以上是关于网页设计与制作的一些知识点笔记。通过对网页设计的基础知识、工具、布局方式以及设计要点的介绍,我们可以了解到设计一款优秀的网页需要考虑很多方面的因素https://wenku.baidu.com/view/d338a845d6bbfd0a79563c1ec5da50e2534dd1d5.html
13.web网页设计心得(通用13篇)web网页设计心得(通用13篇)2 设计工作是痛苦与快乐的炼狱,每当面临新的设计任务时,因为觉得自己的水平不够,感觉充满了压力,开始搜集各种资料,接下来寻找设计灵感,沉思、焦灼,每当经过艰苦的磨砺,自己的劳动成果得到肯定时,便是工作中最大的快乐!充满了快意。 https://www.yjbys.com/xuexi/xinde/3526339.html
14.web网页设计学习心得(通用18篇)web网页设计学习心得(通用18篇) 当我们经过反思,有了新的启发时,写一篇心得体会,记录下来,从而不断地丰富我们的思想。那么如何写心得体会才能更有感染力呢?以下是小编为大家收集的web网页设计学习心得,仅供参考,大家一起来看看吧。 web网页设计学习心得 1 https://www.ruiwen.com/xuexixinde/6638276.html
15.网页设计知识点(通用6篇)第四节 网页设计的基本流程 一、网站的设计流程 二、网页的设计与制作 三、网页的测试 四、网页上传和发布 第二章 HTML语言基础 6学时 教学目的: 了解HTML文件的基本结构,掌握HTML中文本的编辑及图像的语法,掌握HTML中各种设置超级链接的语法,掌握HTML中表格和框架的基本语法。 https://www.360wenmi.com/f/fileft3mkczy.html
16.笔记之heightminheight的区别详解CSS教程CSS下面小编就为大家带来一篇Web前端新人笔记之height、min-height的区别详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 https://www.jb51.net/css/457104.html