首页 / HTML5 / HTML(含HTML5）复习总结。【1天吐血整理】

HTML(含HTML5）复习总结。【1天吐血整理】

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML(含HTML5）复习总结。【1天吐血整理】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13168字，纯文字阅读大概需要19分钟。

内容图文

部分图片暂时未导入图床，之后有空添加

  • HTML：超文本标记语言

  • 超文本：超链接文档 ，从一个文档链接到另一个文档

  • URL：统一资源定位符

遵循规则

scheme://host.domain:port/path/filename

流行scheme：

http 超文本传输协议

https 安全超文本传输协议

ftp 文件传输协议

  • tag：html标签，如<b> </b> 尖括号包围的关键词，通常成对出现。开始和结束，也即开放和闭合。

  • 语义元素：清楚地向浏览器和开发者描述其意义，如form table

  • 浏览器：Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

  • 浏览器内核：Chrome-webkit

  • MVC：设计模式。Model，View（视图），Controller

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

  • MVVM：Model-View-ViewModel，mvc的改进版

vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定

实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

  • 响应式web设计：RWD-Responsive Web Design，能够以可变尺寸传递网页，对于平板和移动设备是必需的

  • HTML 标签对大小写不敏感：<P> 等同于 <p>

  • 从输入url到页面渲染完成经历了什么：

1.dns域名解析

2.发起tcp连接，三次握手

3.发送HTTP请求，接受HTTP响应

4.断开TCP连接（四次挥手）

5.浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户

  • css加载与js加载区别

    css是并行加载，js是串行加载

HTML

元素

  • 标题：h1 - h6
  • 段落：p

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

  • 链接：a <a href=“http://www.w3school.com.cn”>This is a link</a>

target属性 ：定义被链接的文档在何处显示

target="_blank" 在新窗口打开文档

name属性：命名锚

例如：<a name=“tips”>基本的注意事项 - 有用的提示

<a href="#tips">有用的提示 通过点击链接，跳回到锚处，常用于导航，百度百科中常见（侧边），可用id属性代替name属性

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生

发送邮件：

<a href=“mailto:someone@microsoft.com?subject=Hello%20again”>发送邮件

注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

  • 图像：img <img src=“w3school.jpg” width=“104” height=“142” />

alt 属性用来为图像定义一串预备的可替换的文本: alt=“big boat”

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

背景图片：<body background="/i/eg_background.jpg">

图片在文字中如何对齐：

<p>图像 HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片 在文本中

<p>图像 HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片 在文本中

<p>图像 HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片 在文本中

请注意，bottom 对齐方式是默认的对齐方式。

HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

还有align = “left” “right”

调整图像尺寸： <img src="/i/eg_mouse.jpg" width=“50” height=“50”>

把图像当作链接：

<a href="/example/html/lastpage.html">
<img border=“0” src="/i/eg_buttonnext.gif" />
</a>

用a标签包裹 img标签

  • <map>定义图像地图，<area>定义图像地图中的可点击区域

可通过此链接学习

  • 水平线：<hr /> 用于分割内容，创建水平线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXMvK0RS-1616834908545)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324205827258.png)]

  • <br />换行，是关闭空元素的正确方法，使用它，而不是<br>,更有保障
  • <table>:

每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border=“1”> 来显示边框

表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

若td内容为空，需使用空格占位符：<td>&nbsp;</td>

如何实现 跨行或跨列的表格单元格 th属性： colspan=“2” rowspan=“2”

table属性

单元格边距：cellpadding=“10”，单元格边沿与其内容之间的空白

单元格间距：cellspacing=“10”，单元格之间的空白

向表格（整个table）或表格单元（某个td）添加背景颜色或背景图像

在table或td中加属性 bgcolor 或 background

表格单元中排列内容 在td中用 属性 align=“left”诸如此类

frame属性：属性值有 box above below hsides vsides

HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

  • 列表：

    • 无序列表

      此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

      <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

    • 有序

      列表项目使用数字进行标记。

      <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

    • 定义列表

      自定义列表不仅仅是一列项目，而是项目及其注释的组合。

      <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

  • 块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

可以通过

和 将 HTML 元素组合起来。

  • 布局：

html5提供的新语义元素定义了网页的不同部分，但只是定义，修饰还是得靠css，如header,nav,section,article,aside,footer,details,summary

HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

  • html头部元素

    以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

    • title

      • 定义浏览器工具栏中的标题
      • 提供页面被添加到收藏夹时显示的标题
      • 显示在搜索引擎结果中的页面标题

    • meta 提供关于 HTML 文档的元数据, 用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

    • link

      <link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

  • html元素：以<p> 元素为例:

<p>This is my first paragraph.</p>

这个

元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签

，以及一个结束标签

。

元素内容是：This is my first paragraph。

属性

  • html属性：

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。

适用于大多元素的属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGfTZOyC-1616834908546)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324205105263.png)]

  • style属性
<p style="background-color:green">This is a paragraph.</p>
淘汰了 bgcolor属性；

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
淘汰了<font></font>标签

<h1 style="text-align:center">This is a heading</h1>
淘汰了 align 属性:<h1 align="center">This is heading 1</h1>

事件属性

在某种条件下触发动作 ， 可参考链接

  • window事件

  • form事件

    HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

  • Keyboard 事件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kcNbkvRE-1616834908546)(/Users/neo/Desktop/frontend/img资源.assets/image-20210325105840798.png)]

  • Mouse 事件

    HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

  • media事件 媒介触发，video audio

注释

  • html注释：
<!-- This is a comment -->

文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字

  • 文本格式化
  • 预格式文本 【pre标签
  • 计算机输出标签
  • 地址
  • 缩写和首字母缩写
  • 文字方向
  • 块引用
  • 删除字效果和插入字效果

可参考 链接

具体标签

  • b 加粗 strong 效果差不多

使用 em 标签来表示强调的文本，应该使用 strong 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

在没有其他合适标签更合适时，才应该把 标签作为最后的选项

  • i 斜体
  • del 删除字
  • q 短引用，会为里面的内容 包围引号
  • blockquote 块引用，会缩进处理
  • address 定义文档或文章的联系信息（作者/拥有者），内容以斜体出现
  • bdo 反向输出内容

框架

  • 垂直框架
<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dz38KFq-1616834908547)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324225129228.png)]

  • 水平框架
<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>
HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

假设浏览器无法处理框架 noframes

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
  • 混合框架
<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

框架的边界是可以拖动的，但如果在frame中加属性 noresize=“noresize”

则不可拖动

  • 内联框架 iframe
<iframe src="/i/eg_landscape.jpg"></iframe>

文件路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVOYEpZD-1616834908547)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324230042036.png)]

绝对文件路径是指向一个因特网文件的完整 URL：

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

字符实体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJRtCjLp-1616834908548)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324230806791.png)]

html4速查手册

html标签参考手册

表单

用于搜集不同类型的用户输入

  • form 元素定义html表单

    • action属性：提交表单时执行的动作
    • method属性：提交表单时使用的http方法（get或post）
      • get：查询，且没有敏感信息，数据在地址栏可见
      • post：更新，或包含敏感数据，数据在地址栏不可见
    • accept-charset：规定在被提交表单中使用的字符集（默认：页面字符集） 如：UTF-8

  • 表单内包含表单元素

    • input【最重要的表单元素】

      • type属性：text【文本输入】, radio【单选按钮】,submit【提交表单按钮】,password[password 字段中的字符会被做掩码处理,***], checkbox[复选框，可选0或多个]
      • name属性：果要正确地被提交，每个输入字段必须设置一个 name 属性。
      • value属性：规定输入字段的初始值

    • fieldset 组合表单数据， legend元素为fieldset元素定义标题

      fieldset将表单框起来显示，legend后换行

    • select：下拉列表

      <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项。
