前端内容学习:HTML和CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--支持utf-8字符-->
<!--meta http-equiv="Refresh" Content="5; Url=http://www.etiantian.org" /--> <!--5秒后自动跳转-->
<!--meta http-equiv="Refresh" Content="2" /--> <!--2秒后刷新-->
<title>老男孩</title> <!--标题-->
<link rel="icon" href="favicon_lc83d380.ico" > <!--标题logo-->
</head>
<body>
<!--标签:块级标签,行内标签-->
<div>adfsdfsdfsd</div> <!--什么特性都没有(块级标签里最常用的就是div)-->
<h1>Luo</h1><h1>Luo</h1> <!--字体加粗加大(会生成两行,一行一个)-->
<h6>Luo</h6> <!--h1到h6常用,字体是依次递减,h1最大-->
<p>dfsdfdfd<br/>dfdfsdfsdafdsdf</p> <!--p标签是段落,段落之间有间隔的,<br/>是换行 -->
<span>jkjkkj</span> <!--行内标签-->
<!-- 标签的包含:<p>里面所有的内容应该只在<div>的块里显示出来 -->
<div style="width: 200px;border:1px solid red;word-break:break-all;"> <!-- 一个像素为200大小的红色块,word-break:break-all;代表超出的就自动换行 -->
<p>dfjkljkjj;lj;ljljdfdfasdfasdfsdfdsfasfdsasdffdfsdfsadfsdf</p>
</div>
<a href="http://www.baidu.com" target="_blank">百度</a> <!--超链接,target是新标签页中打开-->
<a href="#tt" >看第二章</a> <!--跳转到id=tt的那一行-->
<div style="height:2000px;background-color:red;">看第一章</div>
<div id="tt" style="height:2000px;background-color:green;">看第二章</div>
<img title="图片说明" src="1.jpg" style="height: 10px;width: 10px;" /> <!--定义图片-->
<select> <!--选项标签,和option配套使用-->
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option> <!--selected="selected"靠前显示-->
</select>
<select multiple="multiple" size="2"> <!--size显示个数为2;multiple可多选-->
<optgroup label="城市"> <!--optgroup分组-->
<option value="1">北京</option> <!--一般select加ID,而option加value-->
<option value="2">上海</option>
<option value="3">广州</option>
</optgroup>
</select>
<!--符号-->
&gt; &lt; <!--特殊的符号 &gt;是> , &lt;是< -->
<!-- 各种符号:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html --> <!--input系列标签-->
<input type="checkbox" /> <!--复选框-->
<p>男:<input name="gender" type="radio" /></p> <!--单选:例如性别选择时,只有name值是一样的
情况下,radio才会互斥不然都是可选的-->
<p>女:<input name="gender" type="radio" /></p>
<input type="text" /> <!--创建一个用户输入文本-->
<input type="text" value="aaa" /> <!--value属性是默认值-->
<input type="password" />
<hr /> <!--横线-->
<input type="file" /> <!--选择文件-->
<form action="http://www.baidu.com"> <!--把下面的port和user以字典的方式传给baidu(form标签就是提交数据)-->
<div>
端口:<input name="port" value="80" type="text"> <!--value是默认值-->
</div>
<div>
用户:<input name="user" type="text"> <!--name相当于字典的key一定要写-->
</div>
<input type="button" value="提交" /> <!--只是一个按键,没有提交-->
<input type="submit" value="sub" /> <!--会提交给网站后台-->
</form> <textarea>iii</textarea> <!--可换行输入文本-->
<label for="cb1">婚否</label> <!--文本和标签做对应关系-->
<input id="cb1" type="checkbox" /> <!--for属性和id要一致,就关联起来了-->
<ul> <!--前面加了一个黑色的标记-->
<li>111</li>
<li>222</li>
</ul>
<ol> <!--前面加了序号-->
<li>111</li>
<li>122</li>
</ol>
<dl>
<dt>标题1</dt> <!--标题-->
<dd>内容1</dd> <!--内容-->
</dl>
<table border="1"> <!--表,border为设置边框-->
<thead> <!--表头-->
<tr> <!--行-->
<th>第一列</th> <!--头部里面的列-->
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">h1,j1</td> <!--colspan表示这一行占两列-->
<td>h1</td> <!--body里面的列是td表示-->
<td rowspan="2">h1</td> <!--rowspan表示这一列占两行-->
</tr>
</tbody>
</table>
<fieldset> <!--画一个长方形,左上角写上登录,无卵用-->
<legend>登录</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
id,style,name:所有标签都可以定义的属性
a,target,href:a标签独有的属性
</body>
</html>

1、块级标签,内联标签

1)块级标签:div、p、h系列

2)内联标签:span、a、label、input、form、img

2、各种符号

&nbsp:空格

3、标签

input系列

select

textarea

form

div

span

a

img

table

h,ul,li,ol,dl,p,br,hr

4、属性

