一、列表标签
| 无序列表 | <ul> <li>无序列表</li> <li>无序列表</li> </ul> |
| 有序列表 | <ol type = "A" start = "4"> <li></li> <li></li> </ol> type类型 start 开始 |
| 自定义列表 | <dl> <dt>可以是文字也可以是图</dt> <dd>相关文字 </dd> </dl> |
1、有序列表
<!-- 有序列表 -->
<!--
1.li里面可以随意放标签，但是ol里面只能放li
2.数字是自动生成的
3.type: 1 I A a i
4.start:开始序号
-->
<ol>
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<hr noshade>
<ol type = "A" start = "3">
<li>ddd</li>
<li>yia shia</li>
<li>shiih eid</li>
</ol>2、无序列表
<!-- 无序列表 -->
<!--
1.ul里面只能放li,li里面可以放其他标签
2.默认的是黑色的实心圆
3.type:disc,circle square none(用的多)
-->
<ul>
<li>1234xu</li>
<li>jjien</li>
<li>jiemmoos</li>
</ul>
<hr noshade>
<ul type = "circle">
<li>1234xu</li>
<li>jjien</li>
<li>jiemmoos</li>
</ul>
<ul type = "square">
<li>1234xu</li>
<li>jjien</li>
<li>jiemmoos</li>
</ul>
<ul type = "none">
<li>1234xu</li>
<li>jjien</li>
<li>jiemmoos</li>
</ul>3、自定义列表
<!-- 自定义列表 -->
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>示例图片：
二、图片标签
1、路径的分类
①绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如bg.jpg"这个图片是存放在硬盘的“E.Nlbook\网页布局代码\第2章"目录下，那么“bg.jpg"这个图片的绝对路径就是"E:\book\网页布\代码\第2章lbg.jpg"。
注意：绝对路径在实际的开发过程中很少去使用，如果使用"E:\bookl网页布\代码\第2章\bg.jpg"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用""\"或“/”字符作为目录的分隔字符
②相对路径
相对路径，就是相对于自己的目标文件位置。 当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名;<img src="pic4.gif" />
2、图片标签
<img src = "图片路径" title = "鼠标悬停上去之后的提示信息" alt = "图片不显示之后（加载失败）的提示信息" width = "" height = "">
①同级目录
<body>
<!--
同级目录
1.1.webp
2../1.webp-----.当前目录下
3.D:\VSC\img\1.webp---绝对路径（一般不使用）
-->
<img src="1.webp" alt="">
<img src="./1.webp" alt="">
<!-- <img src="D:\VSC\img\1.webp" alt=""> -->
<img src="codeimg/3.webp" alt="">
<img src="./codeimg/3.webp" alt="">
</body>②多级目录
<body>
<!-- ..----相当于往前退两级目录 -->
<!-- 往前退两级目录，在目录codeimg中找图片2.webp -->
<img src="../codeimg/2.webp" alt="">
<img src="../1.webp" alt="">
</body>③图片属性
a. alt = ""(图片不显示之后（加载失败）的提示信息)
b. title = ""(鼠标悬停上去之后的提示信息)
c. width/height = ""(宽高)
注：图片加载失败时，鼠标悬停在上面是会显示图片的提示信息
<body>
<img src="11.webp" title = "玫瑰花" alt="请尝试刷新页面">
<img src="1.webp" title = "玫瑰花" alt = "请尝试刷新页面">
<img src="1.webp" width = "300px" height = "200px">
<!-- 只写宽度/高度时，图片会等比例缩放 -->
<img src="1.webp" width = "100px" >
</body>示例图片:
三、费曼学习技巧案例
<body>
<h1>世上最强学习方法——费曼学习法（深度学习）</h1>
<p>作者:秋小曦 2017.04.10 字数：1086 阅读：19865</p>
<h3> 一、选择目标领域，并完全了解这个概念</h3>
<p>
将需要学习的概念写在纸上，尽可能的去熟悉这个概念。<br>
<ol>
<li>一定要将自己脑海的语言组织出来并反应在书面上</li>
<li>如果写不出来再回去看哪里不懂</li>
</ol>
</p>
<h3>二、向别人复述这个概念</h3>
<p>
  向身边人复述一遍你所学习到的知识，如果没有，就只好假装自己是一个老师（脑洞少女的日常），<br>
