HTML全局属性笔记

属性 accesskey 定义快捷键获取焦点,例如 <a href="https://zhizheng123.test.com" accesskey="q">GO\</a> 按ait+q,就会跳到指定的网页上 class 定义元素的类,开头必须是字母,多个类使用空格隔开,例如 <div class = "a1 a2 a3"></div> id 定义一个id,id为唯一性,不能重复,例如 <div id = "a1"></div> lang 定义网页或者元素的语言,例如 <div lang = "fr"></div> style 定义元素的行内样式,例如 <div style="color : #fff">hi</div> tabindex 指定tab键的焦点控制,例如 <a href="https://zhizheng123.test.com" tabindex="1">GO</a> 使用键盘的tab键盘,触发(不会跳转到网页,只是焦点) contenteditable 指定元素是否为可以编辑的,例如 <div contenteditable="true">hi</div> dir 指定元素内文本的方向,例如 <div dir = "rtl">hi</div> ltr默认值,从左到右 rtl,从右到左 title 指定元素的信息,一般为鼠标移动到元素是停留一段时间,显示信息,例如 <div title = "hi">hi</div> data-xxx 用于存储一些自定义属性,data-后面必须有一个字符,不包括大写 JavaScript可以通过getAttribute获取到 draggable 指定元素是否可以拖动,默认情况下,只有图片和链接可以拖动 有3个可选值,true/false/auto,在JavaScript中可以配合拖动事件,例如 <div draggable = "true">hi</div> hidden 指定元素是否隐藏,有两个可选值,hidden/true,例如 <div hidden = "hidden">hi</div> contextmenu...

2021-06-16 · 1 min · Me

html5学习笔记

HTML5是HTML标准的第5代标准,主要目的是语义化并且提供多媒体的嵌入 HTML是什么?HTML全称为HyperTextMarkupLanguage,中文叫超文本标记语言,简称HTML 而HTML5是一个标准,指的是第五代HTML标准 HTML5主要的新特性: 语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,性能与集成特性,CSS3特性 HTML的块级与行级 块级元素的特征: 独占一行,不和其他元素待在同一行上,能设置宽和高 默认宽度是该元素的容器的100%,不过可以设置宽度 常用的块级元素有div,ul,li,dl,dt,h1-h6 行级元素的特征: 可以和其他元素待在同一行上,不能设置宽和高 它的宽度就是它的文字或者图片的宽度 常用的行级元素有a,span 行内块级元素的特征: 可以设置宽和高,可以一行多个 常见的行内块级元素有input,img 转换元素为块级或者行内 display:block //定义元素为块级元素 display: inline //定义元素为行内元素 display:inline-block //定义元素为行内块级元素。 这三个的区别只有三个,排列分式,设置宽高,默认宽度 html语义 语义化:使得页面可以很好的向浏览器和开发者描述其意义 语义化的好处: 方便开发团队的前期开发和后期维护,不只是作用于自己的开发团队,也方便其他国家的开发者能理解网页的结构; 在css文件丢失的情况下,也能表示出好的内容结构和代码结构,方便用户阅读; 方便辅助技术能更好的阅读或者转译网页,方便有障碍人士阅读; 良好的结构和语义,可以提高搜索引擎爬虫的有效爬取; 重点:用正确的标签做正确的事!!! 要注意可以改变样式的标签不一定是有居于语义的 在没有出现语义元素前,几乎都是使用div或者span,加类加id 没有语义的元素最适合当容器使用了 常用的非语义元素有<div>和<span> 常用的语义元素有<header>和<footer> <header>:页眉,一般包括网站logo,主导航,搜索框等; <nav>:导航,链接; <main>:定义文章的主要内容,一个页面只能使用一次; <article>:定义一份独立的内容,脱离其他内容或者其他部分,独立于文档的其余部分; <section>:定义内容的节(段); <footer>:页脚,一般包含版权信息或者链接等; <aside>:侧边栏,一般作为附属信息,例如导航索引,广告等; meta viewport viewport 是指 web 页面上的可见区域 <meta name="viewport" content="width=device-width, initial-scale=1.0"> device-width指设备的理想宽度,不同的设备 device-width 是不一样的 nitial-scale=1.0 是指默认缩放大小是1,也就是默认不缩放 maximum-scale=1.0 是指最大缩放大小是1 标签使用<和>括起来,例如<div> html标签大多都是成对出现的,分开始标签和结束标签,结束标签比开始标签多了个/ 例如: html不区分大小写。所以<DIV>和<div>作用一样。建议使用小写 <!DOCTYPE html>声明这是一个html5文件,声明位于<html>前面 <html> 标识HTML文档的开始 <head>表明一些和html文档有关的信息,例如title <body>html文档的主体 <!...

2021-06-16 · 3 min · Me