HTML 和 CSS
HTML
html是英文hyper text mark-up language（超文本标记语言）的缩写，它是一种制作万维网页面标准语言。
内容摘要
Doctype
告诉浏览器使用什么样的html或xhtml规律来解析html文档。
可以选择的有：
meta
提供有关页面的元信息，例如：页面编码，刷新，跳转，针对索引引擎和更新频度的描述和关键词。
1，页面编码
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
或
<meta charset="UTF-8" />
2，刷新和跳转
<meta http-equiv=“Refresh” Content=“30″ /> #30秒刷新一次
<meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ /> #5秒后跳转到百度
3，关键词
<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" /> #SEO使用的比较多
4，描述
例如：cnblogs
Title
网页头部信息
例如：
<title>老男孩</title>
Link
1，css
<link rel="stylesheet" type="text/css" href="css/common.css" />
2，icon
<link rel="shortcut icon" href="image/favicon.ico"/> #图片
Style
在页面中写样式
例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
后面的就可以使用 .bb来引用样式了
script
1，引进文件
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2，写js代码
<script type="text/javascript" > ... </script >
常用标签
标签一般分为两种：块级标签和行内标签
- a , span , select
- div ,h1 ,p
各种符号：
p 和 br
p表示段落，默认段落之间是有间隔
br 换行
a标签
<a href="http://www.autohome.com.cn"> </a>
1，target属性，_black表示在新的页面打开
<a href="https://www.baidu.com" target="_blank">百度</a>
2，锚
<a href="#tt">第二章</a> # 是根据#查找ID，达到锚的效果
<div id="tt" style="height: 2000px;background-color: green;">第二章</div>
H标签
H1
H2
H3
H4
H5
H6
select标签：
1，下拉菜单，显示一行
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">广州</option> #默认选择的行
</select>
2，显示多行
<select size="2"> #size显示的行数
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
3，可选择多行
<select multiple="multiple" size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
4，分组显示
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
checkbox 复选框
<div id="t36">
<h2>Checkbox</h2>
<input type="checkbox">
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">
</div>
redio 单选
<div id="t37">
<h2>redio</h2>
男<input type="radio" value="man">
女<input type="radio" value="male">
<br><br>
男<input type="radio" name="gender" value="man"> #name必须一样，不然无法达到单选deepin效果
女<input type="radio" name="gender" value="male">
</div>
password 框
<input type="password">
button
button： #只是一个提交动作
<input type="button" value="button">
from
submit： #提交到后台
<form action="http://10.0.4.42:8000/django_form/" enctype="multipart/form-data" method="post"> #所要提交的标签，action 所提交到的位置
<input type="submit" value="submit">
file
<div id="t310">
<h2>file</h2>
<input type="file" value="file">
<p>提交文件时： enctype='multipart/form-data' method='POST'</p>
</div>
textarea
<div id="t311">
<h2>textarea</h2>
<textarea name=”mono”></textarea> #可以设置一个提交的名称，方便后台处理
<textarea style="width:500px;height: 200px;"></textarea> #设置文本框的大小
</div>
label
效果是点击前面名称就可以操作后面的选项
<div id="t312">
<h2>label</h2>
姓名：<input id="name1" type="text">
婚否：<input id="marriy1" type="checkbox"> #不能操作
<br>
<label for="name2">姓名：<input id="name2" type="text"></label>
<label for="marriy2">婚否：<input id="marriy2" type="checkbox"></label> #可以操作
</div>
ul ol dl
ul
无序
<ul>
<li>ul.li</li>
<li>ul.li</li>
<li>ul.li</li>
</ul>
ol
有序，前面带数字
<ol>
<li>ol.li</li>
<li>ol.li</li>
<li>ol.li</li>
</ol>
dl
分组
效果：
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
table 表格
<table border="1">
<tbody><tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody></table>
# tr 行 td 列
<table border="1">
<thead>
<tr><th colspan="3">1</th></tr> #一行占3列
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td rowspan="3">1</td><td>3</td><td>3</td></tr> #一列占3行
<tr><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
</tbody>
</table>
fieldset
<fieldset>
<legend>登录</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
目录
- / 网站根目录
- ./ 当前目录
- ../上级目录
- ../../ 父目录的父目录
CSS
css是英文cascading style sheets的缩写，称为层叠样式表，用于对页面进行美化
存在的方式有三种，元素内联，页面嵌入和外部引用入
语法： style = ‘key1:valuel;key2:valuel2;’
- 在标签中使用 style=’xx:xxx’
- 在页面中嵌入 < style type=”text/css”></style>
- 引入外部css文件 <link rel="stylesheet" href="commons.css"/>
标签选择器
div {background-color:red;}
<div> </div>
class 选择器
.bd {background-color:red;}
<div class=’bd’></div>
关联选择器
#idselect p {background-color:red;}
<div id=’idselect’> <p> </p> </div>
#id为idselect 下的 p 标签引用
组合选择器
input,dit,p {background-color:red;}
属性选择器
input [tyoee=’text’]{width:100px;height:200px;}
background 背景
background-color 背景颜色
<div style="background-color:red;"> </div>
background-image 背景图片
如果文件比较小会铺满屏，复制显示
<div style="background-image:url('image/4.gif'); height: 80px;"></div>
background-repeat
不复制，只显示一个
<div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div>
background-position
只显示图片的一部分
<div style="background-image:url('image/5.png'); height: 80px;background-repeat:no-repeat;background-position:-105px -112px;"></div>
#坐标从右上角开始（0，0）先确定显示框的大小，然后在根据坐标确定显示的位置
border 边框
<div style="border:1px solid red; height: 10px;"></div>
<div style="border:1px dotted red; height: 10px;"></div>
<div style="border:1px dashed red; height: 10px;"></div>
margin 边缘
<div style="background-color: green;height: 50px;ma;margin-top: 0px;"></div>
padding 内边距
<div style="background-color: green; height: 50px; padding-top: 20px;"></div>
display
display：none
original
display：block （块）
<span style="background-color: red;">content</span>
<span style="display: block; background-color: red;">content</span>
display：inline（内联）
<div style="background-color: red;">content</div>
<div style="display:inline;background-color: red;">content</div>
cursor 光标
css提供的cursor值
pointer 小手
<span style="cursor:pointer;">pointer</span>
help 帮助
<span style="cursor:help;">help</span>
wait 繁忙
<span style="cursor:wait;">wait</span>
move 移动
<span style="cursor:move;">move</span>
crosshair 十字
<span style="cursor:crosshair;">crosshair</span>
伪造超链接
<span style="cursor:pointer;color:blue;">pointer</span>
自定义（一般不用）
<span style="cursor:url(image/favicon.ico),auto;">mine</span>
浮动
<div style="background-color: green;float: left">left</div>
<div style="background-color: blue;float:right">right</div>
<div style="background-color: red;">
<div style="background-color: green;float: left">left</div>
<div style="background-color: blue;float:right">right</div>
<div style="clear: both;"></div>
</div>
position
固定到屏幕的某个地方
<div style="position: fixed;bottom: 40px;right: 30px;">返回顶部</div>
固定到某个区域的某个地方
<div style="position: relative;background-color: green;height: 400px;width: 500px;">
<div style="position: absolute;bottom: 30px;right: 30px;">定位</div>
透明度
css
img {
opacity:0.4; #透明度范围是从0到1的小数，数值越小透明度越高
}
默认样式改造
<ul>
<li>首页</li>
<li>菜单1</li>
<li>菜单2</li>
</ul>
<style type="text/css">
.changeul{
margin: 0px;
padding-top: 0px;
}
.changeul li{
list-style-type: none;
float: left;
background-color: #ddd;
}
.changeul li a{
display: block;
padding: 19px 20px;
}
.changeul li a:hover{
background-color: red;
}
</style>
<ul class='changeul'>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">菜单1</a></li>
<li><a href="http://www.baidu.com">菜单2</a></li>
</ul>
HTML 和 CSS的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Cgroups控制cpu，内存，io示例【转】
本文转载自:https://www.cnblogs.com/yanghuahui/p/3751826.html 百度私有PaaS云就是使用轻量的cgoups做的应用之间的隔离,以下是关于百度架构师许立 ...
- 使用easyui的form提交表单，在IE下出现类似附件下载时提示是否保存的现象
之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...
- jstl标签 c:if和c:choose
<c:if test="${test == null}">test为null</c:if> 其意思是,如果test 为 null,那么就打印 “test为n ...
- java基础（5）-集合类1
集合的由来 数组是很常用的一种数据结构,但假如我们遇到以下这样的的问题: 容器长度不确定 能自动排序 存储以键值对方式的数据 如果遇到这样的情况,数组就比较难满足了,所以也就有了一种与数组类似的数据结 ...
- ZooKeeper-znode概念与使用
可以将ZK看作一个具有高可用性特征的文件系统.这个文件系统中没有文件和目录,而是统一使用节点(znode)的概念,称为znode.znode既可以作为保存数据的容器(如同文件),也可以作为保存其他zn ...
- Python之爬虫总结
一.爬虫之requests a.介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) b.注意:re ...
- nova Scheduling 配置
Nova中调度配置: scheduler_driver_task_period = scheduler_driver = nova.scheduler.filter_scheduler.FilterS ...
- javascript中some，every，map，filter是只用和ansyc中的each，eachLimit，map，mapLImit，filter的使用
var t = [1,2,3,4,5]; //some找到数组中第一个符合要求的值后就不在继续执行//用来判断数组中是否存符合要求的值,返回结果true|false//function返回类型为boo ...
- 关于js序列化时间的方法
var time = new Date(); var otime = getMyDate(time); //将毫秒转换成 年月日+时分秒 格式的 (1970-01-11 00:00:00) funct ...
- 29 python 并发编程之多线程理论
一 什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...