添加 selected 属性来定义预定义选项
<option value="fiat" selected>Fiat</option>

    • textarea: 多行输入字段，即文本域

    • button：可点击的按钮

  • html5新增表单元素

    • datalist：为 <input> 元素规定预定义选项列表,用户会在他们输入数据时看到预定义选项的下拉列表

      即下拉列表和输入框的结合体

      <form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

  • Html5新增输入类型：input的 type属性值

    • color:用于应该包含颜色的输入字段,颜色选择器会出现输入字段中
    • date:用于应该包含日期的输入字段,日期选择器会出现输入字段中
    • datetime:用户选择日期和时间（有时区）。
    • datetime-local:允许用户选择日期和时间（无时区）
    • email:包含电子邮件地址的输入字段
    • month:允许用户选择月份和年份。
    • number:用于应该包含数字值的输入字段，能堆数字做出限制
    • range:包含一定范围内的值的输入字段,输入字段能够显示为滑块控件
    • search:用于搜索字段（搜索字段的表现类似常规文本字段）
    • tel:用于应该包含电话号码的输入字段
    • time:允许用户选择时间（无时区)
    • url:用于应该包含 URL 地址的输入字段
    • week:允许用户选择周和年

  • input输入限制属性：

    HTML(含HTML5）复习总结。【1天吐血整理】 - 文章图片

  • html5为input新增属性：

    • autocomplete:规定表单或输入字段是否应该自动完成,当自动完成开启，浏览器会基于用户之前的输入值自动填写值。on or off

    • autofocus：当页面加载时 <input> 元素应该自动获得焦点。即出现输入框高亮，且有竖线一闪一闪，表示正在输入。

    • form

    • formaction

    • formenctype

    • formmethod

    • formnovalidate

    • formtarget

    • height 和 width：元素的高度和宽度

    • list

    • min 和 max

    • multiple：如果设置，则规定允许用户在 元素中输入一个以上的值。

      multiple 属性适用于以下输入类型：email 和 file。

      接受多个值的文件上传字段：
Select images: <input type="file" name="img" multiple>

    • pattern (regexp):用于检查 <input> 元素值的正则表达式

    Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
只能包含三个字母的输入字段（无数字或特殊字符）
    • placeholder:用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
    • required:提交表单之前必须填写输入字段。
    • step:合法数字间隔。如果 step=“3”，则合法数字应该是 -3、0、3、6、等等。

  • 为form新增属性

    • autocomplete:同上
    • novalidate:规定在提交表单时不对表单数据进行验证

html5

  • 变化

    • 新的结构元素

    • 新的表单元素 datalist

    • input新的输入类型：email，number，color

    • 在客户端存储数据

      • HTML5 提供了两种在客户端存储数据的新方法：

        • localStorage - 没有时间限制的数据存储。第二天、第二周或下一年之后，数据依然可用。
        • sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除。

        之前，这些都是由 cookie 完成的。但速度慢，效率不高。

        在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。

    • HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

    • 新的属性语法

      • empty 如 disabled，不需要属性值
      • 无引号，单 ，双。。
      • 图像 canvas svg 元素
      • 媒体audio video
      <audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
  
  
  <video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>
  例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素

为确保老式浏览器可用

header, section, footer, aside, nav, main, article, figure {
 display: block; 
}

可自定义元素

<!DOCTYPE html>
<html>

<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
 display: block;
 background-color: #ddd;
 padding: 50px;
 font-size: 30px;
} 
</style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

已添加的 JavaScript 语句 document.createElement("myHero")，仅适用于 IE。

内容总结

以上是互联网集市为您收集整理的HTML(含HTML5）复习总结。【1天吐血整理】全部内容，希望文章能够帮你解决HTML(含HTML5）复习总结。【1天吐血整理】所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1027289.html

来源：【匿名】