day02 html
一.body中的标签
a标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--a标签: 默认在自己的页面打开这个超链接target="_self"; 在新的标签页打开target="_blank"(空白)-->
<a href="../day36/06.html", target="_blank">目录内标签</a>
</body>
</html>
a标签: 在当前的页面中导航 (加锚点)
也可以阻止a标签默认点击行为
还可打电话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<div id="bbs">bajie</div>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<!--hash值 锚点 默认有点击行为-->
<!--file:///C:/Users/THINKPAD/PycharmProjects/s15/day37/01.html#bbs: 在url后面加锚点; 如果只有单独的#号, 就是跳转到顶部-->
<a href="#bbs">找bajie3</a>
<!--阻止a标签的默认的点击行为-->
<a href="javascript:void(0);">找bajie1</a>
<!--弹出框-->
<a href="javascript:alert('弹个框');">找bajie2</a>
<!--打电话-->
<a href="tell:13683366336">打电话</a>
</body>
</html>
img和a的共同使用: 加小手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
display: block;
/*width: 300px; #在这里写宽高不管用*/
/*height: 300px;*/
}
</style>
</head>
<body>
<div class="box">
<!--单独img,鼠标到图片上没有小手, 外面用a标签包住, 就有了小手-->
<!--当用a包裹img时, img图片下面会有一行a标签的空行, 就会影响到排版: 用行内转换解决-->
<a href="javascript:void(0);">
<img src="file:///C:\Users\THINKPAD\Desktop\bajie.jpg" alt="图片" width="300" height="300">
</a>
</div>
<div>bajieaishuishui</div>
</body>
</html>
ul: unordered list: 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--ul: unordered list: 无序列表: ul下的子元素只能是li(print 的每一项可以用li来存放)-->
<ul>
<!--每个li的前面都有一个内边; 还有一个点(默认是实心点); 未来要干掉他们-->
<li>bajie</li>
<li>datang</li>
<li>wukong</li>
<li>bajie</li>
<li>分类
<ul>
<li>bajie</li>
<li>datang</li>
<li>wukong</li>
<li>分类
<ul>
<li>bajie</li>
<li>datang</li>
<li>wukong</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul type="square">
<li>实心方框</li>
</ul>
<ul type="circle">
<li>空心圆框</li>
</ul>
</body>
</html>
ol: ordered list: 有序列表
<!--ol: ordered list: 有序列表:ul下的子元素也只能是li: 前面出现的不是小圆点了, 而是1.2.3.4.5.这些-->
<ol>
<li>bajie</li>
<li>悟空</li>
<li>大唐</li>
<li>bajie</li>
</ol>
<!--ol: type默认是数字, a是字母, i,I是罗马数字; start是从第几个开始的数字或字母-->
<ol type="a" start="4">
<li>bajie</li>
<li>悟空</li>
<li>大唐</li>
<li>bajie</li>
</ol>
dl: definition list: 定义列表
<!--dl: definition list: 定义列表 : 子元素是dt和dd; 没有属性, 一般用在页面的尾部-->
<dl>
<dt>定义标题</dt>
<dd>定义描述</dd>
<dd>定义描述</dd>
<dd>定义描述</dd>
<dt>定义标题</dt>
<dd>定义描述</dd>
<dd>定义描述</dd>
<dd>定义描述</dd>
</dl>
table:表格
<!DOCTYPE html>
<!--#打开页面时,弹出"翻译此页?"-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--table:表格: border边界,collapse塌陷: 展示型的标签, tr表格行, td表格项 -->
<table border="1" style="border-collapse: collapse;" width="100%">
<caption>人物介绍</caption>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<!--单元格的合并: 纵向合并-->
<td rowspan="3">work</td>
</tr>
<tr>
<td>1</td>
<td>bajie</td>
<td>300</td>
</tr>
<!--单元格的合并:横向合并, 先删掉某个, 然后加属性colspan-->
<tr>
<td>2</td>
<td colspan="2">wukong</td>
<!--<td>500</td>-->
</tr>
</table>
</body>
</html>
form 表单标签:
作用: 与服务器进行交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form: 表单: 作用: 与服务器进行交互, http协议: 请求的方式: get post.
action提交哪个网址,
method默认是get,-->
<!--页面中的img, a, link标签默认都是get请求-->
<!--action里不写, 默认在本url上提交: file:///C:/Users/THINKPAD/PycharmProjects/s15/day37/05.html?username=bajie&password=123: 这个是get提交的url格式
name=""属性会被封装成key
value=""属性会被封装成value
多个keyvalue用&符号分隔
注意: password=123 暴露了, 所以注册不用get请求-->
<form action="" method="get" enctype="multipart/form-data">
<!--input 表单控件:
type:
text:文本输入框,
password 密码输入框,
file: 上传文件的,
submit提交按钮提交的是action中的url,
button普通按钮
radio:单选
checkbox: 多选
reset: 重置按钮
number:只能输入数字
name: 提交到服务器端的key.
value: 显示的文本内容, 与服务器端的value对应-->
<!--label 标签: for: 是与下面的某个表单控件的id属性进行关联-->
<!--select : 下拉菜单, 元素是 option-->
<!--textarea: 文本框-->
<p>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button type="button">普通按钮</button> #这两button一样
<input type="number" name="number" value="只能输入数字">
</p>
<p>
<!--提交文件的时候, 要告知编码方式, Enctype, 文件提交要用post, 因为地址栏长度有限制, 最多好像是2k-->
<input type="file" name="mp3">
</p>
<p>
<!--radio:单选: 当给相同的name时, 就有了互斥的属性; checked 给出默认选项-->
男:<input type="radio" name="sex" value="man" checked>
女:<input type="radio" name="sex" value="woman">
</p>
<p>
<!--checkbox: 多选:-->
爱好:
<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</p>
<p>
<select name="persion">
<!--selected 设置默认选项-->
<option value="1">大唐</option>
<option value="2" selected>八戒</option>
<option value="3">悟空</option>
<option value="4">小李</option>
</select>
</p>
<p>
<h3>我的描述</h3>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
</form>
</body>
</html>
内容总结:
1.标签嵌套
行内标签, 块标签
行内标签不能嵌套块标签, 但不是绝对的
块标签可以嵌套块标签/行内标签
但是p标签:只可以嵌套字体,图片,表单,而且不能嵌套
2.table
tr
td
3.form: action methods(get|post) enctype
input
type
text
password
submit: 与action相关
file: 与enctype相关,mothods一定是post请求
radio
checkbox
name
value
select
option
textarea
rows
clos
lable
for: 对应input里的id
4.python:
input()
print()