HTML基本知识

菜鸟教程:

html:浏览器适配

 

 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
 

使用 target 属性,你可以定义被链接的文档在何处显示。 

 

请始终将正斜杠添加到子文件夹。假如这样书写链接:href="https://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="https://www.runoob.com/html/"。带斜杠可以优化读取时间

 

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

 

注意head和header的区别:

head 标签用于定义文档头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

header 标签用于定义文档的页眉(介绍信息,可以显示)

 

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

某些标签确无法通过修改父级标签来改变子级标签特性,如a标签,修改其颜色特性,必须直接修改 a 标签的特性才可。

 

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

 

在html代码中每输入一个转义字符&nbsp就表示一个空格,输入十个&nbsp,页面中就显示10个空格位置。

而在html代码中输入空格,不管输入多少个空格,最终在页面中显示的空格位置只有一个。

 

无序列表使用 <ul> 标签,有序列表始于 <ol> 标签。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

 

表单本身并不可见。同时,在大多数浏览器中,文本域text的默认宽度是 20 个字符。

用户可在文本域textarea中写入文本。可写入字符的字数不受限制。

 

<form action="register.jsp">就表示当前页面中的<form>表单的数据传输,submit会向register.jsp传送

 

网页嵌套

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

height 和 width 属性用来定义iframe标签的高度与宽度。

 

文档对象(document)代表浏览器窗口中的文档,该对象是window对象的子对象,由于window对象是DOM对象模型中的默认对象,因此window对象中的方法和子对象不需要使用window来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容。例如表单、图像、表格和超链接等。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。

 

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

 

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

 

<div>文档中的块级元素</div>  外

<span>文档中的内联元素</span>  内

 

 html5:

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

 

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

 

 <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项

 

正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

 pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

 

<p><time pubdate datetime="2011-03-15"></time></p>便于搜索引擎搜索。当搜索引擎搜索该网页时,知道这个标签里面的文本是和事件有关的的,不是普通的文本内容。也可用这个标签实现自动更新内部文本

 

客户端存储数据的两个对象为:

  • localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

 

 

 

WebSQL是前端的一个独立模块,是web存储方式的一种,我们调试的时候会经常看到,只是一般很少使用。

 

CACHE MANIFEST

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。manifest 文件可分为三个部分:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

 

Web Worker(获取其他JS消息)

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

当然 Web Worker 提供的多线程编程能力并不像我们传统意义上的多线程编程,它不像其他的多线程语言(Java、C++ 等),主程序线程和 Worker 线程之间,Worker 线程之间,不会共享任何作用域或资源,他们间唯一的通信方式就是一个基于事件监听机制的 message(下文将具体描述);这并不意味着 JavaScript 语言本身就支持了多线程,对于 JavaScript 语言本身它仍是运行在单线程上的, Web Worker 只是浏览器(宿主环境)提供的一个能力/API。w = new Worker("1.js")

有一说一这玩意有点像安卓的handler,为了UI线程安全只能通过msg发送监听消息修改主线程UI。

 

Server-Sent (获取服务器更新)

 

WebSocket

Socket (套接字,应用层与传输层之间)是传输控制层协议,WebSocket 是应用层协议。

 

客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

Websocket 使用 ws 或 wss 的统一资源标志符

ws://example.com/wsapi
wss://secure.example.com/

 

命名规则:

小写元素名:<section>关闭所有元素;小写属性名<div class="menu">;属性值引号<table class="table striped">

图片属性习惯备注alt,不能显示图片时代替图片,并预留空间,减少闪烁<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

 使用小写文件名;.htm和.html

 

辅助程序是使用 <object> 标签来加载的。<object> 元素定义了在 HTML 文档中嵌入的对象。<embed> 元素表示一个 HTML Embed 对象 。

object和embed的区别:
1、是为了兼容不同浏览器,IE只支持对Object的解析;火狐,谷歌,Safari只支持对Embed的解析。
2、object标签用clsid表示控件的唯一id,而embed标签用type表示插件的唯一名称。比如flash插件type为:application/x-shockwave-flash,mp3播放插件type为audio/mpeg。
3、为了兼容多个浏览器,可以通过ie浏览器动态加载Object标签,非ie浏览器动态加载embed标签;或者在object标签里面嵌入embed标签。

 

播放音频视频等,都要保证各个浏览器和硬件的兼容性,使用不同的标签,让各个资源可以顺利运行。

 

HTTP状态:

200 OK 请求成功(这是对HTTP请求成功的标准应答。)

https://www.runoob.com/tags/html-httpmessages.html

 

在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。

  • GET - 从指定的资源请求数据。
  • POST - 向指定的资源提交要被处理的数据。

 

 

B站pink:

 头部对lang的设置,是为了让浏览器识别网页内容为何种语言,进行相应操作。如:设置为en,而浏览器默认语言为zh-CN,浏览器会辅助翻译。

H5新特性(都要考虑兼容性问题)

1、语义化标签:

 

2、多媒体标签

<video>

<audio>

3、input属性

 

 4、新增表单属性

 

 

 

 

 

 


posted @   Jacky02  阅读(119)  评论(0)    收藏  举报
(评论功能已被禁用)
编辑推荐:
· C#.Net 筑基-优雅 LINQ 的查询艺术
· 一个自认为理想主义者的程序员,写了5年公众号、博客的初衷
· 大数据高并发核心场景实战,数据持久化之冷热分离
· 运维排查 | SaltStack 远程命令执行中文乱码问题
· Java线程池详解:高效并发编程的核心利器
阅读排行:
· C#.Net筑基-优雅LINQ的查询艺术
· Cursor生成UI,加一步封神
· 一个基于 .NET 8 开源免费、高性能、低占用的博客系统
· 为什么说方法的参数最好不要超过4个?
· 接口设计的原则:构建优雅API的完整指南
点击右上角即可分享
微信分享提示