• 前端开发面试题-html篇

    script标签为什么要放在body标签的底部

    因为浏览器在渲染html的时候,从上往下依次执行,遇到js文件就会停止当前页面的渲染,转而去下载js文件,如果将script标签放在头部,如果文件又很大的情况下,首屏时间就会延长,影响用户体验
    解决方法:将script标签放到body的底部,通过defer/async属性将js文件转为异步下载

    附加小知识1:在渲染的过程中遇到js就会停止渲染,执行js,执行完成后,从DOM中断的地方继续渲染,
    附加小知识2:defer/async都是异步加载,步阻塞页面的渲染.主要区别是 加载完成后是否立即执行,defer是等DOM渲染完成后执行,async则是加载完立即执行.如果两个同时设置,以async为准.

    src和href的区别


    href是超文本引用,它指向资源的位置,建立与目标文件之间的联系.
    src目标是把资源下载到页面种,浏览器解析方式href不会阻塞对文档的处理(这就是官方建议使用link引入而不是@import),src会阻塞文档的处理,原理同上面1

    DOCTYPE标签


    这个声明的目的是防止浏览器在渲染文档时,这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“",确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。 Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。 严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
    混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

    html种引入js


    使用标签script 

    <script src="path">script>

    • 1

    html中引入css


    采用链接的方式在html中的head标签中引入css文件 

    <head>
<link rel="stylesheet" type="text/css" href="path">
head>
#rel 属性表示引入的是一个什么文件,这里表示引入的是一个外部样式表

    • 1
    • 2
    • 3
    • 4

    Document对象

    HTML DOM结点:html dom模型中每个元素都是结点.
    文档是一个文档结点;html元素是元素结点; 属性结点;文本插入到html中是文本结点;注释是注释结点;
    document对象:当浏览器载入html文档,它就会成为Document对象.
    Document对象是html文档的根节点
    Document对象使我们可以从脚本中对HTML页面中所有的元素进行访问.
    *附加小知识:*Document对象使window对象的一部分,可以通过window.document属性对其进行访问.
    通过document访问页面内的元素,document.documentElement 返回html dom中的root结点 即.
    document.body返回html dom中的body结点 即
    在这里插入图片描述

    常用的meta标签属性


    meta标签由name和content属性定义,用来描述文档的属性,比如网页的作者,网页描述,关键词等 

    <meta charset="UTF-8"/> #用来描述html文档的编码类型
<meta name="keywords" content="关键词"/> #keywords页面关键词
<meta name="description" content="页面描述内容"/> #description页面描述
<meta http-equiv="refresh" content="0;url="/> #refresh 页面重定向和刷新
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> #viewport适配移动端,可以控制视口的大小和比例
width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

<meta name="robots" content="index,follow" /> #搜索引擎索引方式
content 参数有以下几种：

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    块元素,行内元素,行内块元素


    常见的块元素:div, p, h1~h6, ul-li, nav, aside, header, footer, section, article
    常见的行内元素：span, b, i, sub, sup,
    常见的行内块元素：img, input , td

    常用的html标签

    #标题标签
<h1>h1>
<h6>h6>

#段落和换行标签
<p>p>  段落标签,根据屏幕尺寸进行换行
br>    换行

#文本格式化标签--推荐使用strong加粗,em倾斜,del删除,ins下划线
<strong>strong>
<em>em>
<del>del>
<ins>ins>

#水平线标签
hr>

#图像标签
<img src="./img/hello.png">
属性 src:指定路径和文件名 必须属性; alt:图片不能显示时候显示的文字; title:提示文本,鼠标放到图像上显示的文字; width:宽度;  height: 高度 ; border:边框; 

#特殊字符
平方二 ² 平方三 ³ 乘号 × 除号 ÷
<ruby>  //给汉字或者字符加拼音的形式展示
你好<rt> nihao rt>
ruby>

#超链接：从一个页面链接到另外一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或图片a>
href：必须的属性、target：指定链接的打开方式，_self 默认值，_blank在新窗口中打开
链接分类：
内部链接（本项目的其他页面），<a href="http://www.baidu.com">a>
外部链接（其他项目的页面）       <a href="index.html">a>
空链接（如果当时没有确定的链接目标时）    <a href="#">a>
下载链接（是一个文件或者压缩包，会下载这个文件）<a href="./test.zip">a>
网页元素链接（网页中各种元素都可以，如文本 图片 表格 音频 视频） <a href="./img/hello.png">a>
锚点链接（点击我们的链接，可以快速定位到页面中某个位置）
   1.在链接文本的href属性中，设置属值为#名字的形式，如<a href="#two">第二季a>
   2.找到目标位置标签，里面添加一个id属性=刚才的名字，如 <h3 id="two">第二季介绍h3>
    
link标签：用于链接外部css或其他资源

#表格
#列表
#表单

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    表格:

    <table align="center" border="1">
        <th><td>姓名td><td>性别td>th>
        <tr><td>hanyanmeitd><td>sextd>tr>
table>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    表格中行、表格中单元格、表头,类似于td，只不过对文字进行加粗 表格属性---这些属性要写到table标签里面 align: left|center|right 对齐方式、border：1|“” 是否有边框、cellpadding ：像素值 规定内容和单元格边框之间的距离（之间的空白），默认1像素 cellspacing：像素值 规定单元格边框之间的空白，默认2像素、width：像素值|百分比 规定表格宽度

    表格结构化标签：表格的头部标签，表格的主体区域，这样可以分清表格结构
    合并单元格：跨行合并 最上侧单元格为目标单元格写合并代码 ，跨列合并colspan="合并单元格的个数"最左侧单元格为目标单元格 写合并代码

    **列表:**无序列表，有序列表，自定义列表

    #无序列表--li标签里面可以放其他标签