公共属性:id,name(一般只提交数据用),style,class

input:text,password

<input type='text' value="123" />

input:button,submit

<input type='submit' valut='BIN' />

input:checkbox

<input type='checkbox' checked="checked" />            <!--checked默认被勾选-->

input:radio

<input name='gender' type='radio' />                <!--name一样互斥,只能选其中一个-->

<input name='gender' type='radio' />                 <!--checked默认勾选-->

input:file

如果想要提交文件,需要在其所在的form标签中添加特殊的一个属性:

enctype='multipart/form-data' method='POST'

form

<form action=''  enctype='multipart/form-data' method='POST'>             <!--action提交到某一个地址,比如百度-->

<input type='file' />

</form>

select

<select>

<option  value='9' selected='selected'>ff</option>              <!--提交的时候提交的是value不会把ff提交到后台-->

</select>

table:

table,

thead,tbody

tr:行

td:tbody中的列

th:thead中的列

合并单元格:colspan:横向合并    rowspan:纵向合并

简单实例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 48px;background-color:pink;">头部信息</div>
<div style="background: #ddd;">
<div style="width: 20%;height:500px;float: left;background-color: aquamarine">左边内容</div>
<div style="width: 80%;height:500px;float: left">
<h1>Form表单提交</h1>
<form action="127.0.0.1" enctype="multipart/form-data" method="post">
<p>
用户名:<input type="text" name="host" />
</p>
<p>
密码:<input type="password" name="pwd" />
</p> <div style="background-color: rosybrown;color: white;">
<h6>爱好</h6>
篮球:<input name="favor" type="checkbox" value="1" />
足球:<input name="favor" type="checkbox" value="2" />
羽毛球:<input name="favor" type="checkbox" value="3" />
</div>
<div>
<h6>性别</h6>
男:<input name="gender" type="radio" value="1" />
女:<input name="gender" type="radio" value="2" />
</div>
<div>
<h6>城市</h6>
<select name="city">
<option value="123">深圳</option>
<option value="321">广州</option>
</select>
</div>
<div>
<textarea name="mono"></textarea>
</div>
<div>
<h4>文件</h4>
<input type="file" name="file_name">
</div>
<input type="submit" value="提交" />
</form>
</div>
</div>
</body>
</html>

CSS

寻找标签

class选择器

.c1{}

<div class='c1'></div>

<div class='c1'></div>

标签选择器

a{

color:red;

}

html中所有的a标签,全部红色字体

input[type='text']{

}

div

span

select

ID选择器

#uu{

}

<div></div>

<div id ='uu'></div>           <!--id='uu'的时候才会引用uu的样式

层级选择器              (一层一层的绝对路径,此时.c4只有div a div下的span才可以引用,空格表示下一级)

.c3 #i8 div .c4{

}

<div class='c3'>

<a id='i8'>

<div>

<span class='c4'></span>

</div>

</a>

</div>

组合选择器   (a和p需要用同一样式时,a,p就可以都运用这个样式)

a{}

p{}

a,p{}

应用样式:

background属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.b1{
height: 500px;
background-image: url("http://img11.360buyimg.com/da/jfs/t2764/70/439784599/90859/851bb367/571436d2Nf73571d8.jpg");
background-repeat: no-repeat; /*默认是铺满,no-repeat不铺满,显示原图*/
background-position-x:0px; /*移动图片x轴*/
background-position-y:100px; /*移动图片y轴*/
} </style>
</head>
<body>
<div class="b1"></div>
</body>
</html>

display属性:

none;    隐藏

block;    内联标签变成块级标签

inline;    块级标签变成内联标签

cursor属性:

pointer;变成小手

help; 问号

wait;等待

move; 移动

crosshair; 坐标

float属性:

<body>
<div style="width: 300px;background-color: blue;">
<div style="background-color: red;float: left;width: 20%;">123</div>
<div style="background-color: green;float: left;width: 50%;">312</div>
<div style="float: right;width: 10%;background-color: pink;">99</div> <div style="clear: both;"></div>
</div>
</body>

注:用了float属性,背景色就不会显示正常,必须加上<div style="clear: both;"></div>

position属性:

fixed; 固定:永远固定在一个位置,下拉依旧固定在那里

abslute; 绝对:只固定一次,随着下拉会上移

relative; 相对:单独没什么效果,一般配合abslute使用

  <div style="position:relative;background-color: green;height: 400px;width: 500px;">           <!--定位的位置会出现在这个块标签的右下角,而不是整个窗口的,因为加了relative-->

        <div style="position: absolute;bottom:30px;right: 30px;">定位</div>               <!--定位放在离底30px,右边30px的位置-->

    </div>

    <div style="position: fixed;right: 0;bottom: 0;background-color: black;">     <!--'我是黑色'放在右下角,浏览器下拉不会改变他的位置-->
我是黑色
</div>

z-index和opacity:

