python html css 初识
##################总结############
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
输入 html:5,按tab键后
<!DOCTYPE html>
<html lang="zh-CN"> #这个lang表示语言,zh-CN是中文的意思,就是说,你整个文档的内容以中文为主,如果以英文为主,就写成lang='en' <head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body> </body>
</html>
head标签 包含了<title> <meta> <link> <stype>
<title>
:指定整个网页的标题,在浏览器最上方显示。<meta>
:提供有关页面的基本信息<link>
:定义文档与外部资源的关系。(最多)- <style>:定义内部样式表与网页的关系
内联标签和块标签
body标签中 内联标签:在一行内显示,不换行 不能设置宽高,如果不设置宽高,默认就内容的宽高
行内标签 img input 可以设置宽高
常见内标签: <span>标签
span里面只能放置文字,图片,表单元素.span里面不能放p,h,ui,dl,ol.div
<a>标签
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
<img>标签
<img src="2.jpg">
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
<b>加粗</b>或<strong> <i>斜体</i>或<em> <u>下划线</u>
<s>删除</s>
块级标签:独占一行 可以设置宽高,如果不设置默认是父盒子宽的100%
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6> div:把标签中的内容作为一个块来对待,必须独占一行
div标签的属性:
align ="属性值"
:设置块儿的位置。属性值可选择:left、right、 center
p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。
<!--换行--> <br>
<!--水平线--><hr> #就是单独个一个水平线 特殊字符
空格
> >
< <
& &
¥ ¥
版权标识(写公司网站的时候会用到) ©
注册(一个圆圈里面有个R) ®
列表
无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式) 有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性: start是从数字几开始 1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
表格
<table border="" cellpadding="" cellspacing="">
<thead>#标题部分
<tr>#一行
<th>id</th>#一个单元格
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>#内容部分
<tr>#一行
<td>1</td>#一个单元格
<td colspan="">宝宝</td>
<!--<td rowspan="">18</td>-->
</tr>
<tr>
<td>2</td>
<td>培斌</td>
<td>16</td>
</tr>
<tr>
<td>3</td>
<td>大力</td>
<td>18</td>
</tr> </tbody>
<tfoot>
<tr>
<td>这是一行注释</td>
</tr>
</tfoot>
</table> 属性: border: 表格边框.
cellpadding: 内边距 (内边框和内容的距离)
cellspacing: 外边距.(内外边框的距离)
width: 像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
input 标签
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type=text" /> |
password | 密码输入框(不显示明文) | <input type="password" /> |
date | 日期输入框 | <input type="date" /> |
checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
radio | 单选框 | <input type="radio" name='x' /> |
submit | 提交按钮 | <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新 |
reset | 重置按钮 | <input type="reset" value="重置" /> #页面不会刷新,将所有输入的内容清空 |
button | 普通按钮 | <input type="button" value="普通按钮" /> |
hidden | 隐藏输入框 | <input type="hidden" /> |
file | 文本选择框 | <input type="file" /> (等学了form表单之后再学这个) |
submit 按钮 默认会进行提交 button 不会
select标签 多选下拉框
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option> #默认选中,当属性和值相同时,可以简写一个selected就行了
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明:
- multiple:布尔属性,设置后为多选下拉框,否则默认单选
- disabled:禁用
- selected:默认选中该项
- value:定义提交时的选项值
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明:
name:名称
rows:行数 #相当于文本框高度设置
cols:列数 #相当于文本框长度设置
disabled:禁用
from 提交
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
<!--<form action="" method="post" enctype="multipart/form-data">-->
#如果是file 类型的文件 需要加 enctype="multipart/form-data"
<form action="">
<!--<p>-->
<!--用户名:<input type="text" name="username">-->
<!--</p>-->
<!--<p>-->
<!--密码: <input type="password" name="password">-->
<!--</p>-->
<p>
性别: <input type="radio" name="gender" value="man" checked>男 <input type="radio" name="gender" value="woman" id="nv">
<label for="nv">女</label> </p>
<p>
爱好:
<input type="checkbox" name="hobby" value="cy" >抽烟
<input type="checkbox" name="hobby" value="hj" >喝酒
<input type="checkbox" name="hobby" value="tt" >烫头
</p> <!--<p>-->
<!--<input type="reset">-->
<!--</p>--> <!--<p>-->
<!--<input type="hidden" name="yc" value="这是一个隐藏的数据">-->
<!--</p>--> <!--<input type="date" name="date">--> <!--<p>-->
<!--<input type="file" >-->
<!--</p>-->
</form>
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a name="top">顶部</a>
<div>
ewqeqwewqewqeq<br>
wqeqwewqeq<br>
wqewqeqwe<br>
wqeqw<br>
eqweqw<br>
ewq<br>
e<br>
..........
.........
</div>
<a href="#top">回到顶部</a>
</body>
</html>
css
3种引入方式
行内样式
<div style="width: 100px;height: 100px; background-color:red;">
</div>
内接样式
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style> 外接样式
<link rel="stylesheet" href="./05_style.css"> 05_style.css文件中写 标签选择器
div{
width: 100px;
height: 100px;
background-color: red;
}
id选择器
#box1{
width: 200px;
height: 200px;
background-color: green;
} 类选择器
.box2{
width: 100px;
height: 100px;
background-color: orange;
}
百度注册页面模仿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="./06_style.css">
</head>
<body>
<!--<span>这是一个行内标签</span>--> <div class="div-form">
<form action=""> <p class="p-right">
用户名:
<input type="text" name="username" value="请设置用户名" class="input-1">
</p>
<p class="p-right">
手机号:
<input type="text" name="tel" value="可用于登录和找回密码" class="input-1">
</p>
<p class="p-right">
密码:
<input type="password" name="pwd" class="input-1">
</p> <p class="p-right">
验证码
<input type="text" name="code" value="请输入验证码" class="code">
<input type="button" value="获取手机验证码" class="code-button">
</p> <!--<div class="p-right">-->
<div style="width: 450px;" class="p-right">
<input type="checkbox" name="accept">
<span>阅读并接受 <a href="#">《百度用户协议》</a> 及 <a href="#">《百度隐私权保护声明》</a></span> </div> <!--</div>--> <p class="p-right">
<input type="submit" value="注册" class="input-submit">
</p> </form> </div>
</body>
</html>
##########css文件#############
.input-1{
width: 350px;
height: 40px;
}
.p-right{
text-align: right;
}
.div-form{
width: 450px;
}
.code{
height: 40px;
width: 188px;
}
.code-button{
height: 40px;
width: 158px;
}
span{
font-size: 12px;
}
.input-submit{
width: 350px;
height: 50px;
background-color: #3f89ec;
color: #fff;
font-size: 16px;
}
python html css 初识的更多相关文章
- 孤荷凌寒自学python第二十一天初识python的类
孤荷凌寒自学python第二十一天初识python的类 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 类是面向对象的编程语言非常重要的概念. 编程语言的进化史中从顺序编程到结构化编程,最后才 ...
- Python 入门 之 初识面向对象
Python 入门 之 初识面向对象 1.初识面向对象编程 (核心--对象) (1)观察以下代码: # 面向过程编程 s = "alexdsb" count = 0 for i i ...
- 前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 0008 CSS初识(行内式、内部样式表、外部样式表)
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
- python函数-函数初识
python函数-函数初识 1.函数的定义 语法 def 函数名(参数1,参数2,参数3,...): '''注释''' 函数体 return 返回的值 2.函数的使用原则---先定义后调用 #定义阶段 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- 01----python入门----python安装与初识
----python入门----python安装与初识 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 这是一个很好的开头!但是 ...
- 2020年12月-第02阶段-前端基础-CSS初识
CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...
- python 之 前端初识 html
html语法代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- BZOJ3676[Apio2014]回文串——回文自动机
题目描述 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. 输入 输入只有一行,为一个只包含小写字 ...
- Dirichlet's Theorem on Arithmetic Progressions POJ - 3006 线性欧拉筛
题意 给出a d n 给出数列 a,a+d,a+2d,a+3d......a+kd 问第n个数是几 保证答案不溢出 直接线性筛模拟即可 #include<cstdio> #inclu ...
- HDU4864 Task(算竞进阶习题)
贪心 比较巧妙的贪心..先把所有机器和任务按时间是第一关键字,等级为第二关键字排序. 然后用机器去匹配每一个任务. 排序之后,在时间上满足当前任务的机器,必定也在时间上满足后面的机器,所以我们每次把时 ...
- c# Redis 使用
1.服务端两个版本窗口版与安装windows服务版 1.1.窗口版 下载地址:https://github.com/dmajkic/redis/downloads redis-server.exe:服 ...
- session的基本原理及安全性
1.session原理 提到session,大家肯定会联想到登录,登录成功后记录登录状态,同时标记当前登录用户是谁.功能大体上就是这个样子,但是今天要讲的不是功能,而是实现.通过探讨session的实 ...
- 怎么让 Lua 5.3.4 支持中文变量名和中文函数名
1. 在官网下载最新版Lua源码 Lua :Download 2. 解压后进入目录,找到/src/llex.c,打开修改 找到如下内容 修改为下面代码,并保存. default: { if (lisl ...
- MongoDb 命令查询所有数据库列表
原文:http://blog.csdn.net/huxu981598436/article/details/47216493 MongoDb 命令查询所有数据库列表 CODE: > show d ...
- BZOJ 1143: [CTSC2008]祭祀river(最大独立集)
题面: https://www.lydsy.com/JudgeOnline/problem.php?id=1143 一句话题意:给一个DAG(有向无环图),求选出尽量多的点使这些点两两不可达,输出点个 ...
- MongoDB查询内嵌数组(限定返回符合条件的数组中的数据)(1)
https://blog.csdn.net/bicheng4769/article/details/79579830 项目背景 最近在项目中使用mongdb来保存压测结果中的监控数据,那么在获取监控数 ...
- kafka 流式计算
http://www.infoq.com/cn/articles/kafka-analysis-part-7/ Kafka设计解析(七)- 流式计算的新贵 Kafka Stream