======HTMLHTML(Hyper Text Markup Language): 超文本 标记 语言超文本（文本，音频，图片，视频等），标记（<>),文件后缀为.html 也是文档的一种，用来开发网页的语言。(1) <!DOCTYPE HTML>文档声明, 用来声明HTML文档所遵循的HTML规范和版本 上面是html5.0的声明, 也是目前最常用的版本 (2) <html></html>根标签, 用于包裹所有的网页内容(除了文档声明) (3) <head></head>头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载. (4) <body></body>体部分, 用来存放可视化的网页内容. 即真正的网页数据 (5) <title></title>声明网页的标题 (6) <meta charset="utf-8" >用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.标签：标签上声明属性，属性不能独立存在，可以声明多个属性，属性的值用单引号或说双引号引起来,标签没内容可以写成自闭标签。 <br/> 换行；? 不换行空格； ? 全角空格;<img src="" width="“/> 插入图片；<a target="" href =""></a> 超链接标签,target 指定何种方式打开超链接，_self默认值，表示当前窗口打开超链接, _blank：表示在新的窗口中打开超链接./* style标签内只能书写css注释和css代码 */table{border:*2px solid red; /* 为表格添加边框 */border-collapse: collapse; /* 设置边框合并 */background-color: pink; /* 为表格设置背景颜色 */width: 70%; /* 为表格设置宽度 *//* margin-left: 15%; *//* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */ margin-left: auto;margin-right: auto;}td,th{border:2px solid red; /* 为单元格添加边框 */border-collapse: *collapse*; /* 设置边框合并 */padding: 5px; /* 设置单元格边框和内容的距离(内边距) */}h1{/* border: 2px solid blue; */text-align: *center*; /* 设置元素中的内容水平居中 */}</style>table -- 用于在网页中定义一个表格 tr -- 用于定义表格中的行 td -- 用于定义表格中的单元格 th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）表单：用于向服务器提交数据 ，<form action="url地址" method="提交方式"></form> :action属性用于指定表单的提交地址,method="GET/POST" 属性是用于指定表单的提交方式，常用的就是GET和POST 提交<input type="text" name="username"/>):普通文本输入框(比如:用户名/昵称/邮箱/验证码等)<input type="password" name="pwd"/>:密码输入框(比如:密码/确认密码等)<input type="radio" name="gender"/>男:单选框(比如:性别/部门等)<input type="checkbox" name="like"/>):复选框/多选框(比如:爱好/岗位等)<input type="button" value="换一张"/>:)普通按钮(比如:换一张图片),,普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为<input type="submit" value="提交/注册/登录"/>:提交按钮(比如:提交/注册/登录)select用于定义一个下拉选框 option用于定义下拉选框上的选项 selected设置当前option选项默认被选中<option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option></select>textarea 多行文本输入区域：<textarea name="description" cols="30" rows="5" placeholder="请输入描述信息..."></textarea>cols属性: 用于设置文本输入框的列数(宽度) rows属性: 用于设置文本输入框的行数(高度) placeholder属性: 设置输入框中的提示消息!提交表单时，表单中的数据为什么没有被提交？对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加 name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略如何让多个单选框只能有一个被选中？<input type="text" name="username"/><input type="password" name="psw"/>要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相 同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！为什么单选框、复选框选择某一项后提交的值都是on?因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。 因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值 都是on)，<input type="radio" name="gender" value="female"/>女如何设置单选框或复选框默认选中某一项?可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前 单选框或复选框默认被选中。例如：男<input type="radio" name="gender" value="female"/>女<!-- 爱好复选框/多选框 --><input type="checkbox" name="like" value="basketball"/>篮球<input type="checkbox" checked="checked" name="like"value="football"/>足球<input type="checkbox" name="like" value="volleyball"/>排球如何设置下拉选框默认选中某一项?在option标签上添加一个selected="selected"属性，可以让当前option选项默认被 选中，例：<option>北京</option><option>上海</option><option selected="selected">广州</option><option>深圳</option></select>下拉选框中option选项上的value属性的作用是什么？<option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option></select>如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会 提交value属性的值。 如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提 交标签中的内容audio标签能够播放声音文件或者音频流：<audio controls="" src="audio/李白.mp3"></audio>src属性：用于指定要播放的音频的URL地址 controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等 autoplay="autoplay"：音频在就绪后马上播放（自动播放） loop="loop"：当音频完成播放后，再次开始播放（循环播放） width、height：设置音频播放器的宽度和高度<audio> 与 </audio>之间插入的内容是供不支持 audio 元素的浏览器显 示的<audio controls="" src="audio/nihao.mp3">如果您可以看到此内容，说明您的浏览器不支持此标签!</audio>video标签能够播放视频流，目前支持三种视频格式：MPEG4、Ogg、WebM。<video controls src="video/小芳.mp4" width="50%"></video>video标签内属性同audio标签内属性相同div、span、p元素都是非常普通、但是又很常用的标签，它们都是容器标签，可 以用来包裹其他元素或文本，将样式添加在这些元素上，就可以为包含在其中的内容 设置样式。 div、p：块元素，默认独占一行，可以设置宽高（其中div元素通常用于布局， 而p元素通常用于定义段落） span：行内元素，行内元素可以显示在同一行，不可以设置宽高（span用于包含 文本或组合行内元素，以便于统一设置样式）注册表案例：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>/* style标签内只能书写css注释和css代码 */table {border: 2px solid red; /* 为表格添加边框 */border-collapse: collapse; /* 设置边框合并 */background-color: lightgrey; /* 为表格设置背景颜色 *//* margin-left: 15%; *//* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */margin-left: auto;margin-right: auto;}td, th {border: 2px solid red; /* 为单元格添加边框 */border-collapse: collapse; /* 设置边框合并 */padding: 5px; /* 设置单元格边框和内容的距离(内边距) */}h1 {/* border: 2px solid blue; */text-align: center; /* 设置元素中的内容水平居中 */}</style></head><body><h1>欢迎注册</h1><form action="#"><table><tr><!-- 用户名输入框 --><td>用户名:</td><td><input type="text" name="username" /></td></tr><tr><!-- 密码输入框 --><td>密码:</td><td><input type="password" name="pwd" /></td></tr><tr><!-- 性别单选框 --><td>性别:</td><td><input type="radio" checked="checked" name="gender" value="male" />男 <input type="radio" name="gender" value="female" />女</td></tr><tr><!-- 爱好复选框/多选框 --><td>爱好:</td><td><input type="checkbox" name="like" value="basketball"/>篮球<input type="checkbox" checked="checked" name="like" value="football" />足球 <input type="checkbox" name="like" value="volleyball" />排球</td></tr><tr><!-- 城市下拉选框 --><td>城市:</td><td><select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option></select></td></tr><tr><!-- 自我描述 多行文本输入框 --><td>自我描述:</td><td><textarea name="des" cols="30" rows="5"placeholder="请输入描述信息..."></textarea></td></tr><tr><!-- 提交按钮 --><!-- colspan: 设置单元格横跨的列数 --><td colspan="2" style="text-align: center;"><inputtype="submit" value="提交" /></td></tr></table></form></body></html>
