HTML练习1

最新推荐文章于 2024-10-05 16:51:11 发布

id不存在。

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量85

点赞数 1

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_52759526/article/details/126196652

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML练习1

<aside> 标签定义 <article> 标签外的内容，aside 的内容应该与附近的内容相关

article
<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任何独立的内容。

aside
<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

具有 type 属性的 input 元素，其值为 “tel”，表示用于输入电话号码的单行纯文本编辑控件

HTML5 Audio/Video 的属性：
	currentTime 当前播放位置（以秒计）
	duration 当前音频/视频的长度（以秒计）
	defaultPlaybackRate 默认播放速度
	PlaybackRate 当前播放速度

HTML标签的使用：
<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command 元素表示用户能够调用的命令。<command>标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

table的子元素可以是caption, tr, tbody
	caption是表格的标题
	tr是表格行
	tbody是定义表的核心内容
col是作为colgroup(定义表格中的列)的子元素存在的

border:none表示边框样式无
border:0表示边框宽度为0
当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0
当定义边框时,必须定义边框的显示样式.因为边框默认样式为不显示none,所以仅设置边框宽度,由于样式不存在,边框的宽度也自动被设置为0

体现：
	repaint 是某个DOM元素进行重绘；reflow 是整个页面进行重排，也就是页面所有DOM元素渲染。
如何触发：
	style 变动造成repaint和reflow。不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。
	除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。
	
常见触发场景：
	触发repaint：
		color的修改，如color=#ddd；
		text-align的修改，如text-align=center；
		a:hover 也会造成重绘。
		:hover引起的颜色等不导致页面回流的style变动。
	触发reflow：
		width/height/border/margin/padding的修改，如width=778px；
		动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
		appendChild 等DOM元素操作；
		font类style的修改；
		background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
		scroll 页面，这个不可避免；
		resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
		读取元素的属性：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

	H5新特性：audio和video支持；Canvas；localStorage；WebSocket
	WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
	WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

可以获取焦点的HTML元素：
	a标签设置 href 属性时可以获得焦点
	添加tabindex属性或者是contenteditable="true"的情况下可以聚焦
		1.contenteditable：true|false 规定元素文本是否可编辑；
		2.tabindex：0 | -1 | x
			0：tab键可获取焦点；
			-1：tab键不可获取焦点；
			x：x>0，x越小获取焦点优先级越高；