html5的一个html快捷键大全的问题？

来源：蜘蛛抓取(WebSpider) 时间：2023-09-19 13:00 标签： html快捷键大全
浏览器名称内核opera欧朋最初是自己的Presto内核，后谷歌Webkit 到BlinkFirefox火狐Gecko内核俗称Firefox内核Chrome谷歌统称为Chromium或Blink内核Safari苹果Webkit不受IE、Firefox内核约束IE浏览器Trident内核360浏览器IE+Chrome双内核 // 设置文档语言 //设置编码方式 标题 身体部分 标签(带尖括号哈)用法DOCTYPE html指定文档类型html文档开始标签head文档头部内容写里面meta元数据SEO优化定义页面说明，关键字，SEO等title文档的标题，浏览器标签卡上的内容body文档的主要内容放这里面h1~h6标题标签，字体从大到小，独占一行（块元素）p段落标签，独占一行（块元素）span行内标签，可一行多个，根据内容撑开标签大小（行内元素）a超链接标签，页面的跳转，属性常用href、targetimg图片标签，属性常用src（块元素）div盒模型，独占一行（块元素）hr水平线，属性noshadebr换行table表格标签，内含行、列tr行,属性常用align水平对齐、valign垂直对齐td列form表单input输入框组件ol有序列表ul无序列表li列表内容小小总结：①常见块元素、行内元素、行元素点我 设置编码字符集 name属性：指定数据的名称，例如：keywords关键词，refresh重定向等content属性：指定的数据内容，前面name属性写的是什么功能，后面写相关的内容注意refresh重定向双引号的使用，以及该处content是指延迟时间，单位S 超链接：可以跳转到指定的地点，或者当前页面的某个位置，用作页面的锚点；它是一个行内元素，a标签里面可以嵌套除a自身外的任何元素。 简单的在一个新页面打开这个链接 去到ID为P3的段落 当点击该超链接时，能定位到段落N位置

段落1

段落2

段落3

· · ·

段落N

target常用属性值：_self当前页面打开链接 _blank新窗口打开链接 引入一个外部文件，属性：controls是否允许用户控制播放 autoplay自动播放（如果设置此属性，大部分浏览器初始化是不会自动播放，播放过后一次就会） loop循环播放 方法一： 该方法不能根据浏览器来作出提示 方法二： 方法二中可以放多个source源文件，可以放相同文件的不同格式，这样可以根据浏览器支持性来自动选择，如果都没选上，就会出现上面提示性文字。 常见图片格式的区别： jepg:支持颜色比较丰富，不支持透明效果、不支持动图；一般用来显示照片 gif：支持颜色比较少，支持简单透明、支持动图；颜色单一的图片，动图 png:支持颜色丰富、支持复杂透明、不支持动图、专为网页而生 webp：谷歌推出一种图片格式，具有以上文件的有点，缺点：兼容性不好 这是个图片 alt是对图片的描述，搜索引擎根据alt中的内容来识别图片，不写会不被搜索引擎识别 …/上一层目录./当前文件目录 内联框架，用于向当前页面引入一个其他页面（视频也可以哦）；frameborder：内联框架的边框 0 无 1 有 引入一个外部文件，属性：controls是否允许用户控制播放 autoplay自动播放（如果设置此属性，大部分浏览器初始化是不会自动播放，播放过后一次就会） loop循环播放 方法一： 该方法不能根据浏览器来作出提示 方法二： 方法二中可以放多个source源文件，可以放相同文件的不同格式，这样可以根据浏览器支持性来自动选择，如果都没选上，就会出现上面提示性文字。 语义化是指在书写网页过程中，根据标签内的内容功能来使用正确的标签；例如：头部标签就用,导航栏就用等；语义化标签的使用能让提升网站的SEO功能。注意: 网页中一般只会有一个h1标签，页面中独占一行的称为块元素（block），不会独占一行的称为内联元素（inline）块元素一般用来对网页进行布局设计，行内元素则是用来包裹文字的一般而言，一般情况下会在块元素下放行内元素，反之不能；块元素中可以放任何标签，P标签中不能放任何的块元素。（如果放了浏览器会自动调整,会自动生成两对P标签）（错误示范）