向学生复述这个概念，记住，尽量使用简单的语言，这一步是为了让你更好的融入自己的理解。在复<br>
述时，一定会在所难免的会卡住，或者结巴，叙述不完整。这时候，恭喜你，喜提知识概念薄弱点。<br>
这时候，将这些薄弱点重新学习巩固一遍，直到真正理解。
</p>
<img src="3.png" title = "费曼学习法" alt="请刷新页面" width="500" >
<p>
  <strong>费曼学习法是我大学时经常使用的学习方法，适合较短时间内深入学习（期末考试抱大腿），</strong>对于这<br>
个方法有点相见恨晚的感觉。最初是来自理查德·菲利普斯·费曼（美籍犹太裔物理学家，加州理工学<br>
院物理学教授，1965年诺贝尔物理奖得主）。在教育方面，其最大的贡献在于费曼技巧，也就是说能<br>
够用最单的语言介绍任何概念，无论这个概念多么复杂。
</p>
<img src="2.png" title = "费曼学习法四步" alt="请刷新页面" width="500">
<p> <strong>费曼学习法的具体步骤，很简单</strong></p>
<ol>
<li>确定学习目标</li>
<li>模拟教学学习法</li>
<li>回顾</li>
<li>简化</li>
</ol>
</body>示例图片：
四、超链接标签
能够实现不同页面的跳转
<a href = "路径" title = "鼠标悬停上去之后的提示信息" target = "规定在何处打开文档" >
内容
</a>
①href
点击，跳转到什么地方去（可以是已知网站，也可以是自己写的）
注意：没有访问过时默认时蓝色的，访问过后时紫色的（可以改变颜色）
②target
Target属性：规定在何处打开文档
A：target = "_self" 默认值
B：target = "_blank" 新窗口打开
③图片跳转
直接将图片标签嵌套在a标签里面
<a href="day02--费曼学习法.html" target = "_blank"><img src="3.png" alt="" width="300">
</a>
<body>
<!-- 没有访问过时默认时蓝色的，访问过后时紫色的(可以改变颜色) -->
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target = "_blank">百度</a>
<a href="day02--费曼学习法.html" target = "_blank">费曼学习法</a>
<a href="day02--费曼学习法.html" target = "_blank" title = "费曼学习法查询"><img src="3.png" alt="" width="300"></a>
</body>五、table表格
1、 数据表格的创建
<table><!-- 创建表格 -->
<tr><!-- tr 表示行 -->
<td>1</td><!-- td 表示单元格 -->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>注意：这样子创建只有简单的内容显示，没有框架等。
2、表格的属性
a.宽度：width（单元格的宽度，内容长度一样是等分，内容不一样是自动的）
b.高度：height（单元格的高度）
c.边框：border（控制外边框的像素）
d.边框颜色：bordercolor
e.背景颜色：bgcolor
f.水平对齐：align = "left或right或center"
g.cellspacing = "单元格与单元格之间的间距"
h.cellpadding = "单元格与内容之间的空隙"
<!-- width 单位：px,百分比(相对于父元素的) -->
<!-- height 单位：px,百分比（相对于父元素的） -->
<table border = "1" width = "300" height = "200"
align = "center" bordercolor = "red"
bgcolor = "green" cellspacing = "0"
cellpadding = "10"><!-- 创建表格 -->
<tr><!-- tr 表示行 -->
<td>1</td><!-- td 表示单元格 -->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>前后对比：
3、行tr的属性
a.高度：height
b.背景颜色：bgcolor
c.文字对平对齐：align = "left或right或center"（单元格中的内容）
d.文字垂直对齐：valign = "top或middle或bottom"
<table border = "1" width = "300" height = "200"
cellspacing = "0" cellpadding = "10">
<tr bgcolor = "blue" height = "100" align = "center" valign = "top">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
4、单元格td的属性
a.宽度：width
b.高度：height
c.背景颜色：bgcolor
d.文字水平对齐：align = "left或right或center"
e.文字垂直对齐：valign = "top或middle或bottom"
<!-- td：如果一个单元格设置宽度，影响的是这一整列的宽度 -->
<!-- td：如果一个单元格设置高度，影响的是这一整行的高度 -->
<table border = "1" width = "300" height = "200"
cellspacing = "0" cellpadding = "10">
<tr bgcolor = "blue" height = "100" align = "center" valign = "top">
<td width = "200">1</td>
<td height = "100" >2</td>
</tr>
<tr>
<td bgcolor = "red" align = "right" valign = "top">3</td>
<td>4</td>
</tr>
</table>
5、表格合并
Colspan = "所要合并的单元格的列数"——必须给td
Rowspan = "所要合并的单元格的行数"——必须给td
注意：要将被挤出去的单元格注释掉
<table border="1" cellspacing="0" width="300" height="300">
<tr>
<td>不毛</td>
<td>魏国</td>
<td>辽东</td>
</tr>
<tr>
<td>蜀国</td>
<td>西凉</td>
<td>幽州</td>
</tr>
<tr>
<td>南中</td>
<td>吴国</td>
<td>荆州</td>
</tr>
</table>
<table border = "1" cellspacing = "0"width = "300" height = "300">
<tr>
<td>不毛</td>
<td colspan="2" rowspan="2">魏国</td>
<!-- <td>辽东</td> -->
</tr>
<tr>
<td rowspan="2">蜀国</td>
<!-- <td colspan="2">西凉</td> -->
<!-- <td>幽州</td> -->
</tr>
<tr>
<!-- <td>南中</td> -->
<td colspan="2">吴国</td>
<!-- <td>荆州</td> -->
</tr>
</table>
6、表格案例
<table border="1" cellspacing="0" width="500" height="200">
<tr height="50" align="center">
<td width="130">会员姓名</td>
<td width="200"></td>
<td width="130">出生日期</td>
<td width="200"></td>
</tr>
<tr height="50" align="center">
<td>身份证号</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="50" align="center">
<td>通信地址</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="50" align="center">
<td>练习电话</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="50" align="center">
<td>会员卡号</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
</table>
7、表单标签
什么是表单？
表单的作用：收集用户信息
<form method = "get或者post" action = "向何处发送表单数据">
<input/>
A.属性 type定义输入框的类型
a）文本框 type = "text" 密码框 type = "password"
b）提交框 type = "submit" 和 <button>提交按钮</button>一样
c）按钮框 type = "button"单纯的按钮
d）重置框 type = "reset"清空的效果
B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给 服务器
D.value
</form>
注意：Form当中method的post和get的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4 (InternetInformation Service互联网信息服务）中最大量为80KB，IIS5中为100KB
5.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
<body>
<form action="http://www.baidu.com/" method="POST">
用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写"
name="username">
<br>
密码：<input type="password" placeholder="请输入密码" name="passwd">
<br>
<!-- <input type="submit" value="登录"> -->
<button type="submit">登录</button>
<!-- 提交信息到 action指定的地址 -->
<input type="reset" value="重新输入">
<!-- 普通按钮 -->
<input type="button" value="aaa">
</form>
</body>GET于POST对比：
用户姓名和密码显示出来了
因为代码中action到百度，但是百度不会接收账号和密码，所以会错误。action到后端中，后端接收账号和密码。
扫一扫
4459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