<ul>
    <li>列表1li>
    <li>列表2li>
  ul>
  
#有序列表
 <ol>
    <li>列表1li>
    <li>列表2li>
  ol>

#自定义列表   父-多个子
 <dl> //定义要描述的列表
    <dt>关注我们dt>  //一个名字
    <dd>新浪微博dd>   //名字的解释1
    <dd>官方微信dd>   //名字的解释2
  dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述
    列表去掉默认的布局

    #ul {
  /* 去掉前面的黑圆圈 */
   list-style: none;
   /* 去掉默认的布局 */
   margin: 0;
   padding: 0;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    表单
    构成：表单域，表单控件，提示信息
    表单域： 用于定义表单域，实现用户信息收集并且将收集到的信息提交给服务器

    <from action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
from>

    • 1
    • 2
    • 3

    action:url地址，用于指定接收并处理表单数据的服务器地址
    method：get/post ，设置提交方式
    name：名称，指定表单的名称，区分同一个页面的多个表单域

    表单元素控件
    input输入表单，select下拉表单，textarea文本域表单

    的type属性值有如下
    button–按钮 ，reset–重置按钮， submit–提交按钮，
    text–文本，password–密码字段会被掩码，hidden–隐藏段落，file–定义输入字段和浏览按钮 供文件上传，
    checkbox–复选框 ，radio–单选按钮，image–图像形式的提交按钮

    <from action="" method="" name="">

<label for="1">普通文本<input id="1" type="text" value="test" disabled/>label>
<label for="2">密码 <input id="2" name="password" value="password" /> label>
<label >隐藏 <input tpye="hidden" name="myhidden" value="hidden"/>label>
<label><input type="file">label>

<label for="3"><input id="3" type="button" name="btn" value="button"/>label>
<label><input type="submit" name="mysubmit" value="mybtn"/>label>
<label><input type="reset" name="myreset" value="mybtn"/>label>

<label for="4"><input id="4" type="radio" name="myradio" value="1" checked /> label> //同一组单选name相同
<label for="5"><input id="5" type="checkbox" name="mulchoise" value="3" />喜欢label> //同一组多选name相同
<label><input type="image" name="myimage" src="/imgs/bg.jpg" value="1"/>label>
  from> 
submit点击提交后，会把form表单里面的数据发送给服务器
label用于绑定一个表单元素，当点击label标签内文本时，浏览器自动将焦点转到对应的表单上

<select>
使用
 籍贯：
  <select>
    <option selected="selected">哈尔滨option> //默认选中
    <option>北京option>
  select>

<textarea>常使用于留言板，评论
<textarea cols="50" rows="5">  //一行显示50个字，一共5行
    
textarea>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    html5新增哪些新特性


    新增选择器:document.querySelector,document.SelectorAll 获取元素或属性
    新增语义化标签:header, nav, article, section, aside, footer
    新增音频, 视频标签:audio,video
    新增存储:localstorage,sessionStorage
    新增canvas画布,geolocation地理定位, websocket 通信协议
    新增input标签属性placeholder, autocomplete, autofocus, required
    新增history API :
    go, forward, back, pushstate
    应用:vue编程式导航的灵感来源;vue-router的history模式

    附加小知识1:selector获取元素或属性

    <div class="classname" data-age='18'></div>
//括号里面可以是元素的id，class，元素名称等等
let ele = document.querySelector('#idname') //获取一个
let eles = document.querySelectorAll('.classname') //获取了多个元素
//通过querySelector方式获取到元素，然后通过获取到的元素获取属性
//data-* 自定义属性的使用  dataset获取自定义属性使用
eles.dataset.age

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    附加小知识2:
    语义化标签的好处:
    一增加标签可读性，方便维护
    二对机器阅读也友好，更适合搜索引擎检索
    三使页面结构更加清晰
    header:头部标签; nav:导航标签; article:内容标签; section:定义文档某个区域; aside:侧边栏标签; footer:尾部标签
    在这里插入图片描述

    article表示具有一定独立性质的文章。所以article和body具有相似的结构。同时一个html中可以有多个article存在。除了主题内容外，一个article元素通常带有自己的标题及脚注

aside
包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与文章相关的资料，名词解释等
在article元素之外使用 作为页面或站点全局的附属信息部分，最典型的是侧边栏，其中的内容可以是友情链接，博客中的其他文章列表，广告单元等

section在html文档中的独立部分，没有具体的语义元素来表示。一般来说会包含一个标题
section的嵌套会使h1-h6下降一级
<section>
    <h2>headingh2>
    <p>bunch of awesome contentp>
section>

hgroup（标题组）会和section里的标题进行组合使用
<hgroup>
    <h2>headingh2>
    <h3>testh3>
hgroup>

header出现在前部，表示导航或者介绍性的内容

footer出现在尾部，包含坐着信息，相关链接，版权信息等

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
  • 相关阅读:
    POJ1251丛林之路题解
    计算机网络-DNS和HTTPDNS了解
    解决error: invalid conversion from ‘unsigned char‘ to ‘unsigned char*‘
    浏览器backspace无法回退到上一层解决办法
    华为智能高校出口安全解决方案（3）
    WhatsApp账号被封？看看是不是你的原因！
    Java数据结构与算法：最短路径与Dijstra算法实现
    C#的AOP（最经典实现）
    简单工厂模式-Simple Factory Pattern
    从一线开发到技术总监，你就差一个赶鸭子上架
  • 原文地址：https://blog.csdn.net/weixin_44789333/article/details/126787337