不能这么放哦

（浏览器自动更正后,不要怀疑代码有问题哈，就是这样的）

不能这么放哦

常用来对页面进行布局的语义标签，常见的有以下几种标签作用header表示网页头部，可用于网页的头部部分main表示网页的主体，一个页面只有一个footer网页的底部，可用于网页的版权之类的nav表示网页中的导航aside表示和网页相关的内容，侧边栏article表示一个独立的文章div没有语义，表示一个区块，主要的布局标签section表示一个独立的区块，上面标签不能表示时用它span行内元素，一般用于网页中选中的文字1.table标签 （width宽度属性、align对齐方式、bordercolor边框颜色、cellspacing单元格与单元格间距、cellpadding单元格与内容间距）
语文 数学
99 100
11 22
11 22
form表单 （width宽度属性、align对齐方式、bordercolor边框颜色、input组件重点,action提交接口目标属性，method提交方式）
//想要正确的提交表单数据到后台，name属性一定不能少 用户信息：
密码：
get是从服务器上获取数据 post是向服务器传送数据get是提交能在地址栏看到明文，而post则是看不到对于get方式，服务器端用Request.QueryString获取变量的值 对于post方式，服务器端用Request.Form获取提交的数据get传送的数据量较小，不能大于2kb，post传输量大，一般默认为不受限制，但理论上上最量为80k（IIS4） HTML中列表分为：有序列表（ol） 无序列表（ul） 自定义列表（dl）不同列表之间可以相互嵌套 (有序列表)
  1. 橘子
  2. 甘蔗
(无序列表)
  • 行为
  • 表现
