用Python 操作Web 前端 基础 1
一，目录
1. HTML ： html就是一套浏览器认识的规则，主要用20个左右的标签
对于开发者来说：学习html规则
1. 本地测试：（1）找到html文件，直接浏览器方式打开，不用socket；（2），pycharm可以直接打开html
2. 编写html文件:
---doctype对应关系
---HTML 标签<html>XXXXX</html>，内部可以添加属性
---Lang="XXX",标签内部属性
3. 标签分类：
---自闭和标签 <meta charset="UTF-8"> 比较少
---主动闭合标签 title>网页名</title>
4. Head标签：
---<meta ->编码，跳转，刷新，关键字，描述，IE兼容
---title标签
--- <link /> 标签图标
---<style />
---<script>
7. <body>标签：
---图标， > <
---P标签（段落），段落之间有间距
---Br标签，用来换行
---<H>标签， 设置字体大小
---<span> 行内标签（区别于块级标签） 只能选择字体范围，不能选择整行
---<div> 块级标签，用的最多。
---标签之间可以嵌套；标签存在的意义，可以用CSS,JS操作。
---input 系列 + form标签
input type = "text" -name属性； ‘value = XXX默认值
input type = ‘password’ -name属性
input type = ‘submit’ - value=‘提交’ 提交按钮
input type = ‘button’ -value=‘登录’按钮
input type = 'radio' -单选框value，name属性（name属性互斥）
input type = 'checkbox' -复选框 Value， name属性，可以获得列表
input type = 'file' 上传文件，依赖form表单的属性‘’
input type = ‘reset’ 重置
<textarea>默认值</textarea> 输入比较多的内容
<select><option> 下拉框选择 select = selected 默认选项；multiple = multiple可以多选；
8. a 标签
---跳转
---锚，就是点击目录可以跳转； herf = ‘#某个标签的ID’， 标签的ID 不允许重复
9. img标签：
---src
---alt
---title
10. list列表标签：
---UL ==> LI 一个列表，前面都是点。
---OL ==> LI 一个列表，前面用数字排序
---DL ==DT,DD DT是上层目录，dd是下层目录
11. table表格标签：
---tbody 表身
---thead 表头
--- colspan = X，行合并X行； rowspan= X， 列合并X行
12. label 标签 用于电子文字，是的关联的标签获取光标
13. fieldset标签： legend 在外围添加一个方框；
14. <div>
15. <h>
16. <span>
开发后台程序：
1，写HTML文件（充当模板的作用）
2， 去数据库获取数据然后替换到html的指定位置（web框架）
2. CSS ：颜色，位置之类的相关操作。。。
----标签的style属性
---写在head里面，style标签中写样式
----id选择器，ID可以给标签设置属性
---class选择器，选择其他的标签并class复制
---标签选择器： div{...}, 所有的div都会设置成此样式；
---层级选择器（空格）==》.c1,.c2 div{}
---组合选择器（逗号） ==》 c1,.c2,div{}
---属性选择器： 对选着到的标签通过属性再进行一次筛选；
---css样式可以单独写在css文件中，然后<link rel='stylesheet' herf= 'css样式文件'>
3。 注释 /* */
4. 边框 ==》boarder: 1px solid color; 宽度，样式，颜色
5. 背景
6.float 让标签漂浮，块级标签可以堆叠
7. display： display: inline 标签都变成行内标签;
display: block 块级标签；
display：inline-block，默认行内标签属性，但是可以设置；
displasy：none， 可以显示可以关闭，类似视频网站开灯关灯
行内标签无法设置宽度和高度，padding，margin；块级标签可以设置；
8. padding， margin（0，auto），内边距，外边距
margin（0，auto）：代表div模块顶边处理，距离上下的边距为0，左右是auto居中
9. text-align
10. height， width， line-height，color，font-size， font-weight（字体加粗），text-align 水平居中
11. position: 浏览器右下角的返回顶部按钮：position：fixed 用来固定在页面的某个位置。
position： absolute+relative ==》固定在某个div的里面的某个位置
12. overflow：hidden 超过范围隐藏； overflow：auto 超过范围会出线滚动条
13. Hover属性： 当鼠标移到某个标签上，这个标签会发生反应， 例如： pg_header.menu: hover; background-color: blue;
14. background-image: url(‘image、gif’)；默认DIV比较大的话，图片重复访问
background-repeat：repeat-y/x 水平或垂直方向重复；no-repeat 就是不重复。
background-position： 可以控制图片的位置； postion-X Y 水平，垂直位置
Javascript:
1. 存在的形式：
---在head中<script>
//javascript 代码
<script>
---或者保存在文件中 <script src='js文件路径'><script>
JS代码块需要放置在<body>标签的最下面
2.变量
name=“112233” 默认是全局变量； var name="2223324" 局部变量
写JS的时候，可以在html里面也，也可以在浏览器的console里面写。
字符串： a.charAt(索引位置)；a.substring(起始位置，结束位置)； a.length:获取当前长度
setInterval（'func()',1000）:每一秒钟执行一次；
var tag = document.getElementById('if'):或者局部变量，结合上面几个字符串和变量，可以让变量动起来
3. Dom 操作： ---找到标签 document.getElementById('ID')获取单个元素
---document.getelementbytagname('div') 获取多个元素
操作标签： innerText： 获取标签中的文本内容
className：
转载于:https://www.cnblogs.com/spencersun/p/9402563.html
用Python 操作Web 前端 基础 1相关推荐
- python的前端个web的前端有什么区别_用Python 操作Web 前端 基础
一,目录 1. HTML : html就是一套浏览器认识的规则,主要用20个左右的标签 对于开发者来说:学习html规则 1. 本地测试:(1)找到html文件,直接浏览器方式打开,不用socket: ...
- python爬虫——web前端基础（1）
1.HTML的基本结构 <html>内容</html>:HTML文档是由<html></html>包裹,这是HTML文档的文档标记,也称为HTML开始标 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- Python 和 Web 前端选择哪个比较合适？哪个前景好？
Python 和 web 前端想必大家都很熟悉,不过很多转行的朋友都会问:学习 Python 还是 web 前端呢?Python 和 Web 前端哪个就业前景好?接下来为大家介绍一下. 其实 Pyth ...
- 【ctf-2】密码学-文件操作-Web前端
本周进行了多方面的学习,进一步了解了ctf的知识,同时对密码学的同余知识.文件操作.Web前端也有了巩固的认知. 在同余中知道了Euler定理,想必这也是日后比较重要的算法基础:在文件操作中,首次进入 ...
- WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- web前端基础与CSS入门
web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
- HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
- html web前端基础(1)
html web前端基础(1) 本人暂时所用的学习软件是HB(HBuilder) 所以下方代码展示也是在HB所呈现的 什么是web : 1.典型的应用: 1.C / S ***** client: 客 ...
最新文章
- cap3拼接sanger序列：在线+本地分析方法实战
- 树状笔记软件for linux,Ubuntu 14.04安装开源树状笔记管理软件 WikidPad 2.2
- 基于2SK4037的射频功率放大电路实验
- Mysql:is not allowed to connect to this MySQL server
- vue 组件以字符串插入_今日分享：vue3多层嵌套组件如何访问到最外层组件的数据？...
- 数据挖掘中聚类算法概述
- [MyBatisPlus]通用枚举
- 22. 链表中倒数第k个节点
- 在Ubuntu下安装qq
- SQL2008,SQL2005存储过程解密
- css颜色跟背景总结（内含实例及截图）
- 如何在win10桌面便签日历中显示法定节假日安排?
- can总线配置读入是什么意思_CAN总线系列讲座第七讲——CAN总线地址设置详解
- Excel公式向导，不会函数也可以单条件求平均值
- linux do_irq 报错 代码,linux-2.6.38中断机制分析—asm_do_IRQ
- 完美国际真数苹果_苹果 or 谷歌，到底谁的设计更好？
- 老调重弹之ffmpeg视频时间同步
- Java并发包学习(CountDownLatch,Seamphore,CyclicBarrier,Exchanger)
- linux 安装cvs,linux下cvs详细安装和配置.docx
- web存储三种方式：cookie、sessionStorage、localStorage