Dayday up ---- python Day14
前端第一章
HTML
1、一套规则，浏览器认识的规则
2、开发者
学习html规则
开发后台程序
--- 写html文件(充当模板的作用)
--- 数据库获取数据，然后替换到html 文件的制定文件(web框架)
3、本地测试
--- 找到文件路径,直接用浏览器打开
--- pycharm 打开测试
4、编写html文件
--- doctype 对应关系 <!DOCTYPE html> 规则 统一规范
--- html 标签，标签内部可以写属性
--- html 注释 <!---abc--->
固定格式:
<!DOCTYPE html> <html lang="en"> # lang="en" 标签内部的属性 ,且html 标签只能有一个 <head> </head> <body> </body> </html>
5、标签分类
--- 自闭合标签 比如: <meta charset="utf-8"/>
--- 主动闭合标签 比如: <title>hello</title>
6、head 标签
--- <meta> 编码,跳转,刷新,关键字,描述,ie兼容
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> #页面编码 <meta http-equiv="refresh" content="6" /> # 每6s刷新一次 <meta http-equiv="refresh" content="3;Url=http://www.baidu.com" /> # 打开页面3s后跳转到url地址 <meta name="keywords" content="猜猜猜"/> # 搜索引擎关键字 <meta name="description" content="博客园"/> # 描述 <meta http-equiv="X-UA-Compatible" content="IE=IE7;IE=IE8" /> # IE兼容
--- title 标签 网页头部信息
--- <link />标签 图标
--- <style /> 在页面中写样式
--- <script /> 引进外部文件
<head>标签里面所有的标签都看不见,除了<title>标签
7、body 标签
--- 各种符号
<body>
<!-- 空格 -->
<!-- < 小于 > 大于 -->
<p>hello my beautiful girl</p>
<p><<追风筝的人>></p>
</body>
--- p 和 br 标签
<p> 段落标签,段落之间有间距
<br /> 换行,行之间没有间距
<p>hello girl:<br /> how are you?</p>
--- h1,h2,h3,h4,h5,h6 标题标签,加大加粗
<h1>Hello</h1> <h2>Hello</h2> <h3>Hello</h3> <h4>Hello</h4> <h5>Hello</h5> <h6>Hello</h6>
--- span 标签(白板自身不带任何特性)
<span>hello world</span>
--- input 系列 标签 输入框，可以提交后台
--- form 表单,不管form里面嵌套多少个标签,只提交input 内容
form 和 input 得搭配使用
<form action="https://www.baidu.com/s" method="get">
<!--form 表单,不管form里面嵌套多少个标签，只提交input 内容
action="提交位置/接口",提交只能用submit
method="get/post" 提交方式,get/post只是提交形式不一样,抓包都能抓到-->
<input type="text" name="wd" value="zz" placeholder="关键字" />
<!--name对应后端的标志,value指定默认值,placeholder提供可描述输入字段预期值的提示信息-->
<input type="submit" value="搜索" />
</form>
input
<body>
<form action="https://www.baidu.com/s" method="get" enctype="multipart/form-data">
<!--form 表单,不管form里面嵌套多少个标签，只提交input 内容
action="提交位置/接口"-->
<div>
<input type="text" name="wd" value="zz" placeholder="关键字" /> <!--text 普通文本-->
<!--name对应后端的标志,value指定默认值,placeholder提供可描述输入字段预期值的提示信息-->
<input type="password" name="pwd" value="123" placeholder="密码" /> <!--password 密码格式-->
<p>请选择性别:</p>
男: <input type="radio" name="gender" value="1"> <!--单选框-->
女: <input type="radio" name="gender" value="2" checked="checked">
<!--设置name相同的话就是互斥的,只能选一个,value 提交给后台,checked="checked"默认被选中-->
<p>爱好:</p>
看书: <input type="checkbox" name="favor" value="1" /> <!--复选框-->
听音乐: <input type="checkbox" name="favor" value="2" />
打羽毛球: <input type="checkbox" name="favor" value="3" />
旅行: <input type="checkbox" name="favor" value="4" checked="checked">
<!--value 提交给后台,checked="checked"默认被选中-->
<p>上传文件</p>
<input type="file" name="fname">
<!--默认上传不了，需要依赖form表单的一个属性enctype="multipart/form-data"
表示把文件一点点的发送给服务器-->
</div>
<input type="button" value="登录"/> <!-- 普通按钮 -->
<input type="submit" value="搜索" /> <!-- 提交按钮 -->
<input type="reset" value="重置"> <!--清空内容-->
</form>
</body>
---- div 标签(白板)
---- textarea 标签 多行输入 可以提交后台
---- select 下拉框
<form method="get">
<textarea name="meno" placeholder="您想说什么?">您好</textarea>
<select name="city" size="10" multiple="multiple">
<!--size 指定显示个数 multiple="multiple" 表示可以多选-->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
<option value="5">南昌</option>
<option value="6">深圳</option>
<option value="7">广州</option>
<option value="8">赣州</option>
</select>
<input type="submit" value="提交"/>
</form>
GET/POST
get 把内容放在url里面,请求体为空
post 提交数据，提交内容放在请求体里面,返回数据包括: 请求头，请求体
---- <a />标签 href="#" 表示不跳转
-- 跳转
-- 锚 href="#某个标签id" 标签id绝对不能重复
<body>
<a href="http://www.baidu.com">百度</a>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<a href="#i5">第五章</a>
<div id="i1" style="height: 600px;">第一章内容</div>
<div id="i2" style="height: 600px;">第二章内容</div>
<div id="i3" style="height: 600px;">第三章内容</div>
<div id="i4" style="height: 600px;">第四章内容</div>
<div id="i5" style="height: 600px;">第五章内容</div>
</body>
---- <img src="图片位置" style="格式" alt="当没有图片的时候显示" title="鼠标放在图片的标题" />
<img src="aaa.jpg" style="height: 300px;width: 200px;" alt="onemore" title="截图" />
---- 列表
<!--无序列表-->
<ul>
<li>淘宝</li>
<li>天猫</li>
<li>京东</li>
<li>聚美</li>
</ul>
<!--有序列表-->
<ol>
<li>元旦</li>
<li>五一</li>
<li>十一</li>
<li>圣诞</li>
</ol>
<!--包含列表-->
<dl>
<dt>江西</dt>
<dd>赣州</dd>
<dd>南昌</dd>
<dd>吉安</dd>
<dd>宜春</dd>
</dl>
效果:
---- table 表格
<table border="1">
<!--border显示表格框线-->
<thead>
<!--表头-->
<tr>
<th>user</th>
<th>pwd</th>
<th>uid</th>
<th>gid</th>
</tr>
</thead>
<tbody>
<tr>
<!--行-->
<td rowspan="2">ll</td>
<!-- rowspan 合并行-->
<td>123</td>
<td>u1</td>
<td>g1</td>
</tr>
<tr>
<!--<td>yy</td>-->
<td>456</td>
<td colspan="2">u2</td>
<!--colspan合并列-->
<!--<td>g2</td>-->
</tr>
<tr>
<td>ll</td>
<td>123456</td>
<td>u3</td>
<td>g3</td>
</tr>
</tbody>
</table>
效果:
---- label 标签 ,结合input使用,用于获取光标
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label for="username">用户名:</label>
<input id="username" type="text" name="user"/>
---- fieldset
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。
<body>
<fieldset>
<legend>登录</legend>
<label for="username">用户名:</label>
<input id="username" type="text" name="user"/>
<br/>
<label for="pwd">密码:</label>
<input id="pwd" type="password" name="pass"/>
</fieldset>
</body>
效果：
总结:
所有标签分为:
块级标签: h系列,p标签,div标签(段落之间有间距)
行内标签(内联标签): span标签,input标签,a标签,(在同一行)
标签之间可以嵌套
ps: chrome浏览器审查元素的使用:
-- 定位
-- 查看样式
为什么要写标签,标签存在的意义?
定位操作容易,js获取操作,css操作简单
css
---- 颜色 位置
---- 1、在标签上设置style属性
---- 2、<head><style> 标签中写样式
选择器:
id 选择器:
# ---> id 不可重复
class 选择器 推荐使用
. ---> class 可重复
标签选择器
div{background-color:red;}
<div > </div>
----> 所有div设置此样式
关联选择器(层级选择器)
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
组合选择器
input,div,p{ background-color:red; }
属性选择器 根据标签里的属性做筛选
input[type='text']{ width:100px; height:200px; }
---- 3、css样式也可以写在单独文件里
---- 注释
/* */
---- 优先级
标签上的style优先,其他按编写顺序,就近原则
---- 引用css文件
<link rel="stylesheet",href="aa.css">
---- 边框
- 宽度,样式,颜色
border: 4px dotted red;
height 高度 百分比
width 宽度 像素,百分比
text-align: center 水平方向居中
line-height 垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗
---- float 让标签飘起来,块级标签也可以堆叠
---- display 转换 行内和块级标签
inline 转换成行内
block 转换成块级
inline-block
具有inline 默认自己有多少占多少
具有可以设置高度宽度,padding,margin
none 让标签消失
如果是行内标签,无法设置高度宽度，padding, margin
块级标签可以设置高度宽度，padding,margin
---- padding margin边距
margin : 内边距 去掉边距: margin=0
padding: 外边距
让当前div 居中 margin: 0 auto
父div掌控子div:
<div style="clear: both;"></div>
紧贴浏览器，不留空白边<body style="margin: 0 auto;">
浙公网安备 33010602011771号