html总结(呕心沥血版)

用户2421636221124
223 阅读12分钟

 html基本总结

 1.标题.段落与文字

 2.H5新增语义化标签

 3.表格

 4.列表

 5.form表单

 6.综合案例

 7.html面试题

1.标题段落与文字

p段落标签
br换行标签（单标签，自闭和）
hr水平线
h1~h6标题标签
div块元素
span行内元素
a连接标签

1.1文本格式化标签

b加粗 无语义
strong加粗 有语义
i倾斜 无语义
em倾斜
u下划线
ins下划线
s删除线
ins删除线

1.2上标下标

sup上标
sub下标

2.H5新增语义化标签

header文档的头部区域
nav导航部分
section文档的节
artcle独立的内容
aside页面主区域的内容
figcaption规定独立的流内容
footer页脚部分
img图像标签
audio音频标签(mp3)
video视频标签(mp4)

3.表格

table表示表格,表格所有内容都需要写在table标签之间
caption表格标题(会默认居中，一个表格只能有一个)
thead表头
tbody身体
tr单元行
th每一列的标题(默认加粗),第一行标题单元格
td单元格(存放数据)

rowspan:跨行合并。

colspan:跨列合并。

n代表合并的行数或者列数

###表格合并

<table border="1" width="500" height="249" cellspacing="0">
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVFoWoeu-1661441138062)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825212438951.png)]

若使用跨行合并第一行第一个和第二行第一个(跨行是竖向的)

跨行时rowspan=n,n代表跨行的数量,需要把相应跨越的行数中的td进行删除

<table border="1" width="500" height="249" cellspacing="0">  
        <tr> 
            <td rowspan="2">123</td> 
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xzAnzKog-1661441138063)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825212852826.png)]

若要使用跨列合并第一行第一个和第一行第二个(跨列是横向的)

跨行时colspan=n,n代表跨列的数量,需要把相应跨越的列数中的td进行删除

 <table border="1" width="500" height="249" cellspacing="0">
            <tr> 
                <td>123</td> 
                <td>123</td>
            </tr>
            <tr> 
                <td>123</td>
                <td>123</td>
            </tr>
            <tr> 
                <td colspan="2">123</td>
            </tr>
    </table>

4.列表

4.1无序列表(最重要)

ul li(没有顺序，默认li会有圆点)*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>臭豆腐</li>
        <li>
            <p>圣女果</p>
            <ul>
                <li>123</li>
            </ul>
        </li>
    </ul>
</body>
</html>

无序列表

4.2有序列表(不常用)

ol li(默认li会有数字排序)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>张三</li>
        <li>张三</li>
        <li>张三</li>
    </ol>
</body>
</html>

有序列表

4.3自定义列表

dl dt dd(dt相当于总概述，dd相当于分概述)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>服务支持</dt>
        <dd>售后服务</dd>
        <dd>上门服务</dd>
        <dd>包换服务</dd>
    </dl>
</body>
</html>

自定义列表

5.form表单

5.1form

语法：

input中type属性取值取值说明
text文本
password密码框(输入的东西会隐藏)
radio单选框
checkbox复选框
submit提交(提交按钮)
reset重置(清空表单所有数据)

H5新增的input类型

input中type属性取值取值说明
number文本框只能填写数字
email只能填写邮箱地址
url只可以写网址
tel电话
date日期
month月份
week星期

5.2button(按钮) value表示按钮的初始值

type="submit"value="提交所填"提交按钮
type="reset"value="重置"重置按钮
type="button"value="按钮"普通按钮
<button type="submit" value="提交所填">提交所填</button>
<button type="reset" value="重置">重置</button>
<button type="button" value="按钮">按钮</button>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJ7R9a66-1661441138064)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825220326193.png)]

按钮默认的是type="button",所以一般使用时可以

按钮

5.3select下拉框

语法:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="">
      <option value="">北京</option>
      <option value="">上海</option>
      <option value="" selected>广东</option>
      <option value="">深圳</option>
    </select>
  </body>
</html>

select种option设置属性值

5.4textarea文本域

语法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea>
  </body>
</html>

在这里插入图片描述

5.5label标签

语法:

作用: 设置当点击radio时，也可以通过点击文字实现效果

第一种写法(label中的for对应input中的name)

 <input type="radio" name="sex" id="female" />
    <label for="female">女</label>
    <input type="radio" name="sex" id="male" />
    <label for="male">男</label>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85yp1CSH-1661441138065)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825221929316.png)]

第二种写法(label包裹着input)

婚否
    <label>
        <input type="radio" name="marry" /> 未婚
    </label>
    <label>
        <input type="radio" name="marry" />
        已婚
    </label>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEZRtriY-1661441138066)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825222045657.png)]

