HTML 知识点
- html基本结构
- html标签是由 <> 包围的关键词。
- html标签通常成对出现,分为标签开头和标签结尾。
- 有部分标签是没有结束标签的,为单标签,单标签必须使用 / 结尾。
- 页面所有的内容,都在 html 标签中。
- html标签分为三部分:标签名称,标签内容,标签属性。
- html标签具有语义化,可通过标签名能够判断出该标签的内容,语义化的作用是网页
- 结构层次更清晰,更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。
- 标签的内容是在一对标签内部的内容。
- 标签的内容可以是其他标签。
- 标签属性
- class属性:用于定义元素的类名
- id属性:用于指定元素的唯一 id,该属性的值在整个html文档中具有唯一性
- style属性:用于指定元素的行内样式,使用该属性后将会覆盖任何全局的样式设定
- title属性:用于指定元素的额外信息
- accesskey属性:用于指定激活元素的快捷键
- tabindex属性:用于指定元素在 tab 键下的次序
- dir属性:用于指定元素中内容的文本方向,属性只有 ltr 或 rtl 两种
- lang属性:用于指定元素内容的语言
3. 事件属性
- window 窗口事件:
onload,在网页加载结束之后触发
onunload,在用户从网页离开时发生(点击跳转,页面重载,关闭浏览器窗口等) - form 表单事件:
- onblur,当元素失去焦点时触发
- onchange,在元素的值被改变时触发
- onfocus,当元素获得焦点时触发
- onreset,当表单中的重置按钮被点击时触发
- onselect,在元素中文本被选中后触发
- onsubmit,在提交表单时触发
keyboard 键盘事件:
- onkeydown,在用户按下按键时触发
- onkeypress,在用户按下按键后,按着按键时触发。(该属性不会对所有按键生效,不生效的有:alt,ctrl,shift,esc)
mouse 鼠标事件:
- onclick,当在元素上发生鼠标点击时触发
- onblclick,当在元素上发生鼠标双击时触发
- onmousedown,当元素上按下鼠标按钮时触发
- onmousemove,当鼠标指针移动到元素上时触发
- onmouseout,当元素指针移出元素时触发
- onmouseup,当元素上释放鼠标按钮时触发。
Media媒体事件
- onabort,当退出时触发
- onwaiting,当媒体已停止播放但打算继续播放时触发
- 文本标签
- 段落标签:,段落标签用来描述一段文字
- 标题标签:,标题标签用来描述一个标题,标题标签总共有六个级别
- 强调语句标签:,用于强调某些文字的重要性
- 更加强调标签: 和 标签一样,用于强调文本,但它强调的程度更强一些
- 无语义标签:,标签是没有语义的
- 短文本引用标签:,简短文字的引用
- 长文本引用标签:,定义长的文本引用
- 换行标签:
5. 多媒体标签
- 链接标签:
<a></a> - 图片标签:
<img/> - 视频标签:
<video></video> - 音频标签:
<audio></audio>
6. 列表标签
- 无序列表标签:ul,li,
<ul></ul>列表定义一个无序列表
<li></li>代表无需列表中的每一个元素 - 有序列表:ol,li
- 定义列表:
<dl></dl>,定义列表通常和<dt></dt>和<dd></dd>标签一起使用HTML 知识点 html基本结构 html标签是由 <> 包围的关键词。
7. 表格标签
- 表格标签
<table></table> - 表格的一行
<tr></tr> - 表格的表头
<th></th> - 单元格
<td></td> - 表格合并,同一行内,合并几列colspan=“2”,同一列内,合并几行rowspan=“3”
8. 表单标签
表单标签 <form>
<form></form> 表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
- action,浏览者输入的数据被传送到的地方
- method,数据传送的方式
输入标签 <input/>
name:为文本框命名,用于提交表单,后台接收数据用。
value:为文本输入框设置默认值。
type:通过定义不同的type类型,input的功能有所不同。
- text 单行文本输入框
- password 密码输入框(密码显示为***)
- radio 单选框 (checked属性用于显示选中状态)
- checkbox 复选框(checked属性用于显示选中状态)
- file 上传文件
- button 普通按钮
- reset 重置按钮(点击按钮,会触发form表单的reset事件)
- submit 提交按钮(点击按钮,会吃饭form表单的submit事件)
- email 专门用于输入 e-mail
- url 专门用于输入 url
- number 专门用于number
- range 显示为滑动条,用于输入一定范围内的值
- date 选取日期和时间(还包含:month、week、time、datetime、datetime-local)
- color 选取颜色
button按钮,下拉选择框 <select></select>
<option value="提交值">选项</option>是下拉选择框里面的每一个选项
文本域:<textarea></textarea>
当用户想输入大量文字的时候,使用文本域。cols,多行输入域的列数,rows,多行输入域的行数。
- 其他语义化标签
- 盒子:
- 网页头部:,html5新增语义化标签,定义网页的头部,主要用于布局,分割页面的结构
- 底部信息:,html5新增语义化标签,定义网页的底部,主要用于布局,分割页面的结构
- 导航:,html5新增语义化标签,定义一个导航,主要用于布局,分割页面的结构
- 文章:,html5新增语义化标签,定义一篇文章,主要用于布局,分割页面的结构
- 侧边栏:,语义化标签,定义主题内容外的信息,主要用于布局,分割页面的结构。
- 时间标签:,语义化标签,定义一个时间
- 网页结构
- 定义文档类型,告知浏览器用哪一种标准解释HTML
- 可告知浏览器其自身是一个 HTML 文档
- 标签之间的内容是网页的主要内容
- 标签用于定义文档的头部,它是所有头部元素的容器
- 元素可定义文档的标题
- 标签将css样式文件链接到HTML文件内
- 定义文档的元数据