web—— html
web—— html
1、什么是web开发基础
html（代表网页上的所有的元素）
css（网页上的所有样式：颜色、大小、长宽）
js（负责和用户交互事件）
1、
<body><h1>一级标题</h1><h2>二级标题</h2><body>2、tab快速生成标签，ctrl/ 注释：取消注释 标签*数量 tab 产生指定数量标签div 区域块 分工
<div> <p>相信光</p></div>3、p段落
<p> 相信光</p>4、font 字体 控制字体颜色、大小
<p>相信光</p><p><font > 相信光</font></p><p><font color=\"red\" size=\"10\"> 相信光</font></p>5、b strong 加粗
<p>相信光</p><p><b>相信光</b></p>6、I 斜体7、html 标签效果可以叠加，但要成对出现
<head></head>8、  空格、特殊符号
<p> 博为峰女神擅长自动化测试</p><p> 博为峰女神 <font color=\"blue\" >擅长自动化测试</font></p>`<p> 博为峰女神 <font color=\"blue\" >擅长自动化测试`</font></p>9、<真高兴> ——表示;≮真高兴> ——代表斜杠
<p>今天≮真高兴\">> 标签！ 可口可乐©</p>10、
<img src=\"./tupian/hashiqi.jpg\" alt=\"下载失败\" width=\"300\" height=\"300\" border=\"5\" align=\"right\" hspace=\"50\" vspace=\"50\"> 
11、取值编写 1、长度距离 2、像素pixel 3、百分比编写 更能适配显示区域 颜色编写:1、单词 缺点有限 2、rgb（255，255，355）3、16进制数 表述 #00：红ff：绿 00蓝12、th居中加粗，colspan列合并和rowspan行合并、caption：表标题 tr；行，td：单圆格（列） border 边界 align left 默认 right 对齐方式 hspace 水平距离 vspace 垂直距离 复合标签中 属性作用域 作用范围 bgcolor=背景色，align=靠齐方式，width=宽度
创建表格
<table> <tr>——行 列—— <td>11</td>——第一行第一列 <td>12</td>>——第一行第2列 <td>13</td>>——第一行第3列 </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> </tr></table>caption：<caption>学生表</caption>th加粗：<tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr>colspan列合并：<tr> <td>李四</td> <td colspan=\"2\">28男</tdcolspan> </tr>rowspan行合并<tr> <td rowspan=\"2\">31、41</tdrowspane> <td>32</td> <td>33</td> </tr>13、select+每一项 option，下拉框，value：提交给服务器数据，本科：给前端看
<select > <option value=\"dazhuan\">大专</option> <option value=\"benke\">本科</option> <option value=\"shuosi\">硕士</option> <option value=\"\"></option></select>14、无序列表ul ,有序ol, 每一项li，square：正方形--> 无序：无编号
<ul> <li>布什</li> <li>奥巴马</li> <li>特朗普</li> </ul>有序：有编号
<ol> <li>布什</li> <li>奥巴马</li> <li>特朗普</li> </ol>·square：正方形·
<ul type=\"square\"> <li>布什</li> <li>奥巴马</li> <li>特朗普</li></ul>15、标题 包含 章节 包含多个段落 多个字段 修饰加粗,
表示换行， 表示空格
<div> <p>今天真<br/>高兴</p>——换行 <p>今天 学习 <b> <font color=\"red\" size=\"10\"> testing</font></b></p> <p>今天学习了 html的<span class=\"token entity named-entity\" title=\"<p\">>标签! 可口可乐©；</p>--<span class=\"token entity named-entity\" title=\"<p\">>表示<p>有自动换行的意思</div>16、表单---form 重点什么是表单：ui角度，用户合服务器交互数据，唯一方式form.html输入框input不是表单，只是通常用，输入框来表示表单forminput：不指定提交数据服务器地址，声明数据含义（name属性）name，属性告诉服务器数据含义form：指定提交数据方式和提交数据服务器地址列子：实现登录框
`思路：
1、用户名输入+密码输入+登录按钮（submit属性值）——三者都用input，只是type属性取值不同
2、外面都要套上form
action属性：指定服务器地址
取值：1、域名：www.jb.com；
2、网页：xxx.php,xxx.asp,xxx.jsp 网页
method：提交数据方式（涉及http协议）
取值：1、get：提交数据通过，拼接网址中
2、post（企业使用）：提交数据放到http协议正文+抓包——http协议–>
<form action=\"http://www.jd.com\" method=\"get\">账号：<input type=\"text\" name=\"username\"><br>密码：<input type=\"password\" name=\"password\"><br> <input type=\"submit\" value=\"点我登录\"> </form>17、布局标签 (项目结构：先建一个文件夹，把他人给的文件放里面；再建一个主网页
需求：多个小网页合起来产出大网页
解决：网页布局
怎么实现
1、表格布局：缺点扩展弱
2、前端框架：vue布局+css+div比较灵活（学习成本css+js）
3、frame：学习成本比较低；分工：selenium frame——确点：不可以body标签一起存在
列子
标签：frameset 标签——组织网页结构
frame 代表每一个html 张三frame1 李四frame2frameset合body不能一起出现
例子1：执行 布局 /按列布局–>rows：行排列cols：列排列*,2*,3*：1：2：3系数编写法30%，40%，30%：3：4：3百分比编写法结合 2*，60%，3*：第二行 60% 第一行 40%的5分之二，第三行 40%的5分之3
<frameset rows=\"2*,60%,3*\"> <frame src=\"./jwframe/a.html\"> <frame src=\"./jwframe/b.html\"> <frame src=\"./jwframe/c.html\"></frameset>列子2：上下左中右布局（三行 第一行上 第二行三列左中右 第三行下)
<frameset rows=\"2*,60%,3*\">——比列 <frame src=\"./jwframe/a.html\">——第一行，jwframe/a.html图片的路径 <frameset cols=\"*,*,*\">——第二行三列的比列 <frame src=\"./jwframe/b.html\">——第二行第一列 <frame src=\"./jwframe/d.html\">>——第二行第二列 <frame src=\"./jwframe/e.html\">>——第二行第3列 </frameset> <frame src=\"./jwframe/c.html\">>——第三行</frameset>注意
图片更换路径时
“./jwframe/a.html\"要改为”../jwframe/a.html\"