6综合案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
        <h1>青春不常在，抓紧谈恋爱</h1>
        <hr />
        昵称：<input type="text" placeholder="请输入昵称" /> <br><br>
        性别：<label>
            <input type="radio" name="sex" /> 男
            </label> 
            <label> 
            <input type="radio" name="sex" /> 女
            </label> <br><br>
            所在城市：<select name="" id="">
                     <option value="">北京</option>
                     <option value="" selected>上海</option>
                     <option value="">天津</option>
                     <option value="">广东</option>
                     <option value="">深圳</option>
                     </select>
                     <br><br>
                     婚姻状况: 
                        <label>
                        <input type="radio" name="marry"> 未婚</label> 
                         <label>
                        <input type="radio" name="marry"> 已婚</label> 
                         <label>
                        <input type="radio" name="marry"> 保密</label> 
                        <br><br>
                        喜欢的类型:  <input type="checkbox"> 可爱
                        <input type="checkbox"> 性感
                        <input type="checkbox"> 御姐
                        <input type="checkbox"> 萝莉
                        <input type="checkbox"> 小鲜肉
                        <input type="checkbox"> 大叔
                        <br><br>
                        个人介绍: <br>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <h3>我承诺</h3>
                        <ul>
                            <li>年满18岁、单身</li>
                            <li>抱着严肃的态度</li>
                            <li>真诚寻找另一半</li>
                        </ul>
                        <input type="checkbox"> 我同意所有条款
                        <br><br>
                        <input type="submit" value="免费注册"> 
                        <input type="reset">
    
    </form>
  </body>
</html>

在这里插入图片描述

7.html面试题

1. HTML 文件中的 DOCTYPE 是什么作用？

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 标签之前，如：

<!DOCTYPE html>
<html>
...
</html> (目前主流)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
</html> (早期)

2. HTML、XML、XHTML 之间有什么区别？

语言中文名说明
HTML4超文本标记语言主要用于做界面呈现。HTML 是先有实现，后面才慢慢制定标准的，导致HTML⾮常 混乱和松散，语法非常的不严谨。
XML可扩展标记语言主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻 量⾼效， XML 的市场变得越来越⼩。
XHTML可扩展超文本标记 语言属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严 格。另外，XHTML 的出现也催生了 HTML 5，让HTML向规范化严谨化过渡。
HTML5超文本标记语言在HTML的基础上进行拓展，用于页面呈现 (目前标准)

XML的要求会比较严格:

  1. 有且只能有一个根元素 ... (目前主流) ... (早期)

  2. 大小写敏感

  3. 正确嵌套

  4. 必须双引号

  5. 必须闭合标签

    HTML5 是HTML的新一代标准, 所谓的 H5 工程师这一词, 其实是国产词, 泛指新一代的web开发工程师, 具体H5工程师, 做什么工作方向, 还是要看需求 (比如: 移动端开发, PC端网页开发, H5小游戏开发....)

3. 前缀为 data- 开头的元素属性是什么？

这是一种为 HTML 元素添加额外数据信息的方式，被称为 自定义属性。 我们可以直接在元素标签上声明这样的数据属性：

<div id="mydiv" data-message="Hello,world" data-num="123"></div>

也可以使用 JavaScript 来操作元素的数据属性：

let mydiv = document.getElementById('mydiv')
// 读取
console.log(mydiv.dataset.message)
// 写入
mydiv.dataset.foo = "bar!!!"

4. 谈谈你对 HTML 语义化的理解？

考察核心点: 语义化的好处 (利于SEO, 可阅读性更好)

语义化之前： 在提倡语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如：

  • 使用 span、div、p、a 等做文字, 做按钮

  • 使用 div 做一切

    从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好：

    • 对人不友好：阅读代码的人不能一眼看出代码的功能

    • 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理

    语义化的好处

对开发者的好处对机器/程序的好处
使⽤了语义化标签的程序，可读性明显增 强，开发者可以比容易和清晰地看出⽹⻚ 的结构；这也更利于整个开发团队的协作 开发和后续维护工作带有语义的网页代码在⽂字类应用上的表现⼒丰富，利于搜索引 擎爬⾍程序来爬取和提取出有效的信息；语义化标签还⽀持读屏 软件，根据⽂章可以⾃动⽣成⽬录等，方便特殊人群无障碍的使 用这些网页程序。

语义化的适用性：

语义化适合内容型的网站来使用（如简书、知乎），对其⽹站内容的传播有很⼤帮助。

5. HTML5 对比 HTML4 有哪些不同之处？

