HTML(Hyper Text Markup Language)
1.初识HTML
2. 网页基本标签
3. 图像，超链接，网页布局
4. 列表、表格、媒体元素
5. 表单及表单应用
6. 表单初级验证
1. 初始HTML
1.1 什么是HTML
超文本标记语言HTML，包括文字，图片，音频，视频，动画等。打开网页->审查元素即可看前端代码
当前用的是HTML5+CSS3, HTML5提供，网页动态渲染图形，图表，动画，不需要安装任何插件使用网页播放视频等（过去用flash）
1.2 W3C 标准
- World Wide Web Consortium 万维网联盟，中立性技术标准机构
- W3C标准包括
- 结构化标准语言（HTML、XML)
- 表现标准语言（CSS)
- 行为标准（DOM、ECMAScript)
1.3 IDE
前端开发用WebStorm，这个集成在IDEA里
在IDEA里新建HTML file，自动生成的文本可以点击右上角的浏览器图标进行打开
浏览器配置 File ->Settings->Tools->Web Browsers->在谷歌图标的path路径里填写，exe的安装目录
1.4 HTML的基本结构
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
2. 网页基本标签
3. 图像标签
alt如果找不到图片，用什么来代替，title鼠标悬停在图片上提示的文字
4. 连接标签
4.1 页面间跳转
4.2 锚链接标签
4.3 功能性链接
- 邮件链接： "mailto:"
<a href="mailto:2324343432@qq.com">点击联系我</a> - QQ链接,如添加QQ实现客服在线聊天
搜索QQ推广登录后->推广工具->选择组件样式，提示语->复制代码到自己的网页上（html），即可使用
5. 行内元素和块元素
- 块元素
- 无论内容多少，该元素换行，独占一行
*（p, h1-h6...）
- 无论内容多少，该元素换行，独占一行
- 行内元素
- 内容撑开宽度，不会换行，左右都是行内元素的可以排在一行
- （a,strong,em...)
6. 列表标签
- 有序列表
- 无序列表
- 自定义列表
<br> 有序列表,应用范围：试卷，问答...</li> </ul> <ol> <li>java</li> <li>python</li> <li>c++</li> </ol> 无序列表,应用范围：导航，侧边栏... <ul> <li>java</li> <li>python</li> <li>c++</li> </ul> 自定义列表,dl标签，dt列表名称，dd列表选项。 应用范围：公司网站底部 <dl> <dt>学科</dt> <dd>Java</dd> <dd>python</dd> <dd>c++</dd> <dt>位置</dt> <dd>西安</dd> <dd>上海</dd> <dd>广州</dd> </dl> 
自定义列表不仅仅是项目item，而是项目和解释的结合
7. 表格标签
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
语法
</li> </ul> </li> </ul> <table>,<tr>行<td>列 例： <table border = "1px"> <tr> <!--跨了4 列--> <td colspan="4">1-1 </td> </tr> <tr> <td rowspan = "2 ">2-1 </td> <td>2-2 </td> <td>2-3 </td> <td>2-4 </td> </tr> <tr> <td>3-1 </td> <td>3-2 </td> <td>3-3 </td> </tr> <tr> <td>4-1 </td> <td>4-2 </td> <td>4-3 </td> <td>4-4 </td> </tr> </table> 1-1 2-1 2-2 2-3 2-4 3-1 3-2 3-3 4-1 4-2 4-3 4-4 8. 视频和音频
视频标签<video><br> src:资源路径<br> controls:控制条<br> autoplay：自动播放<br> <video src="../resources/video/片头.mp4" controls atuoplay></video><br> 音频标签<audio><br> <audio src="../resources/audio/music.mp3" controls atuoplay></audio><br> 页面结构分析
9. iframe内联框架
<iframe src="path" name ="mainFrame"></iframe>
src引用要打开页面地址，name框架标识名
例bilibili点分享有嵌入代码，复制过来
例2.
<iframe src="https：//www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
例3. 通过a链接往iframe里加东西,iframe标签是创造窗口，src是初始页面，name是给这个窗口起名字，可以通过a链接的target到iframe
<iframe src="" name="hello" framejborder="0" width="1000px" height="800px"></iframe><br> <a href="http.baidu.com" target="hello”>点击跳转</a><br> 10. 表单
10.1 表单格式
<form method="post" action="result.html"> </form> * method（get/post）表单提交方式 * get方式url里可以看见提交信息，不安全，但高效 * post方式比较安全，适合传递大文件 * action表示向何处发送表单数据，可以是个网站，也可以是一个请求处理地址 在审查元素里，network选项中查看post提交情况<!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title>页面结构分析</title> </head> <body> <h1>注册</h1> <form method = get action="2.html"> <p> 名字：<input type="text" name ="username"></p> <p> 密码：<input type="password" name ="password"></p> <p> <input type = "submit"> <input type = "reset"> </p> </form> </body> </html> 10.2 表单元素格式
<!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title>页面结构分析</title> </head> <body> <h1>注册</h1> <form method = get action="2.html"> <p> 名字：<input type="text" name ="username"></p> <p> 密码：<input type="password" name ="password"></p> <input type ="radio” name ="sex">男 <!--单选框 value表示选中传递给后台的值 name相同表示是同一个组，此时radio同一个组的只能单选 --> <p> 性别： <input type ="radio" value="boy" name ="sex">男 <input type = "radio" value = "girl"name ="sex">女 </p> <!--多选框 name相同表示同一个组，checked 标识默认选中 --> <p> <input type="checkbox" value="sleep" name="hobby" checked>睡觉 <input type="checkbox" value="swimming" name="hobby">游泳 <input type="checkbox" value="study" name="hobby">学习 <input type="checkbox" value="jogging" name="hobby">慢跑 </p> <!--按钮 可以结合事件使用，普通button按钮，图片按钮image点击也可以提交表单 提交按钮submit,重置按钮reset--> <p>按钮 <input type="button" value="点击变长" name="btn1"> <input type="image" src="C:\Users\xinran.jiang\Desktop\Capture.PNG"> </p> <!--select下拉框，每个选项用option表示，默认选项用selected标识--> <p>下拉框 <select name="国籍"> <option value ="USA">美国</option> <option value="China" selected>中国</option> <option value ="UK">英国</option> <option value ="Japan">日本</option> </select> </p> <!--文本域--> <p> <textarea name="textarea" cols="50" rows="20" ></textarea> </p> <!-- 文件域file标签--> <p> <input type ="file" name="files"> </p> <input type = "submit"> <input type = "reset"> </p> <!--邮件验证，验证输入有没有@--> <p>邮箱 <input type="email" name="email"> </p> <p> URL <input type="url" name="url"> </p> <!--验证数字范围，step表示每次点击增加或者减少的步长--> <p>number <input type="number" name="num" max="100" min="0" step="10"> </p> <!--滑块--> <p> 音量 <input type="range" name="voice" max="100" min="0" step="2"> </p> <!--搜索框--> <p> search <input type="search" name="search"> </p> </form> </body> </html>
11. 表单的应用
- readonly文本框变为只读
- disable不能勾选，按钮不能点击
- hidden 隐藏域，可以用来传递默认值
- label 增强鼠标可用性，点击label对应的文字，光标出现在for对应的框里
<!--增强鼠标可用性，点击label对应的文字，光标出现在for对应的框里--> <label for="mark" >光标出现mark里</label> <input type="text" id="mark">12. 表单初级验证
- 为什么要做表单验证？
1.安全性
2. 减轻服务器压力（砍掉无用的提交） - 常用的方式
- placeholder 提示信息，可以用在所有文本框表单控件上
- required 必填项，元素不能为空
- pattern 正则表达式
<p> 名字：<input type="text" name ="username" placeholder="请输入名字" required></p> <p>自定义邮箱 <input type="text" name="diymail" pattern="^[0-9]*$"> </p>
- 基本结构
博客有点圆
