当前位置: 首页 > Web前端 > HTML

html阶段学习总结

时间:2023-04-02 14:43:32 HTML

html:不是编程语言,而是标记语言。使用.html和.htm作为HTML文件的后缀;html版本:HTML1.0:1993年6月HTML2.0:1995年1月HTML3.2:1997年1月14日HTML4.0:1997年12月18日HTML4.01(小改进):1999年12月24日HTML5:2014年10月HTML特性:简单性、可扩展性、平台独立性、通用性html与css的关系:HTML是网页内容的载体;CSS样式就是表现;htmlcomment:记录编程思路,讲解业务功能html核心属性:title,id,class,styletitle:描述信息id:唯一标识class:标识一类元素stylestyleblank:无无论文档中出现多少空格或换行,浏览器都会将其解析为空白: <:<>块级元素:特性:独占行空间默认宽度为100%高度由子元素或内容决定可以通过css指定宽度元素:html,body,div,p,h1~h6,ul->li,ol->li,dl->dd/dt,header,footer,nav,article,section,aside,address内联元素:特点:与其他内联元素共用一行空间宽高由自己决定由于不是用来构建网页结构的,所以不需要通过css指定它的宽度内联元素不能嵌套块元素元素:span,a,img,strong,b,i,em,sub,sup块级元素和行内元素的区别:1.经典:块级元素独占一行,行内元素与其他元素共用一行。2、宽高:可以直接在块级设置宽高,但是不能直接在行中设置宽高。您需要通过显示更改元素属性来设置。(img,inputspecialin-line,replacementelement)3.块级元素可以包含块级和行内,行内只能包含行内。基本标签的使用:h标签:h1标签很重要,它会影响页面在搜索引擎中的排名,一个页面最好只写一个h1标签eg:

Thisisanh1tag

p标签:p标签中的文字会占一行,段落之间会有空隙eg:

br标签:不另起一段,换行hr标签:产生分隔符页面中的行字符实体:空格<<>""&&''img标签:alt:可用于设置图片无法显示时对图片的描述title:用于告诉浏览器当鼠标悬停时,弹出描述框需要显示的内容eg:注意:1.pxunit名称为pixel,相对长度单位,像素px是相对于显示器的屏幕分辨率的。像素的使用非常广泛。2.如果没有设置img标签的宽高,图片会以默认样式显示,如果设置了宽高,img会按照设置的宽高显示。3、有时设置img的宽高会使图片变形。这时候只需要设置宽度或者高度其中一个,另一个会按比例调整。4.一般情况下,除了自适应页面,不建议设置宽高。5.与h标签和p标签不同,img标签不占一行a标签:控制页面间的跳转target:用于控制如何跳转self:用于在当前tab中跳转,即do不创建新页面跳转,默认为_self_blank:用于在新标签中跳转,即创建新页面跳转注意事项:1.一个标签不仅可以让点击文字,还可以点击图片2、a标签必须有href属性,否则a标签不知道跳转到哪里3、如果通过a标签的href属性指定URL地址,必须加上http://或https:/在地址前/除了URL地址,还可以指定本地地址eg:百度mailto链接:html链接,可以设置你电脑默认的邮件发送信息eg:Email基本标签:统一指定如何打开当前页面中的所有标签注意事项1.base标签必须写在head标签之间。2.如果既在base中指定了target,又在a标签中指定了target,那么浏览器会按照a标签中指定的方式执行eg:Falselink:1.#直接返回2.javascript:不会自动回到页面顶部回到顶部点我锚点:注意点:1.通过我们的a标签跳转到指定位置,没有过多的动画,一下子直接跳转到指定位置2.除了a标签跳转到指定位置之外当前界面的跳转,也可以在跳转其他界面跳转到其他页面时,直接跳转到其他界面的指定位置:跳转在当前页面跳转:跳转我在中间

