day--43 HTML标签和CSS基本小结
HTML标签和CSS基本小结
一：常用标签
01：块标签 p,h1--h6 ,hr ,div
02：内联标签 b,i,u,s
小提示：块标签可以嵌套内置元素或者某些块级元素，但内联元素不能包含块级元素 ，只能包含其他内联元素
但是div可以包含div
二：input标签
前提：id和name的区别：id是唯一不可重复的，name不是，name主要是客户端发送给服务端的内容的表示，服务端根据这个表示取值
<input type="tex"/> 单行输入文本
<input type="password" /> 密码输入框（不显示明文）
<input type="date" /> 日期输入框
<input type="checkbox" checked="checked" name="x" /> 多选框
<input type="radio" name="x" /> 单选框
<input type="submit" value="提交" /> 向服务端发送填写在浏览器中标签中的内容，配合form标签使用，页面会刷新
<input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空
<input type="button" value="普通按钮" />
<input type="hidden" /> 隐藏输入框
<input type="file" /> 在form表单下可以选择本地文件
属性说明：
01：name：表单提交时的“键”，不具有惟一性，id具有惟一性
02：value：表单提交时对应的值
type="button","reset","submit"时，为按钮上显示的文本内容
type="text","password","hidden" 时，为输入框的初始值
type="checkbox","radio","file" 时，为输入的相关的值
03：checkbox：radio和checkbox默认被选中的项
04：readonly：text和password设置为只读
05：disable：input都能用
三：form标签
01：功能：
form表单用于向服务器传输数据，从而实现用户与web服务器的交互
表单能包含textarea ，select，fieldset和label标签
属性 描述
accept-charset： 规定在被提交表单中使用的字符集（默认：页面字符集）。
action： 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete： 规定浏览器应该自动完成表单（默认：开启）。
enctype： 规定被提交数据的编码（默认：url-encoded）。
method： 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name： 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate： 规定浏览器不验证表单。
target： 规定 action 属性中地址的目标（默认：_self）。
表单的使用例子：
<form action="" method="post" >
<div>
<label>用户名: </label>
<input id="yonghuming" type="text" placeholder="请输入用户名" name="username" >
</div> <div>
<lable> 密码: </lable>
<input id="mima" type="password" placeholder="请输入密码" name="pwd">
</div> <div>
<lable for="m"> 请选择性别： </lable>
<input id="m" type="radio" name="sex" value="a"> 男 <lable for="w"> </lable>
<input id="w" type="radio" name="sex" value="b"> 女
   
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select> </div> <div>验证码
<input type="text" name="yzm">
</div> <div>提交时间：
<input type="datetime-local" name="tm">
</div> <div>
<input type="submit" value="提交"> <!-- submit 在网页显示是提交，value改的是submit显示的内容 -->
   <input type="reset" value="重置"> <!-- 将输入的内容清空 -->
