Python-day14
来源:互联网 发布:法文翻译软件 编辑:程序博客网 时间:2024/06/07 05:03
html基础知识点:
1.web服务端其实只是运行socket服务端,而客户的浏览器充当socket客户端,服务端返回的数据永远只是字符串,如果字符串中的格式恰好是浏览器认识的,就会转化成各种颜色以及样式
2.DOCTYPE 标准的对应关系
3.html标签(只能有一个,相当于人的身体,是主体)
4.head标签(相当于脑袋,是内在的东西,支配所有动作,外在是看不到的)
5.自闭合标签meta
6.搜索引擎:
<meta name="keywords" content="汽车之家!"><meta name="description" content="汽车之家为你服务!!!">
7.指定IEX版本运行网站
<meta http-equiv="X-UA-Compatible" content="IE=IE9">
8.body标签(构造内容的标签)
<a href="http://soccer.hupu.com">李杰</a> 跳转网页的链接
9.p标签(段落,不会默认换行)
<p>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
注:标签存在的意思是更好定位,操作容易
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" content="3 Url=http://soccer.hupu.com">--> <meta http-equiv="X-UA-Compatible" content="IE=IE9"> <meta http-equiv="Refresh" content="3"> <meta name="keywords" content="汽车之家!"> <meta name="description" content="汽车之家为你服务!!!"> <title>老男孩</title></head><body> <a href="http://www.oldboyedu.com">老男孩</a></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--  表示空格的意思 >是大于号的意思 --><!-- <br>标签是换行的意思,但是此时的换行后的内容依然是同一个段落(块级标签) --><!-- <p>标签段落和段落之间有间距 (块级标签) --><!-- <hx>标签是标题标签,依次从小到大(块级标签),加大加粗 --> <a href="http://soccer.hupu.com">李 <a>杰</a> <p>sssssssssssssssssssss<br>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p> <h6>alex</h6> <h5>alex</h5> <h4>alex</h4> <h3>alex</h3> <h2>alex</h2> <h1>alex</h1><!-- span(白板,什么特性都没有)标签不会占用一行,只是内容区域占用,区别于以上的标签(行内标签) --> <span>asfasf</span> <span>asfasf</span> <span>asfasf</span> <span>asfasf</span> <span>asfasf</span> <span>asfasf</span><!-- <div>标签也是白板,没有任何特性,但是是块级标签--><!-- chrome审查元素的使用 --> <div>1</div> <div>2</div> <div>3</div><!-- input标签,text明文,password密文--><!-- 如果想达到提交数据的效果必须用<form>表单标签抱着,类似于去银行办手续必须填表单才能提交系统--> <form> <input type="text"/> <input type="password"/> <input type="button" value="登录1"/> <input type="submit" value="登录2"/> </form> <br /> <!--<form action="www.baixxx.com action是提交数据的意思,而且是通过字典的方式提交 ">--><!-- 同样是按钮,默认button什么用处都没有,以后会有用,此时submit才有按的作用--><!-- 如果标签没有name值,那么server端后台是抓不到对应的数据的--> <form action="" method="post"> <input type="text" name="username"/> <input type="password" name="password"/> <input type="button" value="登录1"/> <input type="submit" value="登录2"/> </form></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form action="https://www.sogou.com/web"> <!-- https://www.baidu.com/s?wd=C%E7%BD%97 get 请求,以后也可以提交wd=xxx 提交数据 --> <!-- input text 中设置value属性代表输入框内有默认值--> <input type="text" name="query" value="123"> <input type="submit" value="搜索"> </form></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form enctype="multipart/form-data"> <div> <!--<select name="city">--> <!--<option value="1">上海</option>--> <!--<option value="2">深圳</option>--> <!--<option value="3">香港</option>--> <!--</select>--> <!-- 多选 --> <!--<a href="http://www.baidu.com" target="_blank">跳转吧,少年!</a>--> <a href="#id1">皇马</a> <a href="#id2">巴萨</a> <a href="#id3">拜仁</a> <a href="http://www.baidu.com"> <!--alt的意思是如果图片路径不存在那么显示内容--> <img src="../image/search1.jpg" title="克里斯蒂亚诺" style="height: 500px;width: 200px;" alt="金球先生"> </a> <p></p> <!-- 加上ID,使得超链接跳转到页面对应的标签位置--> <div id="id1" style="height: 500px;">皇马</div> <div id="id2" style="height: 500px;">巴萨</div> <div id="id3" style="height: 500px;">拜仁</div> <!--ul ol dl 列表--> <ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> </ul> <ol> <li>312</li> <li>312</li> <li>312</li> <li>312</li> </ol> <dl> <dt>123</dt> <dd>222</dd> <dt>123</dt> <dd>333</dd> </dl> <!-- 表格 --> <!-- a标签不能提交到后台,a标签拿来做超链接,且拿来做锚点--> <!--<select name="city" multiple="multiple" size="10">--> <!--<option value="1">上海</option>--> <!--<option value="2">深圳</option>--> <!--<option value="3">香港</option>--> <!--</select>--> <input type="text" name="user"> <p>请选择性别:</p> <!-- 如果标签相同都是gender,那么就是互斥的状态 --> 男:<input type="radio" name="gender" value="1"> 女:<input type="radio" name="gender" value="2"> <p>请选择爱好:</p> <!-- checked 默认勾选 --> 足球:<input type="checkbox" name="favor" value="1" checked="checked"> 篮球:<input type="checkbox" name="favor" value="2" checked="checked"> 排球:<input type="checkbox" name="favor" value="3" checked="checked"> <p>请选择科目:</p> 语文:<input type="checkbox" name="skill" value="1"> 数学:<input type="checkbox" name="skill" value="2"> 英语:<input type="checkbox" name="skill" value="3"> <p>上传文件</p> <!--下面这样默认发不了文件,因为它依赖form表单的一个属性multipart/form-data--> <input type="file" name="fname"> </div> <p></p> <!--多行输入,且默认值要放中间,不是value--> <textarea name="memo">12312312312</textarea> <input type="submit" value="提交"> <input type="reset" value="重置"> </form></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- 表格 (简单写法) --><!--<table border="1">--><!--<!– 表示一行 –>--><!--<tr>--><!--<!– 表示一列 –>--><!--<td>第一行第一列</td>--><!--<td>第一行第二列</td>--><!--<td>第一行第三列</td>--><!--</tr>--><!--<tr>--><!--<td>--><!--<a href="s1.homework">第二行第一列</a>--><!--</td>--><!--<td>第二行第二列</td>--><!--<td>第二行第三列</td>--><!--</tr>--><!--<tr>--><!--<td>第三行第一列</td>--><!--<td>第三行第二列</td>--><!--<td>第三行第三列</td>--><!--</tr>--><!--</table>--><!-- 表格详细版写法(推荐用这种) --><table border="1"> <thead> <tr> <th>第1行第1列</th> <th>第1行第2列</th> <th>第1行第3列</th> </tr> </thead> <tbody> <tr> <!-- 合并单元格 (上下) --> <td rowspan="2">11</td> <!-- 合并单元格 (左右) --> <td colspan="2">21</td> </tr> <tr> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </tbody></table></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><label for="user">用户名:</label><input id="user" type="text" name="username"></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../homework/form.css"/> <!--<style>--> <!--/*.c1{*/--> <!--/*height:100px;background-color:#a99e3a;*/--> <!--/*}*/--> <!--/*div{*/--> <!--/*height:50px;background-color:#99216b;*/--> <!--/*}*/--> <!--/* 层级标签 */--> <!--/* .cl,.c2 组合选择器 */--> <!--/*span div{*/--> <!--/*height: 30px;background-color: rebeccapurple;*/--> <!--/*}*/--> <!--/*!*<!– 属性选择器 .c1–>*!*/--> <!--/*input[type='text']{width: 340px;height: 120px;}*/--> <!--/*.c2 {*/--> <!--/*background-color: aqua;height: 129px;*/--> <!--/*}*/--> <!--/*.c1 {*/--> <!--/*background-color: rebeccapurple;color: red;font-size: 30px;*/--> <!--/*}*/--> <!--</style>--></head><body><!-- 给标签加入了属性,这就是CSS --><!-- 由于id不能重复,如果想实现样式重用一般都用class的方式--><!-- 优先级写在当前标签的style优先级最高,其次是写在头部style中最底部的优先级高--><div class="c1" style="background-color: red">1</div><div class="c1">2</div><div class="c1">3</div><span> <div> <input type="text"> <input type="password"> </div> </span></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- 边框 像素大小 实线虚线 颜色 --><!-- float 浮动效果(有坑,还不知道是什么) --><div style="border: 4px solid red; float: left; width: 20%;height: 40px;text-align: center;line-height: 40px"> asfasfafa</div><div style="float: left; width: 40%; background-color: red"> sss</div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header { height: 15px; background-color: rebeccapurple; } </style></head><body style="margin: 0 auto;"><div class="pg-header"></div></body></html>
阅读全文
0 0
- Python-day14
- python day14 python 反射
- day14 Python css边距
- day14 Python Css漂浮
- day14 Python Css对话框
- day14 python logging复习
- Python day14 logger复习
- python day14(20170310 )
- DAY14 PYTHON 数据类型 字符串
- day14 python Css中的display
- day14 Python css Positon relative
- day14 Python format字符串格式化
- python自动化之路-day14
- day14
- DAY14
- day14
- day14
- day14
- sublime text 快捷键
- JQuery效果—编写弹窗
- Jquery Grid表格插件 设置指定行/每行 颜色
- Mybatis 小总结
- kotlin集合操作符——顺序操作符
- Python-day14
- 微信支付接入遇到的问题
- Windows环境下编译Assimp库生成Android可用的.so文件
- spring boot jpa配置
- jQuery实现的简单鼠标拖拽功能
- java中的线程安全
- 关于iOS11下关于UIViewController属性弃用导致含有ScrollView功能的控件出现问题的解决方案
- 利用@media screen实现网页布局的自适应
- Zxing生成二维码 条形码