不同点说明
只有一种 DOCTYPE ⽂件类型声明(统一标 准)
增加了一些新的标签元素(功能, 语义化)section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup...
input 支持了几个新的类型值date, email, url 等等
新增了一些标签属性charset（⽤于 meta 标签）；async（⽤于 script 标签）
新增的全域属性contenteditable, draggable... hidden...
新增API本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信 WebSocket...

获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)

记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API...

6. meta 标签有哪些常用用法？

标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。

标签具体功能由name/http-equiv 和 content 两部分属性来定义。

如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、 关键词） 如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）

一些常用的功能及写法：

  1. 设置网页关键词 (SEO)

    <meta name="keywords" content="电商,好货,便宜">

  2. 设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  3. 设置 http 响应头：Content-Type 网页内容类型 (字符集)

    <meta http-equiv="content-type" content="text/html;charset=utf-8">
<!-- 设置字符集可简写为 -->
<meta charset="utf-8">

    7. meta 标签有哪些常用用法？

    考察点: 处理响应式图片的方式 (css媒体查询换的是背景图片, 而不是 img 标签的 src)

    开发者和设计师们竞相寻求 处理响应式图片 的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备 宽度下，

    使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？

    你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。

    博客链接 其实通过使用 img 标签的 srcset 属性，可定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片 来显示。 也就是图片的响应式处理能力。 如果你的响应式需求比较简单，只需要针对屏幕的不同 dpr （device pixel ratio，设备像素比）来决定图片的显示的 话， dpr 设备像素比, 越高, 能够显示的越清晰 (dpr: 2, dpr: 3) 那么就只要这么写：

<img srcset="320.png 1x, 640.png 2x, 960.png 3x" />

对于可变宽度的图像，我们使用 srcset 搭配 w 描述符以及 sizes 属性 。

  • w 描述符告诉浏览器列表中的每个图象的宽度。
  • sizes 属性需要至少包含两个值，是由逗号分隔的列表。

如果 srcset 中任何图像使用了 w 描述符，那么必须要设置 sizes 属性。 sizes 属性有两个值：

  1. 第一个是媒体查询条件；

  2. 第二个是图片对应的尺寸值， 在特定媒体条件下，此值决定了图片的宽度。 需要注意是，源图尺寸值不能使用百分比，如果要用100%, vw 是唯一可用的CSS单位。

    <img alt="img元素srcset属性浅析"
srcset="
320.png 320w,
480.png 480w,
640.png 640w"
sizes="
(max-width: 320px) 100vw,
(max-width: 360px) 320px,
(max-width: 480px) 360px,
(max-width: 640px) 480px,
640px"
src="640.png"
/>

    为 img 定义以上属性后，浏览器的工作流程如下：

    • 1.检查设备的实际宽度

    • 2.检查 img 标签的 sizes 属性中定义的媒体查询条件列表，并计算哪个条件最先匹配到

    • 3.得到图片此时的响应式宽度

    • 4.加载 srcset 中最接近, 最适合媒体查询匹配到的宽度的图片

    注意: 测试时, 清除缓存测试, 因为一旦加载了高清图, 就不会也没有必要, 回过去再用小图替换了 且我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。

    (译者注：srcset和size列表是对浏览器的一个建议(hint)，而非指令。由浏览器根据其能力、网络等因素来决定。)

8. 响应式图片处理优化: Picture 标签

picture 元素就像是图像和其源的容器。浏览器仍然需要 img 元素，用来表明需要加载的图片

在picture 下可放置零个或多个 souce 标签、以及一个img标签，为不同的屏幕设备和场景显示不同的图 片。

如果source匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找 使用 picture 元素选择图像，不会有歧义。 浏览器的工作流程如下：

  • 浏览器会先根据当前的情况，去匹配和使用 提供的图片

  • 如果未匹配到合适的 ，就使用img 标签提供的图片

    <picture>
<source srcset="640.png" media="(min-width: 640px)">
<source srcset="480.png" media="(min-width: 480px)">
<img src="320.png" alt="">
</picture>

    9.行内元素?块级元素?空元素?

  • 行内元素:

<a> <strong> <b> <ins> <em> <span>
  • 块级元素：
<h1>~<h6> <p> <div> <ul> <li> <ol>
  • 行内块元素：
<input> <img>

行内元素特点:

1.在一行显示

2.不能设置宽高

3.只能设置水平方向上的margin和padding

4.可以使用text-align:center水平居中

块级元素特点：

1.独占一行

2.宽度默认是容器的100%

3.可以内联其他元素

4.可以使用margin：0 auto；设置水平居中

行内块元素特点:

1.在一行显示

2.元素的宽高可以设置

3.可以通过text-align:center水平居中

通过display转换元素

display:inline; 转换为行内元素

display:block; 转换为块级元素

display:inline-block; 转换为行内块元素

avatar
文章
阅读
粉丝