html

html

十二月 02, 2024

html

这句活就是告诉我们使用那个html版本。
只需要记住,看到上面这行代码,说明使用的是html5的版本。

utf-8是目前最常用的字符集编码方式,其他的还有gb2312(简单中文),BIG5(繁体中文), GBK(全部中文字符),UTF-8(全世界所有国家需要用到的字符!)。 这里只需要记录UTF-8。

~

大小依次递减,注意没有<7>啥的,只有这六个!
用与分隔内容

属性


1.属性采用的是“键值对”的形式,key = "value" 格式(每个键对应着相应的值, 当按下相应的键时, 就会输出相应的结果) 2.属性不分先后顺序! 3.任何属性都有默认值,忽略该属性则取默认值。 4.属性包括在引号里面,无论是单引号还是双引号都可以,但是如果属性本身带有双引号则必须使用单引号

class :为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id:定义元素的唯一id(id 属性可用于创建一个 HTML 文档书签)
style:规定元素的行内样式(inline style)
title:描述了元素的额外信息 (作为工具条使用)

HTML在浏览器当中显示时,会将多余的空白或者空格变为一个空格(即使是
换行也是如此

href和src的区别
href用于 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系
src会将其指向的资源下载并应用到文档中,比如 JavaScript 脚本,img 图片

HTML链接属性(使用标签链接)
1、href:定义链接目标

2、target:定义链接的打开方式
blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接(默认)。
_parent: 在父框架中打开链接。
_top: 在整个窗口中打开链接,取消任何框架。3、rel:定义链接与目标页面的关系

4、download:提示浏览器下载链接目标而不是导航到该目标

5、title:定义链接的额外信息,当鼠标悬停在链接上时显示的工具提示

6、id:用于链接锚点,通常在同一页面中跳转到某个特定位置

7、hreflang: 指定链接的目标URL的语言

8、type: 指定链接资源的MIME类型

9、class: 用于指定元素的类名(CSS中定义)

10、style: 直接在元素上定义CSS样式

HTML 链接 -taget属性可以定义被链接的文档在何处显示

HTML元素

元素包含了所有的头部标签元素 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时,显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接: <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]--> <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="true"> <source type="audio/mpeg" src=""> </audio> <ul id="audio-list" style="display:none"> <li title="0" data-url="http://link.hhtjim.com/163/425570952.mp3"></li> <li title="1" data-url="http://link.hhtjim.com/163/425570952.mp3"></li> <li title="2" data-url="https://www.hifiti.com/thread-17621.htm"></li> </ul> </div> <div id="gitalk-container" class="comment link" data-enable="true" data-ae="true" data-ci="" data-cs="" data-r="" data-o="" data-a="" data-d="false" >查看评论</div> </div> <div class="side"> <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#html"><span class="toc-number">1.</span> <span class="toc-text">html</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#"><span class="toc-number"></span> <span class="toc-text">~ 大小依次递减,注意没有啥的,只有这六个! 用与分隔内容 属性 1.属性采用的是“键值对”的形式,key = "value" 格式(每个键对应着相应的值, 当按下相应的键时, 就会输出相应的结果) 2.属性不分先后顺序! 3.任何属性都有默认值,忽略该属性则取默认值。 4.属性包括在引号里面,无论是单引号还是双引号都可以,但是如果属性本身带有双引号则必须使用单引号 class :为html元素定义一个或多个类名(classname)(类名从样式文件引入) id:定义元素的唯一id(id 属性可用于创建一个 HTML 文档书签) style:规定元素的行内样式(inline style) title:描述了元素的额外信息 (作为工具条使用) HTML在浏览器当中显示时,会将多余的空白或者空格变为一个空格(即使是 换行也是如此 href和src的区别 href用于 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系 src会将其指向的资源下载并应用到文档中,比如 JavaScript 脚本,img 图片 HTML链接属性(使用和标签链接) 1、href:定义链接目标 2、target:定义链接的打开方式 blank: 在新窗口或新标签页中打开链接。 _self: 在当前窗口或标签页中打开链接(默认)。 _parent: 在父框架中打开链接。 _top: 在整个窗口中打开链接,取消任何框架。3、rel:定义链接与目标页面的关系 4、download:提示浏览器下载链接目标而不是导航到该目标 5、title:定义链接的额外信息,当鼠标悬停在链接上时显示的工具提示 6、id:用于链接锚点,通常在同一页面中跳转到某个特定位置 7、hreflang: 指定链接的目标URL的语言 8、type: 指定链接资源的MIME类型 9、class: 用于指定元素的类名(CSS中定义) 10、style: 直接在元素上定义CSS样式 HTML 链接 -taget属性可以定义被链接的文档在何处显示 HTML元素 元素包含了所有的头部标签元素 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时,显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#"><span class="toc-number">0.0.0.0.1.</span> <span class="toc-text"> 大小依次递减,注意没有啥的,只有这六个! 用与分隔内容 属性 1.属性采用的是“键值对”的形式,key = "value" 格式(每个键对应着相应的值, 当按下相应的键时, 就会输出相应的结果) 2.属性不分先后顺序! 3.任何属性都有默认值,忽略该属性则取默认值。 4.属性包括在引号里面,无论是单引号还是双引号都可以,但是如果属性本身带有双引号则必须使用单引号 class :为html元素定义一个或多个类名(classname)(类名从样式文件引入) id:定义元素的唯一id(id 属性可用于创建一个 HTML 文档书签) style:规定元素的行内样式(inline style) title:描述了元素的额外信息 (作为工具条使用) HTML在浏览器当中显示时,会将多余的空白或者空格变为一个空格(即使是 换行也是如此 href和src的区别 href用于 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系 src会将其指向的资源下载并应用到文档中,比如 JavaScript 脚本,img 图片 HTML链接属性(使用和标签链接) 1、href:定义链接目标 2、target:定义链接的打开方式 blank: 在新窗口或新标签页中打开链接。 _self: 在当前窗口或标签页中打开链接(默认)。 _parent: 在父框架中打开链接。 _top: 在整个窗口中打开链接,取消任何框架。3、rel:定义链接与目标页面的关系 4、download:提示浏览器下载链接目标而不是导航到该目标 5、title:定义链接的额外信息,当鼠标悬停在链接上时显示的工具提示 6、id:用于链接锚点,通常在同一页面中跳转到某个特定位置 7、hreflang: 指定链接的目标URL的语言 8、type: 指定链接资源的MIME类型 9、class: 用于指定元素的类名(CSS中定义) 10、style: 直接在元素上定义CSS样式 HTML 链接 -taget属性可以定义被链接的文档在何处显示 HTML元素 元素包含了所有的头部标签元素 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时,显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:</span></a></li></ol></li></ol></li></ol></li></ol></li></ol> </div> </div> </div> </div> </body> <script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script> <script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script> <script src="/js/plugin.js"></script> <script src="/js/typed.js"></script> <script src="/js/diaspora.js"></script> <link rel="stylesheet" href="/photoswipe/photoswipe.css"> <link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css"> <script src="/photoswipe/photoswipe.min.js"></script> <script src="/photoswipe/photoswipe-ui-default.min.js"></script> <!-- Root element of PhotoSwipe. Must have class pswp. --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </html>