(自定义列表)
结构
结构表示网页的结构，结构用来规定网页那里是标题
这是一个二级菜单
运行效果如下图：案例一（table表格案例）：
联系方式 靓照
家庭住址
教育经历
案例二（form表单案例）：
姓名： 密码：
1、初探 HTML问题解决方案声明文档包含的是 HTML 内容使用 DOCTYPE 和 html 元素描述文档使用 head 元素，其中包含一个或多个元数据元素在HTML 文档中添加内容使用 body 元素，其中包含文本内容和其他 HTML 元素定义用于选择某个元素的快捷键使用全局属性 accesskey对元素进行分类，以便统一其样式或用程序查找该元素使用全局属性 class使元素内容可被编辑使用全局属性 contenteditable为元素添加快捷菜单使用全局属性 contextmenu指定元素内容的布局方向使用全局属性 dir声明元素可拖动使用全局属性 draggable声明可将其他元素拖放到某个元素上使用全局属性 dropzone表示某个元素及其内容毋需关注使用全局属性 hidden为元素分配一个独一无二的标识符，以便对其应用样式或用程序选择该元素使用全局属性 id声明元素内容所用语言使用全局属性 lang声明是否应检查元素内容的拼写错误使用全局属性 spellcheck直接定义元素的样式使用全局属性 style指定 HTML 文档中元素的 Tab 键次序使用全局属性 tabindex为元素提供额外的信息（通常显示为工具提示）使用全局属性 titile2、使用元素元素说明a生成超链接body表示 HTML 文档的内容button生成用以提交表单的按钮code表示计算机代码片段DOCTYPE表示 HTML 文档的开始head表示 HTML 文档的头部区域hr表示主题的改变html表示文档的 HTML 部分input表示用户输入的数据label生成另一个元素的说明标签p表示段落style定义 css 样式table表示用表格组织的数据td表示表格单元格textarea生成用于获取用户输入数据的多行文本框th生成表头单元格title表示 HTML 文档的标题tr表示表格行2.1、使用空元素元素的开始和结束标签之间并非一定要有内容。没有内容的元素称为空元素。I like apples and oranges. 2.2、使用自闭合标签空元素可以更简洁地使用一个标签表示。I like apples and oranges. 开始标签和结束标签合二为一。2.3、使用虚元素有些标签只能用一个标签来表示，在其中放置任何内容都不符合 HTML 的规范。这类元素称之为虚元素，hr 就是这样的一个元素。它是一种组织性元素，用来表示内容段落级别的终止。虚元素有两种表示方法。第一种只使用开始标签，如下：I like apples and oranges.
Today was warm and sunny. 第二种表示法在此基础上加了一个斜杠符号，其形式与空元素一致：I like apples and oranges.
Today was warm and sunny. hr 元素也是一个具有呈现形式含义的元素，它会显示为一条横线。3、使用元素属性元素可以用属性（attribute）进行配置。下边的代码为应用到 a 元素上的一个属性。这个元素用来生成超链接。点击这个超链接就会加载另一个 html 文档。I like apples and oranges. 属性只能用在开始标签或单个标签上，不能用于结束标签。属性具有名称和值两部分。有一些全局属性可用于所有的 HTML 元素，除了这些全局属性，元素还有用来提供其特有配置信息的专有属性。href 属性就限定与 a 元素，它配置的是超链接的目的 URL。3.1、一个元素应用多个属性一个元素可以应用多个属性，这些属性间以一个或几个空格分隔开来。I like apples and orages. 属性的顺序未做要求。其中 id 和 class 是全局属性。3.2、使用布尔属性有些属性属于布尔属性，这种属性不需要设定一个值，只需将属性名添加到元素中即可。Enter your name: 此例中的布尔属性是 disabled，元素中只添加了该属性的名称。input 元素为用户在 HTML 表单中输入数据提供了一种手段。添加 disabled 属性可以阻止用户输入数据。3.3、使用自定义属性用户可以自定义属性，这种属性必须以 data- 开头。4、创建 HTML 文档HTML 文档具有特定的结构，最起码要有一些关键性的元素。4.1、外层结构HTML 文档的外层结构由两个元素确定：DOCTYPE 和 html，如下： 上例中的 DOCTYPE 元素让浏览器明白其处理的是 HTML 文档。这是用布尔属性 HTML 表达的。紧跟着 DOCTYPE 元素的是 html 元素的开始标签，它告诉浏览器：自此直到 html 结束标签，所有元素内容都应作为 HTML 处理。4.2、元数据HTML 文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在 head 元素内部： Example 这个例子中的元数据只有 title 一项。按说 HTML 文档中都应该包含 title 元素，但是没有的话浏览器通常也不会在意。大多数浏览器把 title 元素的内容显示在其窗口的标题栏上或用来显示文档的标签页的标签位置。除了可包含用于说明 HTML 文档的元素，head 元素还能用来规定文档与外部资源（如 CSS 样式表）的关系，定义内嵌 CSS 样式，放置和载入脚本程序。4.3、内容文档的第三部分是文档内容，这也是最后一部分，放在 body 元素之中。如下： Example I like apples and oranges. body 元素告诉浏览器该向用户显式文档的哪个部分。4.4、了解元素类型HTML 5 将元素分为三大类：元数据元素（metadata element）、流元素（flow element）和短语元素（phrasing element）。元数据元素用来构建 HTML 文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。另外两种元素略有不同，它们的用途是确定一个元素合法的父元素和子元素范围。短语元素是 HTML 的基本成分。流元素是短语元素的超集。这就是说，所有短语元素都是流元素，但并非所有流元素都是短语元素。有些元素无法归入上述三类，这些元素要么没有什么特别的含义，要么只能在一些非常有限的情况下。li 元素就是受限元素的例子。它表示列表项，只能有三种父元素：ol（表示有序列表）、ul（表示无序列表）和 menu（表示菜单）。4、使用 HTML 实体5、HTML 5 全局属性5.1、accesskey 属性使用 accesskey 属性可以设定一个或几个用来选择页面上的元素的快捷键。
Name：

Passwd：