em:Emphasis,用来突出文章的重点strong:表示强调,内容比较有用b:粗体i:斜体u:下划线video(播放视频):src:告诉video标签播放视频地址autoplay:用来告诉video标签是否自动播放videocontrols:用来告诉video标签是否需要控制条视频播放后静音:静音eg1:``eg2:audio(播放音频)有3个不能用的属性,height/width/posterHTML5添加了语义标签:header:具有引导和导航功能的结构元素,通常用于放置整个页面或页面内的一段内容部分的标题,但也可以包含搜索表单或logonav:一组用于页面导航的链接,其中导航元素链接到其他页面或当前页面文章的其他部分:代表一个独立的、完整的文档、页面或应用程序,可以被自身外部引用,也可以嵌套。它可以是博客或报纸文章、论坛帖子、用户评论或独立插件,或任何其他独立内容部分:Html文档独立功能旁白:表示当前页面或文章的辅助信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航栏以及与主要内容不同的其他类型的部分。footer:其上层父内容块或根块的脚注地址:用于呈现文档中的联系信息,包括文档作者或文档维护者的姓名figure&figcaption:figure元素用于表示一个独立的块网页上的内容,从网页中移除上述移除后,不会对网页上的其他内容产生任何影响。figure元素表示的内容可以是图片、统计图表或代码示例,也可以是音频插件、视频插件、统计表等。figcaption元素表示figure元素的标题,属于figure元素,必须写在figure元素内部。一个figure元素中只允许有一个figcaption元素,但允许有多个其他元素。details:标识元素内部的子元素可以展开,显示的元素可以收缩。详情元素不仅可以放置文字,还可以放置表格、插件或为统计图表提供的明细数据表格。open属性:当属性值为true时,元素内部的子元素应该展开显示;当该属性值为false时,内部子元素应该收缩不显示。默认值为falsesummary子元素:summary元素从属于details,当用鼠标点击summary元素中的内容文本时,details元素中的其他所有从属元素都会展开或收缩。如果details元素中没有summary元素,浏览器将提供默认文本(详细信息)供点击。功能元素列表标签:给一串数据添加列表语义,即告诉搜索引擎告诉浏览器这串数据是一个整体的无序列表:ul>li注:1.ul标签用于给一堆数据添加列表语义,而不是给它们添加小圆点2.ul标签和li标签是一个整体,一个组合。所以一般情况下,ul标签和li标签是一起出现的,不会单独出现。也就是说,一个ul标签或者一个li标签都不会单独使用,要一起使用。3、由于ul标签和li标签是一个组合,所以不建议在ul标签中包含其他标签,也就是说,以后在ul标签中只会看到li标签的有序列表:addlist语义到一堆数据,这堆数据中的所有数据都有一个序列有序列表样式:1默认值。有序的数字列表。(1,2,3,4)按字母顺序排列的有序列表,小写。(a,b,c,d)A按字母顺序排列的有序列表,大写。(A,B,C,D)i罗马字母,小写。(i,ii,iii,iv)I罗马字母,大写。(I,II,III,IV)定义列表:给一堆数据添加列表语义,先通过dt标签定义列表中的所有标题,然后通过dd标签为每个标题添加描述信息注释1.和ul一样/ol,dl和dt/dd是一个整体,所以一般不会单独出现,都是一起出现2.和ul/ol一样,由于dl和dt/dd是一个组合标签,所以在dl中建议只放dt和dd标签。3.一个dt可以没有对应的dd,也可以有多个对应的dd,但是不管有没有dd都不推荐使用。4.建议使用一个dt对应一个dd5.和li标签一样,当我们需要丰富界面的时候,可以在dt和dd标签中继续添加其他标签table标签:用于添加表格语义给一堆数据,以一种形式呈现数据注意:table标签有一个border边框属性,这个属性决定了边框的宽度。默认情况下,该属性的值为0,因此您看不到边框。表格标签与列表标签相同。是组合标签,所以table/tr/td要么一起出现,要么不一起出现,更不会单独出现。表格宽高:默认根据内容大小调整手动更改:表格宽高单元格宽高:td的宽高(内联样式:style="color:red;background-color:white”优先级最高)表格中单元格的水平和垂直对齐方式:Horizo??ntal:aligntable(表格水平对齐),tr,td(当前单元格内容水平对齐)Vertical:valigntr,td(单元格中的内容,垂直方向的对齐方式。)表格的外边距和内边距属性:cellspacingoutermargin:单元格与单元格之间的距离,默认为2pxcellpaddinginneredgeDistance:间隙单元格边框与文字之间(调整表格中内容与边框的距离)默认为1px单元格合并:colspan横向合并单元格,合并列rowspan垂直方向合并单元格,即合并行formform:表单元素必须写成`````基本表单元素纯文本输入框密文输入框加密操作单选按钮checked默认选中互斥操作:give每个单选框必须设置相同的name属性,也必须设置相同的值。多选框提交按钮功能:将表单中填写的数据提交到远程服务器。(action属性:服务器地址)【注:如果要向后台提交表单数据,表单元素需要有name属性。】普通按钮图片按钮重置按钮清除表单已经存在的filleddatahttp协议:http协议是一种超文本传输??协议,常用于BS架构中,规定了网络中数据传输的协议。HTTP是一种协议(通信协议),可以访问HTML等Web资源。它是Web上数据交换的基础,是一种客户端-服务器协议,即请求通常由浏览器等接收方发起。HTTP数据包有两种类型:请求数据包和响应数据包。顾名思义,请求消息是客户端向服务器发送请求的信号,响应消息是服务器处理响应后返回给客户端的信号。请求消息:浏览器会将前端请求封装成请求消息发送给后端。请求消息包含请求行、请求头和请求体。响应消息:服务器接收到前端的请求,将响应内容封装成响应消息,浏览器解析响应消息并显示。响应消息包含响应行、响应头、响应体GET/index.phpHTTP/1.1,GET是请求方法,/index.php是URL,HTTP/1.1表示使用的HTTP版本是1.1。请求方式get请求和post请求有什么区别?面试题get传输数据量小url后面携带参数无请求体无数据保密性/index.php?id=100&slec=yespost传输数据量大请求体携带参数数据保密性强(swagger-login/register)cookie在电脑本地记录用户的偏好,当用户下次浏览同一个网页时,会在电脑本地获取cookie,用于偏好筛选和推荐。RequestheaderHost:请求的主机名,允许多个域名在同一个IP地址,即一个虚拟主机。例如:百度----sp1.baidu.com。空行用作请求标头和请求正文之间的内容拆分。请求体包含请求携带的数据,所以get没有请求体。响应消息:状态行、响应头、空行、响应体状态行告诉前端请求是否正确。如果错误,通过状态码分析错误原因,调整bug200成功。4XX前端请求错误,url/请求数据格式错误/语法错误/...5XX服务器端错误,联系后台人员解决响应头Content-Type:返回的资源类型(MIME);连接方式:连接方式;close/keep-aliveclose:连接关闭;keep-alive:连接关闭Hold,等待本次连接的后续请求;一个空行分隔响应头和响应体响应体返回数据和响应信息给前端