目录
一.认识WEB
- 浏览器内核举例：
- 苹果：Safari（WebKit）
- 谷歌：chrome-Blink（WebKit分支）
- 安卓手机大部分是 WebKit 内核
- 浏览器不同→内核不同，显示页面有差异，所以要遵循 WEB标准（W3C万维网联盟制定）
- WEB标准构成： 结构（Structure = HTML）、表现（Presentation = CSS）、行为（Behavior = JavaScript）
- 三层独立，.html，.css，.js 放在不同的文件夹里
二.HTML初识（超文本标记语言）
- HTML作用：网页由网页元素组成 ， 元素用 html标签描述，通过浏览器解析，显示给用户
- HTML标签语义化 = 标签的含义
- 字符集编码：UTF-8 基本包含全世界所有国家需要用到的字符
- 骨架标签 总结：
<!-- <!DOCTYPE html>文档类型：告诉浏览器按照 html5规范解析网页 --> <!DOCTYPE html> <!-- 指定 html语言种类 zh-CN表示中文 --> <html lang="en"> <head> <!-- <meta charset="UTF-8">表示字符集编码，一定要写，防止乱码 --> <meta charset="UTF-8"> <!-- <title>网页名字 --> <title>Document</title> </head> <body></body> </html>
三.HTML常用标签
排版标签：
- <h>标题标签</h>
- <p>段落标签</p>
- <hr />水平线标签
- <br />换行标签
- div和span标签（重点）：没有语义，网页布局的两个主要盒子
- <div></div>：一行只能放 一个div
- <span></span> ：一行上可以放 好多个span
- 文本格式化标签：
- <b>加粗</b> <strong>加粗</strong> 推荐第二种
- <i>倾斜</i> <em>倾斜</em> 推荐第二种
图片标签<img />：
- alt属性：当图片加载失败显示的文字
- title属性：当鼠标移动到图片上显示的文字
带边框border、有提示文本title、有替换文本alt <img src="1.jpg" width="3" height="3" border="3" title="蒲公英" alt="图片不存在" />
链接标签：
- 外部链接：需要添加 http:// .....
- 内部链接：链接内部页面名称，比如 < a href="index.html"> 首页</a>
- 没有确定链接目标时，href="#"，表示该链接暂时为空
<a href="跳转目标地址" target="目标窗口的弹出方式">文本或图像</a>
- 路径分类：
- 相对路径：
- 同级路径：输入图像文件名，如<img src="bai.gif" />
- 上一级路径：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”， 如<img src="../bai.gif" />
- 下一级路径：图像文件位于 html文件同级文件夹下，如<img src="images/bai.gif" />
- 绝对路径：用的少，注意写法，特别是符号 \， 并不是 相对路径的 /
- 锚点定位：创建锚点链接，能快速定位到目标内容，如百度点击目录，跳转到相应文本区
<!-- 1. 使用相应的id名标注跳转目标的位置。--> <h3 id="two">第2集</h3> <!-- 2. 使用<a href="#id名">链接文本</a> --> <a href="#two">
base标签：
- base 写到 <head> </head> 之间
- 把所有的连接都默认添加 target="_blank"（不关闭原来的页面，在新窗口打开链接）
<base target="_blank" />
四.表格
- 作用：展示表格式数据，让数据规整，可读性好
基本语法：表格只有行、单元格的概念，没有列的概念
<table> <caption> 表格名字，caption标签必须紧紧跟在table后面 </caption> <!-- tr标签 定义行，必须嵌套在 table标签中 --> <tr> <!-- td 定义单元格，th 定义表头，会加粗居中显示 --> <td> 单元格内的文字 </td> </tr> </table>
- 表格属性：
- cellpadding：单元格里的内容距离边框多少
- cellspacing：单元格间距是多少
- align：整个表格在页面中的位置
<!-- cellpadding：单元格里的内容距离边框多少 重点 --> <!-- cellspacing：单元格间距是多少 重点 --> <!-- align：整个表格在页面中的位置 --> <table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr> </table>
- 合并单元格（重要）：
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
- 合并过程三部曲：
- 先确定是 跨行还是跨列 合并
- 根据 先上 后下 先左 后右的原则找到 目标单元格 然后写上 合并方式 还有 要合并的单元格数量
- 删除 多余的单元格 单元格
<table border="1" width="500" height="240" align="center" cellspacing="0"> <caption> 个人简历 </caption> <tr> <td>刘德华</td> <td>男</td> <td>18</td> <!-- 目标单元格 先上后下 --> <td rowspan="2">照片</td> </tr> <tr> <td>身高 180</td> <td>汉族</td> <td>已婚</td> <!-- <td>照片</td> 这个单元格是多余的 --> </tr> <tr> <td>个人作品</td> <!-- 第二个单元格是目标单元格 --> <td colspan="3">个人作品</td> </tr> <tr> <td>个人简历</td> <td colspan="3">个人简历</td> </tr> </table>
- 效果：
五.列表和表单
列表：
- <ul></ul>中只能嵌套<li></li>，输入其他标签或文字是不被允许的
- <li>与</li>之间相当于一个容器，可以容纳所有元素
<!-- 无序列表：各个列表项之间没有顺序级别之分，是并列的 ul、li--> <ul> <li>列表项1</li> </ul> <!-- 有序列表：各个列表项按照一定的顺序排列定义 ol、li --> <ol> <li>列表项1</li> </ol> <!-- 自定义列表：用于对术语或名词进行解释和描述 dl、dt、dd --> <dl> <dt>名词1</dt> <dd>名词1解释1</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl>
表单，为了收集用户信息，其构成如下：
- 表单控件（表单元素）：文本输入框、密码输入框、复选框、提交按钮、重置按钮等
- 提示信息：说明性的文字，提示用户进行操作
- 表单域：form 相当于容器，容纳表单控件、提示信息，让表单数据传送到后台服务器
- input控件（单标签）：
<!-- type 表单类型，通过改变值，可以决定属于哪种 input表单 --> <!-- 后台通过 name属性 找到表单，ajax中必须采用name--> <!-- value 表单值 / 默认显示的文本值 --> 用户名:<input type="text" name="username" value="请输入用户名"> <!-- radio 如果是一组，必须给他们命名相同的 name 这样就可以仅选其中一个 --> <!-- checked 表示默认选中 --> <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
- label标签：绑定表单元素, 点击 label标签 的时候, 被绑定的元素会获得输入焦点
- 绑定表单元素方法：
- 用 label直接包括 input表单
- for 属性规定 label 与哪个表单元素绑定 for/id 组合
<!-- 第一种用法就是用label直接包括input表单 --> <label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label> <!-- 第二种用法 for 属性规定 label 与哪个表单元素绑定 for/id 组合 --> <label for="sex">男</label> <input type="radio" id="sex" name="sex">
- Select下拉列表（现在应用很少）：
<!-- <select> 中至少包含 一对option，selected="selected"表示默认选中项 --> <select> <option selected="selected">选项1</option> </select>
- form表单域：实现用户信息的收集传递，form中的所有内容都会被提交给服务器
- 当 reset重置/submit提交 在form中时，才会起到效果
<!-- 实现用户信息的收集和传递，form中的所有内容都会被提交给服务器 --> <!-- 当reset重置/submit提交在form中时，才会起到效果 --> <form action="url地址" method="提交方式" name="表单名称"> 表单控件 </form>
六.综合实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘-你在我也在</title> </head> <body> <!--将表单看做一个两列的大表格，每一个单元格可以装许多东西 --> <table width="600" align="center" cellspacing="0" cellpadding="0"> <!-- 第一行 注意第二个单元格里有许多元素--> <tr height="40"> <td>性别</td> <td> <!-- 第二个单元格包括 单选框 小图标 文字描述 --> <input type="radio" name="sex" id=""> <img src="images/man.jpg" alt=""> 男 <input type="radio" name="sex" id=""><img src="images/women.jpg" alt=""> 女 </td> </tr> <!-- 第二行 --> <tr height="40"> <td>生日</td> <td> <select name="" id=""> <option value="">请选择年</option> <option value="">1990</option> ... </select> <select name="" id=""> <option value="">请选择月</option> <option value="">1月</option> ... </select> <select name="" id=""> <option value="">请选择日</option> <option value="">1</option> ... </select> </td> </tr> <!-- 第三行 --> <tr height="40"> <td>所在地区</td> <td> <input type="text" value="北京"> </td> </tr> <!-- 第四行 --> <tr height="40"> <td>婚姻状况</td> <td> <!--用相同的name确保只能当做一组进行单选 --> <input type="radio" name="merry"> 未婚 <input type="radio" name="merry"> 离婚 <input type="radio" name="merry"> 丧偶 </td> </tr> <!-- 第五行 --> <tr height="40"> <td>学历</td> <td> <input type="text" value="小学"> </td> </tr> <!-- 第六行 --> <tr height="40"> <td>月薪</td> <td> <input type="text" value="5000-10000"> </td> </tr> <!-- 第七行 --> <tr height="40"> <td>手机号</td> <td> <input type="text"> </td> </tr> <!-- 第八行 --> <tr height="40"> <td>昵称</td> <td> <input type="text"> </td> </tr> <!-- 第九行 --> <tr height="40"> <td>喜欢的类型</td> <td> <!-- 用相同的name确保这是一组复选 --> <input type="checkbox" name="merry"> 妩媚 <input type="checkbox" name="merry"> 柔美 <input type="checkbox" name="merry"> 可爱 ... </td> </tr> <!-- 第十行 --> <tr height="40"> <td>自我介绍</td> <td> <!-- 长文本域 --> <textarea name="" id="" cols="50" rows="10"></textarea> </td> </tr> <!-- 第十一行 --> <tr height="60"> <!-- 此处第一个单元格为空，不可以省略，因为左边是空白的，省了会导致左边不空白 --> <td></td> <td> <!-- 图片登录/注册等等，一定要写src --> <input type="image" src="images/btn.png"> </td> </tr> <!-- 第十二行 --> <tr height="60"> <td></td> <td> <input type="checkbox" checked="checked"> <a href="# "></a>我同意注册条款和会员加入标准</a> </td> </tr> <!-- 第十三行 --> <tr height="40"> <td></td> <td> <a href="login.html" target="_blank">我是会员，立即登录</a> </td> </tr> <!-- 第十四行 --> <tr height="40"> <td></td> <td> <h3> 我承诺</h3> <ul> <li>年满18岁、单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </body> </html>
效果展示：
七.HTML思维导图
扫一扫
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
