前端 html语言
1：HTML的基本结构：
1：HTML初始
HTML是一种超文本标签语言，主要通过HTML标签对网页中的文本，图片，声音等内容进行描述。
2：HTML骨架
<html> <head> <title></title> </head> <body> </body> </html>
3:html标签分类
单标签
双标签
4：HTML标签的关系
嵌套关系
并列关系
5;文档类型
<!DOCTTYPE html>#这句话告诉我们用的是哪个版本
6：字符集 utf-8
7:html 的语义化：及标签的含义
2：html的常用标签
1：排版标签
排版标签主要和css搭配使用，显示网页的标签，是网页布局的常用标签
1：标题标签
语义：作为标题使用，
格式：
<hn> 标题文本 </hn> n是数字 1<=n<=6
2：段落标签
<p> 文本内容 </p> #默认情况下，会根据浏览器窗口的大小自动换行
3：水平线标签
<hr /> #是单样式 默认水平线
4：换行标签
<br />
5：div span标签
语义：
div ：分隔 分区的意思
span : 跨度，跨距，范围，就像一个盒子，
语法格式：
<div>这是头部</div> <span>今日价格</span>
2：文本格式化标签
| 标签 | 显示效果 |
| <b></b><strong></strong> | 文字以粗体的方式显示，推荐用strong标签 |
| <i></i><em></em> | 文字以斜体显示。推荐使用 em |
| <s></s><del></del> | 文字以加删除线的方式显示，推荐用del |
| <u></u><ins></ins> | 文字以加下滑线显示，不赞成用u |
3：标签属性
语义：为标签提供更多的信息。
格式：
<标记名 属性1=‘属性值1’ 属性2=“属性值2”>内容</标记名>
注意：
1：标签可以有多个属性，必须卸载开始标签中，位于标签面后面
2：属性之间部分先后顺序，标签名与属性，属性与属性之间以空格隔开
3：任何标签的属性都有默认值，省略该属性则取默认值
4;采取键值对形式 key="value"格式
4：图片标签
格式：
<img /> 是单标签
属性：
| 属性 | 属性值 | 描述 |
| src | url | 图片的路劲 |
| alt | 文本 | 图形不能显示时替换文本 |
| title | 文本 | 鼠标悬停时显示内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
5：链接标签
1：连接格式：
<a href="跳转目标" target=“目标窗口的弹出方式”>文本或图片</a> href:用于指定连接目标的URL地址， target：用于指定连接页面的打开方式，其取值有_self和_blank两种，其中 _self为默认值，_blank为新窗口中开 注意： 1：外部链接：需要添加http://www.baidu .ccom 2: 内部连接，直接连接连接内部页面即可，比如<a href="index.html">首页</a> 3:空连接：href="#" 4:图像，表格，音频，视频都可以诶超链接
2：锚点定位
1：使用<a href="#id名">连接文本</a> 创建连接文本
2：使用id 名标注跳转的目标的位置
例如：
<a href="#life">个人生活</a> <h3 id="life">个人生活<h3>
3:多个超链接文本在新的窗口中打开
<head> <base target="_blank"/> </head>
6：特殊字符标签
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| > | 大于号 | > |
| < | 小于号 | < |
| 版权 | © |
7：注释标签 Ctrl+/
<!--这是注释的解释-->
3：相对路劲
实际工作中，通常新建一个文件夹，用来存放图片，就需要指定图像文件的位置
路劲可分为 相对路劲 和 绝对路劲
相对路径：
1：图像文件和HTML文件位于同一文件夹，只需输入文件的名称，如：<img src="logo.jpg">
2:图像文件位于HTML的下一级文件夹，输入文件夹和文件名，之间用"/"隔开如： <img src="img/logo.jpg">
3:图像文件位于html的上以及文件夹，在文件夹名前夹“../” 如："<img src="../logo.gif">"
4：列表
无序列表
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul>
注意：
1:<ul></ul>只能嵌套<li></li>,不能嵌套其他标签
2：<li></li>可以容纳所有元素
有序列表
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ol>
自定义列表
<dl> <dt>名词1</dt2> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dt>名词2</dt2> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <dl> <dt>定义标题</dt> <dd>定义描述，解释</dd> </dl> <h2>籍贯</h2> <dl> <dt>北京</dt> <dd>昌平</dd> <dd>海淀</dd> <dd>大兴</dd> <dd>通州</dd> <dd>朝阳</dd> </dl> </body> </html>
5：表格
表格是处理数据的
1：创建表格
1:<table></table>用于定义一个表格 2：<tr></tr>用于定义表格中的一行，必须嵌套在<table></table>,有几对<tr></tr>就有几行 3：<td></td>用于定义单元格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> </table> </body> </html>
2：表格属性
| 属性名 | 含义 | 常用的属性值 |
| border | 设置表格的边框（默认border=0，无边框） | 像素值 |
| cellspaceing | 设置单元格与单元格边框之间的空白间距 | 像素值，默认为2像素 |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值，默认为1像素 |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left,center,right |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" cellpadding="3" width="500" height="200" align="center"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>刘德华</td> <td>男</td> <td>50</td> </tr> </table> </body> </html>
3：表头标签
一般位于标的第一行或第一列，用<th></th>代替<td></td>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" cellpadding="3" width="500" height="200" align="center"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>刘德华</td> <td>男</td> <td>50</td> </tr> </table> </body> </html>
4：表格结构
<thead></thead>用于定义表格的头部
<tbody></tbody>用于定义表格的主体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" cellpadding="3" width="500" height="200" align="center"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>刘德华</td> <td>男</td> <td>50</td> </tr> </tbody> </table> </body> </html>
5：表格标题
格式：
<table> <caption></caption> </table>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" cellpadding="3" width="500" height="200" align="center"> <caption>厉害的偶像</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>刘德华</td> <td>男</td> <td>50</td> </tr> </tbody> </table> </body> </html>
6：合并单元格
跨行合并：rowspan
块列合并： colspan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" cellpadding="3" width="500" height="200" align="center"> <caption>厉害的偶像</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td rowspan="2">合并了两行</td> <td>男</td> <td>50</td> </tr> <tr> <td>男</td> <td>50</td> </tr> <tr> <td>刘德华</td> <td>男</td> <td>50</td> </tr> <tr> <td>刘德华</td> <td>男</td> <td>50</td> </tr> <tr> <td>刘德华</td> <td colspan="2">合并了两列</td> </tr> </tbody> </table> </body> </html>
6：表单和表单控件
1：表单的作用
表单由 表单控件 ，提示信息 ，表单域，用来提交用户的信息
2：input控件
<input/>标签为单标签，type属性为基本属性，其取值有多种，用于指定不同的空间类型。
其他属性如下：
| 属性 | 属性值 | 描述 |
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 结合name属性来用 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域，提交文件 | |
| name | 由用户自定义 | 空间的名称 |
| value | 由用户自定义 | input控件中的默认文本 |
| size | 正整数 | input控件在页面中显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符 |
2：文本框和密码框
<p>用户名： <input type="text" name="" value="请输入您的名字" /> <!-- value 默认值 文本框 --></p> <p>密 码:<input type="password" name="" /> <!-- 密码框 --></p>
3：单钻按钮和复选按钮
性别： <input type="radio" name="sex"/> 女 <input type="radio" name="sex"> 男 <br/>
<!-- 单选框 radio 如果是一组，通过相同的name值 来实现 --> 爱好：<br/> <input type="checkbox" name="hobby" />足球<br/> <input type="checkbox" name="hobby" />篮球<br/> <input type="checkbox" name="hobby" />排球<br/> <input type="checkbox" name="hobby" />乒乓球<br/> <input type="checkbox" name="hobby" />足棒球<br/>
4：默认选中表单属性
搜索：<input type="butter" name="" value="搜索"> <!-- 普通按钮 -->
5：input按钮组
<input type="submit" name="" value="提交"> <!-- 提交按钮 --><br> <input type="reset" name="" value="重置表单"> <!-- 重置按钮 --><br/> <input type="image" name="" src="im.jpg"> <!-- 图像按钮 --><br/> 上传头像：<br/> <input type="file" name=""><br/> <!-- 上传文件 -->
6：最多字符数 和 文本值
maxlength :允许控件输入的最多字符数
value：默认文本值
7：label标签
label 标签为input元素标注
作用：用于绑定一个标签元素，当点击label标签时，被绑定的表单元素就会获得输入焦点
<h3>label标签的使用</h3> <label>输入人账号：<input type="text " name=""></label><br><!-- 1:用label标签直接包裹input就可以了 --> <label for="two">输入人账号：<input type="text " name=""> <input type="text " name="" id="two"></label> <!-- 2:如果label里面有多个表单，想定位某个 可以通过 for id 的格式来进行 -->
8:文本域 textarea控件
如果用户需要输入大量的信息，就用次标签；
<h3>留言板</h3> <textarea> 请输入刘而言</textarea>
9:下拉菜单
<h3>籍贯</h3> <select> <option>北京</option> <option>上海</option> <option>深圳</option> <option>广州</option> <option>兰州</option> </select>
注意：
1:<select></select>中至少包含一组<option></option>
2：opention中定义selected=“selected”时，当前即为默认选项
10:表单域
form标签被用于定义表单域，即创建一个表单，已实现用户信息的收集和传递，
form中的所有内容都被提交给服务器。
<form action="url地址" method=提交的方式“” name=“表单的名称”> 表单控件 </form>
7：HTML新增标签和属性
1：查看手册及其新增标签
w3c 手册中文官网 ：http://w3school.com.cn/
- header：定义文档的页眉 头部
- nav：定义导航链接部分
- footer:定义文档的页脚 底部
- section:定义文档的节（section，区段）
- aside:定义其所处的内容之外的内容 侧边
2：datalist标签（定义选项列表，输入会有提示，与input元素配合使用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" name="" value="输入明星" list="star"/> <!-- input里面用list --> <datalist id="star"> <!-- datalist 里面用 id 来实现 和 input里面的连接 --> <option>刘德华</option> <option>李若英</option> <option>刘小琴</option> <option>郭富成</option> <option>张学友</option> <option>郭郭</option> </datalist> </body> </html>
3：fieldset元素（可将表单内的相关元素分组，打包）
<fieldset> <legend>用户登录</legend> 用户名：<input type="text" name="" ><br> 密 码：<input type="password" name=""><br> </fieldset>
4：HTML新增input表单
| 类型 | 使用标签 | 含义 |
| <input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入URL格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="email"> | 搜索框 |
| range | <input type="email"> | 自由拖动滑块 |
| time | <input type="email"> | 小时分钟 |
| date | <input type="email"> | 年月日 |
| datetime | <input type="email"> | 时间 |
| month | <input type="email"> | 月年 |
| week | <input type="email"> | 星期年 |
| 新增的input type 属性值 | ||
5：新属性
| placeholder | <input type="text" placeholder="请输入用户名"> | 占位符，提供可描述输入字段值的提示信息 |
| autofocus | <input type="text" autopfocus> | 规定页面加载时，input元素自动获得焦点 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete（1：首先要提交按钮，2：这个表单必须给他名字） | <input type="text" autocomplete> | 规定表单是否应该启用自动完成功能，on或off |
| required | <input type="text" required> | 必填项 |
| accesskey | <input type="text" accesskey="s"> | 规定激活元素的快捷键，采用 alt+ 字母的形式 |
<form> 用户名：<input type="text" autocomplete="on" name="username"/><br> <input type="submit" /> </form>
8：表单案例——学生答案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <fieldset> <legend> 学生档案私密达</legend> <label>姓名： <input type="text" name="" placeholder="请输入姓名"></label><br> <label>手机号码： <input type="tel" name="" placeholder="请输入电话号码"></label><br> <label>邮箱： <input type="email" required name=""></label><br> <label>所属学院： <input type="text" name="" placeholder="请选择" list="clist"></label><br> <datalist id="clist"> <option>前端与移动端开大</option> <option>java学院</option> <option>c++学院</option> </datalist><br> <label>入学成绩：<input type="nubber" max="100" min="0" value="0" name=""></label><br> <label>入学日期：<input type="date" name=""></label><br> <label>毕业日期：<input type="date" name=""></label><br> <input type="submit" name=""> <input type="reset" name=""> </fieldset> </form> </body> </html>
9：embed引入网上视屏
1:先上传
2：在通过分享来引入代码
<embed <iframe height=498 width=510 src='http://player.youku.com/embed/XNDI2MTkxODY1Ng==' frameborder=0 'allowfullscreen'></iframe>> </embed>
10：播放音频
<audio>标签解决音频播放的问题
autopaly:自动播放
controls:是否显示不播放控件
loop：循环播放
| IE | FIREFOX | Opera | Chrome | Safari | |
| OGG | √ | √ | √ | ||
| MP3 | √ | √ | √ |
<audio src="群星-爱很美.mp3" autoplay controls loop="-1"></audio> <!-- 为浏览器兼容，我们需要做三种声音文件 --> <audio> <source src="" type="群星-爱很美.mp3"/> <source src="" type="群星-爱很美.ogg"/> </audio>
11：播放视屏
<video src="" autoplay="" controls=""></video> <video> <source src="" type=""> </video>
浙公网安备 33010602011771号