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

HTML总结要点和常见面试题

时间:2023-04-04 23:17:08 HTML5

1.什么是HTML?HTML是超文本标记语言,不是编程语言2.什么是CSS?CSS是一种层叠样式表,一种用于修改文档的语言。文档以更优雅的形式呈现给用户三、HTML、CSS、JavaScript的关系html、css、js是网页的三要素html:网页框架的构建结构css:样式设置页面js:对应用户操作的事件、动态、行为4、VSCode软件下的快捷键:注:ctrl+/换行:ctrl+enter生成文件结构:shift+!回车直接写HTML:5回车5.HTML页面结构详解(一)HTML5标准网页声明,如果不加这行,则表示该页面采用浏览器的解析标准本身,这将导致页面在不同的浏览器中显示不同。h5文档声明当前网页是按照html5标准编写的。如果不写文档语句,有些浏览器会进入一种怪异的模式。进入怪异模式后,浏览器会解析页面,页面无法正常显示。因此,为了避免进入这种模式,必须写文档声明。(2)a.html为根标签,一个页面中只有一个根标签,网页中的所有内容都要写在html根标签b中。属性lang是language的缩写,意为语言,en代表英文,zh—CN代表中文c.html根标签中只有两个子标签,head:浏览器设置,body:可视区域显示(3)head标签中的内容不会直接显示在网页上,它用来帮助浏览器解析页面(4)a.meta标签用来设置网页的一些元数据,比如网页中的字符集、关键字、介绍b.meta是一个自闭标签。写自闭标签时,可以加一个c。开始标签的字符编码:浏览器会根据字符编码进行解析。常见的字符编码有:gb2312、gbk、unicode、utf-8(5)a.viewport:设备的屏幕b.width=device-width:width属性控制屏幕设备的宽度。如果您的网站将被不同屏幕分辨率的设备浏览,将其设置为device-width可以确保它可以在不同的设备上正确呈现。c.initial-scal=1.0:确保网页加载时,以1:1的比例呈现,不做任何缩放。(6)浏览器选项卡上的名称(7)设置网页的主要内容,网页中所有可见的内容都要写在body中,在body内容显示在浏览器的视口中。6、实体空间:小于号:<大于号:>版权所有:©注册商标:®7、块级元素(1)功能:构建网页结构(2)常用元素:htm、body、div、p,ht~h6,ul->li,ol->li,dl->dd/dt,header,footer,nav,artice,section,aside,adderss,(3)特征:a.占用一行空间B.默认宽度为100%(如果有父元素,则相对于父元素,如果没有,则相对于浏览器)c.高度由子元素或内容决定(支持)d.它的宽度可以由csse指定。块级元素块级元素和行内元素可以嵌套8.行内元素(1)作用:在结构中填充网页内容(2)常用元素:span,a,img,strong,b,i,em,sub,sup...(3)特点:a.与其他行内元素共享一行空间b.高度由自身决定c.由于不需要构建网页结构,所以不需要通过css指定其宽度d.alabela:linkexternalorinternalURLhref="relativepath./..//Absolutepath:http://ip:portnumber/project/filename"(https://)经典应用:锚点定义锚点,链接锚点1.给一个跳转按钮,也是触发跳转的按钮回到顶部返回顶部2.跳转到的位置:找到我

3.返回顶部target:定义点击后加载页面的位置。默认值_self_blankopeninanewwindow/newtabpagee.imgtagimg:putpicturesrcputpictureaddresswidthpictureWidthheight图片高度alt图片加载出现问题时显示给用户的图片内容titleText当鼠标悬停Tip9.块级元素和行内面试题的区别(80%)(1)。经典:块级元素占一行,行内元素与其他元素共用一行(2)。宽高:块级可以直接设置宽高,行中不能直接设置宽高(3)img和input是特殊的行内元素,也称为替换元素。img和input可以设置宽高,但是对于行内元素,需要用display改变元素属性来设置(4)。块级元素可以包含块级元素与inline不同,inline只能包含inline10.web的第一门编程语言,JavaScript11。列表元素(1)无序列表:给一堆数据加上列表语义,这串数据中的所有数据都不是顺序的a.ul,li相当于班级和同学的关系,城市b.
  • c.typevaluediscsoliddefaultvaluecirclehollowhollowsquaresolidsquare(2)有序列表:给数据添加列表语义,开始所有数据在这个这堆数据有一个优先级(排名列表)a.
  • b.typevalue:number大写字母小写字母罗马字母uppercase罗马字母小写(3)定义列表:dl-dt/dd(没那么重要)先通过dt标签定义列表中的所有标题,然后通过dd标签为每个标题添加描述信息12.表格标签(1)一对表格标签是一个表格(2)一对tr标签是表格中的一行(3)一对td标签是一行中的一个单元Grid(4)
    Content
    (5)注:a.table标签有一个border边框属性,它决定了边框的宽度。默认情况下该属性的值为0,所以看不到边框b。table标签和list标签一样,是组合标签,所以table/tr/td要么一起出现,要么不一起出现,不会单独出现c.如果为td标签设置widht/height属性属性,会修改当前单元格的宽高,不会影响整个表格的宽高d.表格的宽高:默认是根据内容大小调整,手动更改表格的width/height属性e。unit单元格的宽高:td的宽高(inlinestyle:style="color:red;background-color:red";)(6)tablelevel中单元格的水平和垂直对齐方式:aligntable(水平对齐ofthetable),tr(当前单元格内容的水平对齐方式),td(当前单元格内容的水平对齐方式)Vertical:valigntr/td(当前单元格内容的垂直对齐方式)(7)表格的外边距和内边距属性a.cellspacingoutermargin:单元格与单元格之间的距离默认为2pxb.cellpaddinginnermargin:单元格边框与文本的间隙(调整表格内容与边框的距离)通过默认为1px(8)单元格合并a.colspan水平单元格合并,列合并b.rowspan垂直单元格合并,行合并3.form表单(1)注意:表单元素必须写在表单中(2)基本表单元素a.纯文本输入框name:表单提交时,作为参数的名称,与输入值结合用于匹配,形成参数名=参数值占位符的结构:提示b。密文输入框的加密操作c.单选按钮互斥操作:为每个单选框设置相同的name属性,也必须设置相同的值checked:默认选中d.多选框勾选:默认选中e.提交按钮功能:将表单中填写的数据提交到远程服务器,并交出服务器地址(action属性:服务器地址)注:如果你想向后台提交表单数据,表单元素需要有name属性f.普通按钮g.图片按钮h.Reset按钮清除表单中填写的数据