用户可以按 Alt+n 将键盘焦点转移到第一个 input 元素，在此输入姓名。接下来按 Alt+p 将焦点转到第二个 input 元素，在此输入密码。然后按下 Alt+s，这下等于按下 Log In 按钮以提交表单。5.2、class 属性class 属性用来将元素归类。这样做通常是为了能够找出文档中的某一类元素或为某一类元素应用 CSS 样式。Appress Web Site

W3C Web Site 一个元素可以被归入多个类别，为此在 class 属性值中提供多个空格分隔的类名即可。类名可以随便取，不过最好取点具有实际意义的，文档中拥有许多元素类别时尤其如此。class 属性本身没有任何作为。class 属性的一种利用方式是设计 CSS 样式时以所定义的一个或多个类作为应用目标。 练习 Appress Web Site

W3C Web Site 此例用 style 定义了两条样式，第一条用于属于 class2 类的元素，第二条用于属于 class1 类的元素。脚本程序也可以使用 class 属性。 Example Apress web site

W3C web site 5.3、contenteditable 属性contenteditable 其用途是让用户能够修改页面上的内容。 Example

It is raining right now

用户可以单击进行修改。5.4、contextmenu 属性contextmenu 属性用来为元素设定快捷菜单。这种菜单会在瘦到触发时弹出来。5.5、dir 属性dir 属性用来规定元素中文字的方向。其有两个有效值：ltr（用于从左到右的文字）和 rtl（用于从右到左的文字）。 Example

This is right-to-left

This is left-to-right

5.6、draggable 属性用来表示元素是否可被拖放。5.7、dropzone 属性与 draggable 搭配使用。5.8、hidden 属性hidden 是一个布尔属性，表示相关元素当前毋需关注。浏览器对它的处理方式是隐藏相关元素。 Example
NameCity
Adam FreemanLondon
Anne JonesParis
文档中有一个 table 元素，它包含的一个 tr 元素（代表表格中的一行）设置了 hidden 属性。文档中还有一个 button 元素，按下它所代表的按钮将会调用定义在 script 元素中的 JavaScript 函数 toggleHidden。这段脚本的作用是：如果那个 tr 元素的 hidden 属性存在就将其删除，否则就添加该属性。5.9、id 属性id 属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或在 JavaScript 程序中用来选择元素。 Example Apress web site

W3C web site 为了根据 id 属性值应用样式，需要在定义样式时使用一个以 # 号开头后接 id 属性值的选择器。 提示 id 属性还可以用来导航到文档中的特定位置。倘若有个名为 example.html 的文档中包含一个 id 属性值为 myelement 的元素，那么使用 example.html#myelement 这个 URL 即可直接导航至该元素。该 URL 的末尾部分（# 加上元素 id 值）称为 URL 片段标识符。 5.10、lang 属性lang 属性用于说明元素内容使用的语言。 Example

Hello - how are you?

Bonjour - comment 阾es-vous?

Hola - 縞髆o est醩?

关于如何使用声明的语言可参考网址：https://www.rfc-editor.org/info/bcp475.11、spellcheck 属性spellcheck 属性用来表明浏览器是否应该对元素的内容进行拼接检查。这个属性只有用在用户可以编辑的元素上才有意义。 Example 5.12、style 属性style 属性用来直接在元素身上定义 CSS 样式（这是在 style 元素或外部样式中定义样式之外的一种选择）。 Example Visit the Apress site 5.13、tabindex 属性HTML 页面上的键盘焦点可以通过按 Tab 键在各元素之间切换。用 tabindex 属性可以改变默认的转移顺序。 Example

tabindex 值为 1 的元素会第一个被选中。用户按下 Tab 键后，tabindex 值为 2 的那个元素会被选中，依次类推。tabindex 设置为 -1 的元素不会再用户按下 Tab 键后被选中。3.14、title 属性title 属性提供了元素的额外信息。浏览器通常用这些东西显示工具提示。 Example Visit the Apress site

我要回帖

更多关于 html快捷键大全 的文章

 

随机推荐