</div> <div>
<input type="file">
</div>
<textarea name="sr" id="s" cols="20" rows="10"></textarea> </form>
四：css介绍
01：CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
02:css注释 /* 之间的内容被注释 */
03：css语法
css由选择器和申明组成，申明又由属性和值，每个申明之间用 "分号;" 隔开
例子： h1{color:red; background:blue; font-size:10px;} 04：css的三种引入方式
001：行类样式
<p style="color:red"> hello world.</p>
002:内部样式
嵌入式的将css样式集中写在网页的<head> </head>标签对的<style></style>
例子：
<head>
<meta charset="utf-8">
<title>title</title>
<style>
p{
backgrond-color:red;
}
</style>
</head> 003:外部样式
外部样式将css写在一个单独的文件中，然后再在页面中引入即可，推荐
#现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
五：css选择器（找到对应的标签）
01：元素选择器（标签名）
例子：
p{color:blue;} #选中所有的p标签，使所有的p标签都具有这个属性
02：（ID选择器）
元素选择器只能选择所有相同的标签，但是当我只需要众多相同标签中德其中一个就需要用到id选择器
例子：
<p>第一个</p>
<p>第二个</p>
<p>第三个</p> 只想给第二个p标签的内容加颜色，就需要给第二个p标签添加一个独有的id，惟一的 <style>
#p1{color:red} #引用id
#p2{color:green}
</style> <p id="p1">第一个</p>
<p id="p2">第二个</p>
<p>第三个</p>
03:类选择器
.c1{ .表示class属性，c1表示class的值
font-size;14px;
}
p.c1{ #找到所有p标签里面含有class 属性的值为c1的p标签，注意它俩之间没有空格
color：red ；
}
04：通用选择器
* { *表示所有的标签
color：white；
}
05：组合选择器
001：后代选择器（子子孙孙）
/* li内部的a标签设置字体颜色 */
li a{
color:green
}
002：儿子选择器（只找儿子）
/* 选择所有父级<div> 元素的<p> 元素 */
div>p{
color:yellow
}
003：毗邻选择器
/* 选择所有紧接着<div> 元素之后的 <p> 元素 */
div+p{
margin:5px;
}
004：弟弟选择器
/* li后面所有的兄弟p标签 */
#i1~p{
border:2px solid royalblue;
}
005：属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
006：每个标签里面都可以有一个title属性，这个属性就是鼠标移动到这个标签下，就显示一个title属性的值
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
六：分组和嵌套
01：（分组）
多个选择器都好分隔
#对含有d1，c1，a1的标签统一设置为红色
#d1，c1，a1{ color ：red}
02：嵌套
多种选择器可以混合起来使用，比如: .c1类部所有批、标签设置字体为红色
.c1 p{
color: red;
}
03:伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */ 这个用的比较多
a:hover {
color: #FF00FF
} /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
#框里面的背景色
}
04:伪元素选择器
001：将p标签中的文本的第一个字变颜色，变大小
p:first-letter{
font-size:90px;
color:red
}
002:在每个p元素之前插入内容(添加的元素是无法被选中的)
p.before{
cotent:"*********";
color:red;
}
003:在每个元素之后插入内容(添加的元素是无法被选中的)
p.after{
content:"&&&&&";
color:red;
}
七：选择器的优先级
01：：当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染
02：CSS选择器的优先级
内联样式〉id选择器 〉 类选择器 〉 元素选择器
#内联样式：<p class="c2" id="p1" style="color:purple">
八：CSS属性相关
01：宽和高
width 为元素设置宽度
height 为元素设置高度
02：字体属性
font-family可以把多个字体名称作为一个“回退”系统来保存。
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body{
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
03:字体大小
如果设置成inherit 表示继承父元素的字体大小值
p{
font-size:14px;
}
04:字体粗细：(font-weight)
normal :默认值，标准粗细
bold: 粗体
bolder： 更粗
light： 更细
100~90： 设置具体粗细，400等同于normal，700等同于blod
inherit： 继承父元素的字体粗细值
九：文字属性：
01：文字对齐
text-align 属性规定元素的文本的水平对其方式
left： 左对齐默认值
right： 右对齐
center： 居中对齐
justify： 两端对齐
02：文字装饰
text-decoration 属性用来给文 字添加特殊效果
none: 默认，定义标准的文本
underline: 定义文本下的一条线
overine： 定义文本上的一条线
line-through: 定义穿过文本下的一条线
inherit： 继承父元素的text-decoration属性的值
常用：去掉a标签默认的自划线
a{
text-decoration:none;
}
03:首行缩进
将段落的第一行缩进32像素
p{
text-decoration:32px #两个字符
}
十：背景属性
01：背景颜色
backbground-color：red；
02：背景图片
background-image:url("1.jpg"); #url里面是图片路径，如图片和html在同一目录下可以这样使用
03：背景重复
repeat（默认）: 背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺 背景位置： ###多余时间了解
background-position：right top；
/*background-position: 200px 200px;*/ #以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，
用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了
十一：边框
01：边框属性：
1：border-width ： 宽度
2：border-style ： 样式
3：border-color ： 颜色
例子：（简写版）
#t{
border: 2px solid red；
}
02：边框样式
none： 无边框
dotted：点状虚线边框
dashed：矩形虚线边框
solid： 实线边框 可以统一设置边框，还可以单独为某一个边框设置样式
#i1{
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
boder-bottem-style:dotted;
border-left-style:none;
}
03: border-radius
用这个属性能实现圆角边框的效果
将border-radius 设置为长或则高的一半即可得到一个圆形
<style>
.i1{
height:100px;
width:100px;
background-image: url(4.jpg);
border-radius:50%;
}
</style>
十二：display属性
用于控制html 元素的显示效果
01：display:"none" html 文档中元素存在，但是在浏览器中不显示，一般用于配合javascrip代码使用
02：display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin 填充剩下的部分
03：display:"inline" 按行内元素显示，此时再设置元素的width height margin-top margin-bottom和float属性都不会有什么影响
04：display:"inline-block" 使元素同时具有行内元素和块级元素的特点 display：none 隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，该元素
占用的空间也从页面布局中消失了
visibility：hidden 可以隐藏某个元素，但隐藏的元素仍需要占用之前相同的空间，该元素虽然被隐藏了
但是还是会影响布局。
十三：快捷键
01：快捷键：div*3 然后按tab键
得到“ <div></div>
<div></div>
<div></div> 02：
.c1然后按tab键
得到：<div class="c1"></div> 03：
div>a然后按tab键
得到：<div><a href=""></a></div>
十四：css盒子模型(上右下左)
01：margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的隔离
从视觉上达到互相隔开的目的 02：padding：内边距：控制内容和边框之间的距离 03：border（边框）：围绕在内边距和内容外的边框 04：content（内容）： 盒子的内容，显示文本和图像
十五：浮动（float）
原来的效果：
.left{
width:20%;
height:1000px;
float:left;
}
.right{
width:80%;
height:1000px;
background-color:green;
}
现在的效果：
.left{
width:20%;
height:1000px;
float:left;
}
.right{
width:80%;
height:1000px;
background-color:green;
float:right;
}
浮动的副作用：浮动起来后脱离了整个文档，浮动元素会生成一个块级框，而不论它时何种元素
浮动的特点：
01：浮动的框可以向左或则向右移动，直到它的边缘碰到包括框或另外一个浮动框的边框为止
02：由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像是浮动框不存在一样 浮动的三种取值：
left:向左浮动
right:向右浮动
none：默认值，不浮动
十六：浮动和清浮动（clear）
clear 属性规定元素的哪一侧不允许其他浮动元素
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值，允许浮动元素出现在两侧
inherit：规定应该从父元素继承clear 属性的值
day--43 HTML标签和CSS基本小结的更多相关文章
- 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- input标签写CSS时需要注意的几点（先收藏）
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...
- Bootstrap入门（三）<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- PHP使用echo输出标签设置CSS样式问题
使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- 后端数据中含有html标签和css样式，前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- CSS知识点小结
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现. 一.nobr语法 <nobr>内容</nobr> 不 ...
随机推荐
- Solr查询过程源码分析
原文出自:http://blog.csdn.net/flyingpig4/article/details/6305488 <pre name="code" class=&qu ...
- window7 和ubuntu 双系统时 ubuntu不能引导怎么办？
假如你的Ubuntu的 / 分区是sda9,又假如 /boot分区是 sda6,在终端下输入sudo -imount /dev/sda7 /mntmount /dev/sda6 /mnt/boot ( ...
- 在Sqlserver中使用Try Catch
创建错误日志表: CREATE TABLE ErrorLog(errNum INT,ErrSev NVARCHAR(1000),ErrState INT,ErrProc NVARCHAR(1000 ...
- Linux Valgrind命令
一.简介 C/C++程序,最常见的错误之一就是内存泄露.Valgrind 是一款 Linux下的内存调试工具,它可以对编译后的二进制程序进行内存使用监测找出内存泄漏问题. Valgrind通常包括如下 ...
- 使用mail架包发送邮件javax.mail.AuthenticationFailedException: failed to connect at javax.mail.Service.connec
这个错误是因为连接不上邮箱服务器导致的,可能有以下几个原因(以网易邮箱为例) 1.当使用第三方登录邮箱时需要有邮箱的授权码,且要开启POP3/SMTP/IMAP:服务 2.在代码中要调用网易邮箱的密码 ...
- 38.NOW() 函数
NOW 函数返回当前的日期和时间. 提示:如果您在使用 Sql Server 数据库,请使用 getdate() 函数来获得当前的日期时间. SQL NOW() 语法 SELECT NOW() FRO ...
- iOS编程——Objective-C KVO/KVC机制[转]
这两天在看和这个相关的的内容,全部推翻重写一个版本,这是公司内做技术分享的文档总结,对结构.条理做了更清晰的调整.先找了段代码,理解下,网上看到最多的一段的关于KVC的代码 先上代码 1. 1 ...
- （转）【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
原文地址:http://www.cnblogs.com/huyong/p/3334848.html 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于 ...
- (转)Asp.Net生命周期系列一
原文地址:http://www.cnblogs.com/skm-blog/archive/2013/07/07/3176713.html Asp.Net生命周期对于初级甚至中级程序员来说,一直都是一个 ...
- 设计模式08： Composite 组合模式（结构型模式）
Composite 组合模式(结构型模式) 对象容器的问题在面向对象系统中,我们常会遇到一类具有“容器”特征的对象——即他们在充当对象的同时,又是其他对象的容器. public interface I ...