'''html,javascript,css是前端开发的最基础语言'''
#html:定义网页内容
#javascript：定义网页行为
#css:描述的是网页布局
'''什么是web'''
#web就是world wide web 的缩写，称之为全球广域网，俗称www
#可以理解为网站服务
#网站我们可以认为是由多个网页组成在一起而形成一种服务
#web前端就是来负责一个网站当中前台网页内容
#网页就是由前端工程师使用html语言编写而成的一种文件，它里面会包含文字，图片，超链接，声音，视频...
'''html基本概念'''
#超文件标记语言（Hyper Text Markup Language)
#描述网页的语言
'''html查看工具'''
#浏览器--开发者工具（f12)
'''html基本结构'''
'''
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title> 最上边的标题
</head>
<body>
网页内容
</body>
</html>
'''
'''html标签'''
#双标签:<标签名称></标签名称>
#单标签：<标签名称/>
'''html标签的属性'''
#基本格式：<标签名 属性1='属性值1' 属性2='属性值2'></标签名> 属性以键值对的形式出现
#标签可以拥有多个属性
#属性必须写在开始标签中，位于标签名后边
#属性之间不区分顺序
#标签名与属性，属性与属性之间使用空格隔开
#任何属性都有默认值，省略该属性表示使用默认值
'''html全局属性'''
#class:规定元素的类名
#id:规定元素的唯一id（id不能重复出现）
#lang:设置元素中内容的语言代码
#style:规定元素的行内样式
#title:规定元素的额外信息
'''html事件属性-窗口事件'''
#使用htlm事件触发浏览器 中的行为，比如说当用户点击某个htlm元素时启动一段javascript
#适用于<body>标签
#onblur:当窗口失去焦点时运行脚本
#onfocus:当窗口获得焦点时运行脚本
#onload:当文档加载时运行脚本
'''htlm事件属性——表单事件'''
#form:表单内元素
#onblur:当窗口失去焦点时运行脚本
#onchange:当元素改变时运行脚本
##onfocus:当窗口获得焦点时运行脚本
#onreset：当表单重置时运行脚本 htlm5不支持
#onselect:当选区元素时运行脚本
#onsubmit:当提交表单时运行脚本
'''html事件属性-键盘事件'''
#键盘事件
#onkeydown:当按下按键时运行脚本
#onkeypress:当按下并松开按键时运行脚本
#onkeyup:当松开按键时运行脚本
'''html事件属性-鼠标事件'''
#鼠标事件
#onclick:当单机鼠标运行脚本
#ondblclick:当双击鼠标时运行脚本
#onmousedown:当按下鼠标按钮时运行脚本
#onmouseout:当鼠标指针移除元素时运行脚本
#onmouseover:当鼠标指针移至元素之上时运行脚本
#onmouseup:当松开鼠标按钮时运行脚本
'''html事件属性-多媒体事件'''
#多媒体事件
#onabort:当发生中止事件时运行脚本
'''html注释标签'''
#标签：<!--注释内容-->
#作用：在源文件插入注释，注释不会在浏览器中显示
'''文档标题标签(在网页最上边）'''
#标签：<title>...</title>
#作用
#定义浏览器工具栏中的标题
#提供页面被添加到收藏夹时的标题
#显示在搜索引擎结果中的页面标题
'''标题标签'''
#标签：<h1>-<h6>
#<h1>这是标题1</h1>
#<h2>这是标题2</h2>
#作用
#用来定义html标题
#<h1>定义重要等级最高的标题 <h6>定义重要等级最低的标题
#属性：全局属性，事件属性
#例：<h1 id='site-test-logo' class='test-logo'>测试人社区</h1>
#id和class是全局属性，测试人社区是标题
'''段落标签'''
#标签：<p></p>
#作用：标签定义段落
#属性：全局属性，事件属性
'''容器标签'''
#标签：<span></span> 范围意思
#作用：用于对文档中的行内元素进行组合，提供了一种将文本的部分或者文档的一部分独立出来的方式
#属性：全局属性，事件属性
#标签：<div></div> 分隔的意思
#作用：标签定义html文档中的一个分隔区块或者一个区域部分
#<div>元素经常与css一起使用，y用来布局网页
#属性：全局属性，事件属性
'''图像属性'''
#标签：<img/>
#作用：标签定义html页面中的图像
#属性：
#src:规定显示图像的url（必须有）
#alt:规定图像的替代文本（必须有）
#title:鼠标悬停于图像时显示的文本
#width:图像的宽度
#height:图像的高度
#border:设置图像边框的宽度
'''超链接标签'''
#标签：<a></a>
#作用：标签定义超链接，用于从一个页面链接到另一个页面
#属性：全局属性，事件属性
#href:g规定链接的目标url(必须有）
'''列表标签-无序列表'''
#标签：<ul><li>...</li><li>...</li></ul>
#作用：定义无序列表
#<ul>标签与<li>标签一起使用，创建无序列表
#属性：全局属性，事件属性
'''列表标签-有序列表'''
#标签：<ol><li>...</li><li>...</li></ol>
#作用：定义了一个有序列表，列表排序以数字来显示
#使用<li>标签来定义列表选项
#属性：全局属性，事件属性
'''表格标签'''
#标签
#表格：<table></table>
#行：<tr></tr>
#单元格：<td></td>
#作用：定义表格
#属性：全局属性，事件属性
#border:规定表格单元是否拥有边框
'''表单域'''
#标签：<form></form>
#作用：创建供用户输入的html表单
#属性：全局属性，事件属性
#action:指定接收并处理表单信息的服务器url地址
#method:表单数据的提交方式
#name:指定表单名称
'''表单标签'''
#标签:<input>
#作用：规定了用户可以在其中输入数据的输入字段，输入字段可通过多种方式改变，取决于type属性
#属性：全局属性，事件属性
#type:#规定要显示<input>元素的类型
#value:指定<input>元素value的值
#size:显示大小
#checked:是否被选中
#maxlength:控制输入的最大字符数量
#type属性
#text:单行文本输入框（不能换行）
#password:密码输入框
#radio：d单选框（配合name可以实现单选效果）
#checkbox:复选框
#button:普通按钮
#submit:提交按钮
#reset:重置按钮
#image:图像形式的提交按钮
#file:文件域，点击之后打开文件选择器
'''文本域标签'''
#标签：<textarea></textarea>
#作用：定义一个多行的文本输入控件
#属性：全局属性，事件属性
#cols:规定文本区域内可见的宽度
#disabled:规定禁用文本区域
#name：规定文本区域的名称
#readonly:规定文本域为只读
#rows:规定文本区域内可见的行数
#placeholder:规定一个简单的提示，描述文本区域期望的输入值
'''下拉菜单'''
#标签：<select><option>...</option></select>
#作用：用来创建爱你下拉菜单
#<select>元素中的<option>标签定义了列表中的可用选项
#属性：全局属性，事件属性
#disabied:当该属性为true时，会禁用下拉列表
#multiple:当该属性为true时，可选择多个选项
#name：定义下拉列表的名称
#size:规定下拉列表中可见选择的数目