<body>
<div style="z-index:10;position: fixed;top:0;left:0;right: 0;bottom: 0;background-color: black;"> <!--top,left,right,bottom都是0的话,背景色就铺满整个页面,z-index越大就越靠前-->
<span style="color: white;">我是黑色;</span>
</div>
<div style="z-index:11;position: fixed;top:0;left:0;right: 0;bottom: 0;background-color: red;opacity:0.5"></div> <!--opacity透明度,0是完全透明,1是不透明-->
</body>

margin和padding:

<body>
<div style="height: 70px;border: 1px solid red;">
<div style="height: 50px;background-color: green; margin-top:20px;"></div>
</div>
</body> margin: 10px 20px 30px 40px; #给上右下左加边距
margin:10px 20px; #上下10px,左右20px

margin:外边距

padding:内边距

Python学习路程day12的更多相关文章

  1. python学习(day1-2)

    python 学习(day - 1-2 ) 变量:将运算的中间结果暂存到内存,以便后续程序调⽤. 变量的命名规则: 1, 变量由字⺟, 数字,下划线搭配组合⽽成 2, 不可以⽤数字开头,更不能是全数字 ...

  2. Python学习路程day18

    Python之路,Day18 - Django适当进阶篇 本节内容 学员管理系统练习 Django ORM操作进阶 用户认证 Django练习小项目:学员管理系统设计开发 带着项目需求学习是最有趣和效 ...

  3. Python学习路程day16

    Python之路,Day14 - It's time for Django 本节内容 Django流程介绍 Django url Django view Django models Django te ...

  4. Python学习路程day8

    Socket语法及相关 socket概念 A network socket is an endpoint of a connection across a computer network. Toda ...

  5. Python学习路程day6

    shelve 模块 shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 import shelve d = shelve.open ...

  6. python 学习路程(一)

    好早之前就一直想学python,可是一直没有系统的学习过,给自己立个flag,从今天开始一步步掌握python的用法: python是一种脚本形式的语言,据说是面向废程序员学习开发使用的,我觉得很适合 ...

  7. Python学习路程-常用设计模式学习

    本节内容 设计模式介绍 设计模式分类 设计模式6大原则 1.设计模式介绍 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复 ...

  8. Python学习路程day19

    Python之路,Day19 - Django 进阶   本节内容 自定义template tags 中间件 CRSF 权限管理 分页 Django分页 https://docs.djangoproj ...

  9. Python学习路程day15

    Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/en ...

随机推荐

  1. POJ 1852 Ants

    题目的意思是说一个长度为m的杆,上面有n个蚂蚁,告诉每个蚂蚁的初始位置,每个蚂蚁速度都是一样的,问所有的蚂蚁离开杆的最短和最长时间是多少. 模拟题,所有的蚂蚁看成一样的,可以这样理解,即使相撞按反方向 ...

  2. MySql + EF6 + .Net Core

    2016年8月17日01:21:29 更新:这里介绍一下一个开源的 EF Core 的 MySQL 组件 [MySQL for .NET Core - Pomelo 扩展包系列][http://www ...

  3. [Python]实现XMPP协议即时通讯发送消息功能

    #-*- coding: utf-8 -*- __author__ = 'tsbc' import xmpp import time #注意帐号信息,必须加@域名格式 from_user = 'che ...

  4. 选出N个不重复的随机数

    <script type="text/javascript"> var str="0123456789"; var arr=[]; var n; w ...

  5. 3. Swift 数组|字典|集合

    在OC中数组,字典,集合有自己的表示方法,分别是Array,Dictionary,Set 与 String 都属于数值类型变量,他们都属于结构体. 使用简介灵活多变,个人感觉可读性变差了很多,用起来由 ...

  6. 太牛X了!神奇的故事 你猜得到开头,却猜不到结尾

    他在北京发来消息:“我明天去看你,来接我,好么?” 她在南京,开心地回复:“恩啊” 第二天,她在车站搜寻过往人群中他的身影, 期待又焦急“你到底在哪儿?” “傻瓜,你不会真在车站吧,今天是愚人节哎,哈 ...

  7. jquery总结04-DOM节点操作

    一般js操作节点 ①创建节点(元素文本)document.createElement  innerHTML ②添加属性 setAttribute ③加入文档 appendChild 操作繁琐还有兼容性 ...

  8. 遍历List中的object对象

    我的解决方法是 List<Object[]> list = queryTrans; for (Object[] o : list) { for (int q = 0; q < o.l ...

  9. dll文件是什么

    dll实际上是动态链接库的缩写,从windows1.0开始,动态链接库就是整个操作系统的基础,那么这有什么作用呢?在dos时代,程序员是通过编写程序来达到预期的目的的,每实现一个目的就需要编写一个程序 ...

  10. 快速排序,C语言实现

    排序法里比较出名的,具体的算法看下图: 这篇博客说的通俗易懂:http://blog.csdn.net/morewindows/article/details/6684558 这是快速排序的基础,用代 ...