html+css学习总结

HTML与css学习总结

一；html概念

　1.　html是一种描述网页的语言，并不是计算机语言这要分清楚；标记语言是运用一套标记标签描述网页的；

注意点：

①标签字母都要小写，标签一般都是成对出现，有开始标签与闭合标签；也有自结束标签<meat>,

<br/>等；

html标签包括行内标签和块级标签；块级标签用于搭建网页结构独占一行，行内标签用于修饰细节，宽度只有自身内容的宽度，并排显示；

常用的标签：

行内标签：span,a,strong,em,b,img,input,label,select,textarer

　　　　　　　块级标签：div,p.ul,ol,li,dl,form,addeess,hr,h1-h6,menu,table,

要遵循嵌套规则，块套块--块套行内--行内中不要套块

使用标签还需要注意语义化，有助于网页的seo优化，提高自己的代码可读性；

ul，ol搭配li使用；p标签中间最好只放文字；

表单标签总结
表单：提交数据

form-----表单

三要素：

、action----提交地址

、name----数据名称

、submit------提交按钮

表单元素：

输入类：text、password、textarea（标签）

选择类：radio、checkbox、select（标签）

按钮类：submit、button、reset、image

文件上传：file

其他属性：

表单隐藏：hidden

提交方式：

get------数据会显示在地址栏-----32k-------分享/收藏

post-----数据不显示在地址栏-----1g-----相对安全-----JS

常见标签使用↓↓↓

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <div></div>
    <ul>
        我是ul标签
        <li>我是li标签</li>
    </ul>
    <ol>
        <li>我是ol里的li标签</li>
       </ol>
    <dl>
        定义列表标签
        <dt>定义列表的标题</dt>
        <dd>项目描述</dd>
        <dd>可以跟多个</dd>
    </dl>
    <a href="#" target='_blank'>我是a标签，用于超链接操作</a>
　　<a name='xx'>制作锚点</a>   
　　 <img src="##" alt="替换的文字" title="我试提示信息（我试图像）"align='left'>
　　　　align='left,right,center,top,bottom,middle,bottom'可以接收上下左右
    <h1>我是标题标签</h1>
    <title>我是定义文档标题</title>
    <hr/>我是水平线
    <p dir='ltr'>我试段落标签</p> dir是规定文字走向left to right
    <address>我试定义作者的标签</address>
    <b>我是粗体标签</b>
    <em>强调文本</em>
    <i>我是定义斜体标签</i>
    <form>定义表单标签</form>
    <input>输入控件标签；
    <textarea>定义多行文本输入</textarea>
    <button>定义按钮</button>
    <option>定义选项列表</option>
    <menu>我是命令菜单/列表</menu>
    <span>我是span标签，定义文档中的节</span>
    <style>css文件放我这里</style>
　　<del>删除标签</del>
    <table>
        <caption>我是表格标签的标题</caption>
        <th>表格中的表头单元格</th>
        <tr>表格中的行</tr>
        <td>表格中的列</td>
        <thead>表格中的表头内容</thead>
        <tbody>表格中主题内容</tbody>
        <tfoot>表格注脚</tfoot>
    </table>
</body>
</html>

2.css样式

css样式语法

html+css学习总结

css总结小特性：

　　　　1.一定记得当属性赋值结束后写上引号；一行最好一层代码，提升可读性

　　　　2.css具有继承的特性，子元素可以继承父元素的文本样式；a标签的color不能继承；

3.覆盖：父级有的样式，子级也有，用子级自己的

　　　　4.css选择器：ID >类> tag> *> 属性(优先级)，还有一些伪类选择器： first-child，last-child,nth-chid,还有一些自己平常喜欢用的属性选择器，用起来超级方便；

　　　　5.选择器比较　
　　　　　　　　   ID         标签         class
　　写法： id=“name”   无      class=“name”
   　　       #name{CSS} 标签名{CSS}   .name{CSS}
　　精确：      √                   ×      √
　　重用：      ×         √      √
　　用途：   JS                  重置       常用

　　　6.属性选择器使用方法；

　　　　[attr]=用于带有指定属性的；

　　　　[attr=value]=用于选取指定属性指定值

　　　　[attr~=value]包含value的；

　　　　[attr^=value]开头值是value的元素

　　　　[attr|=value]开头值，但是必须整个单词

　　　　[attr$value]结尾是value的每个元素

　　　　[attr*=value]匹配指定value的每个元素；

　　　　7.子选择器；只希望更改自己直属子集的样式，不影响后面的子级；

　　　　　　div> span {color:red;} 只改变div下面的一级子标签span

　　　　8.相邻兄弟选择器

　　　　　　h1 + p {margin-top:50px;}，只改变h1下面的相邻的p标签的样式；

　　7.伪元素

　　before，向元素前面添加元素；

　　after，向元素后面添加元素

　　first-line" 伪元素用于向文本的首行设置特殊样式。

　　8.伪类

顺序是 l-v-h-a

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

如何使用样式？

①：link引入css文件；

<link rel='stylesheet' type='text/css' href='mystyle.css'>

②写在style标签中

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

③写在行间样式内；

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

css样式-背景

background-color：背景色；

background-image：背景图后面跟url地址是否平铺定位left、top；

background-repeact:是否平铺；

background-position：背景图定位；可以接收百分比；

background-attachment:scroll/fixed 是否随内容滚动而滚动；

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    div{background:#F00;}

</style>

</head>

<body>

    <div style="width:100px; height:100px;background:#F00"></div>

    <div style="width:100px;height:100px;background-image:url(http://img10.360buyimg.com/.jpg);"></div>

    <div style="width:200px; height:200px;background-position:10px 10px "></div>

</body>

</html>

css文本样式

vertical-align----以文本基线为对齐方式

text-indent：1em/1px/% 文本缩进，可以接受负值；样式可以继承；

text-align:left/right/center 文本水平对齐；

word-spacing： px/em长度值文字或者单词之间的；

latter-spacing：px/em文字或者字母之间的距离;

text-transform: uppercase 全部字母大写；
text-transform: lowercase 全部小写；
text-transform: capitalize 首字母大写；

text-decoration: 文本修饰

none 默认
underline 下划线
overline 上划线
line-through 中划线

line-height: px 行高

white-space 空白处理方式

color:设置文本颜色；

font-size:设置文字大小；

font-weight：设置出息

font-family;字体系列

font-style：字体风格

8.盒模型

html+css学习总结引用w3c-----

同时设置四边的边距时，顺序是 top-right-bottom-left;

外边距：margin-top/bottom/left/right/不算盒模型； margin边距会发生重叠取最大值；外边距还会出现合并现象；所以会出现margin变小现象；margin：10px auto；块元素居中；

内边距：padding-top/bottom/left/right/算盒模型里；

边框：border-width/border-style/border-color/ 可以连在一起写；也可以同时设置四个边的任意一边；left/top/right/bottom;

块元素与行内元素边距对比

块元素---支持

大小----支持
间距-----margin---支持
留白-----padding----支持
边框----border----支持

行内-----有限的盒模型

大小------不支持
留白----padding----支持（会撑大盒子的大小）
间距----margin-----有限支持（只支持左右margin）
边框-----border-支持

9. position定位；

①定位就是css提供的一种布局属性，可以建立列式布局，将布局的一部分与另一部分重叠；让元素出现在该出现的地方；

②行内元素加上定位属性后，会成为块级元素。可以设置宽高；

static（默认）: 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative（相对于浏览器定位，一般加给父级）: 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute clip:rect(0px 50px 200px 0px)剪切显示的图像；相对于有定位元素的父级定位；: 脱离文档流，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 固定定位；: 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

定位元素的index升高，强制升高可以设置z-index属性；

10.float浮动

　　float 属性定义元素在哪个方向浮动。解决块级元素不能在同一行显示的问题；也可以使文本围绕在图像周围，在 CSS 中任何元素都可以浮动。浮动元素会生成一个块级框，浮动后高度消失；靠内容才能撑起来；　　浮动的方向：float:left/right;出现一些问题，背景不能显示，边框不能被撑开，浮动的元素父级height消失；

清除浮动的三种方法；

1.直接给父级加高度；
2.在浮动最后的一个元素后面加上一个新元素设置属性，clear：both；
3.父级直接overflow:hidden；

浮动中还有很多内容，我只是根据自己的学习回忆能记得的东西；想学好编程。我们还要多写啊

响应式布局

1.RWD指的是响应式web设计，指能够适应不同屏幕的尺寸传递网页，

HTML统一资源定位器：

url:也被称为网址；

scheme--定义因特网服务类型。最常见的是HTTP（超文本传输协议）；

host--定义域主机（HTTP默认是www）

domain--定义域名.com.cn

:port--定义主机端口号（HTTP默认端口号是80）

path--定义服务器路径；

filename--定义文档，资源的名称；

html+css学习总结的更多相关文章

CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u ...
css学习归纳总结（三）转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法行内样式行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
css学习归纳总结（二）转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
css学习归纳总结（一）转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器如:p, body, img, div{} 2.兄弟选择器如:p + p { color:#f00; } 3.属性 ...
【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器如:p, body, img, div{} 2.兄弟选择器如:p + p { color:#f00 ...
HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

UVa 11636 (注意读题) Hello World&excl;
这道题巨坑啊,样例中以-1结束输入的,所以我就天真的以为测试数据也是以-1结束输入的其实人家原文中说: Input is terminated by a line containing a nega ...
Windows api 函数全部列表（未完成）
网上找了很久,发现没有完整版的,msdn上面有,但是不方便查阅,所以想自己整理一下:由于工程量过于庞大,希望大家共同完成.MSDN:http://msdn.microsoft.com/en-us/li ...
struts2+jquery+ajax实现上传&amp&semi;&amp&semi;校验实例
一直以为ajax不能做上传,直到最近看了一些文章.需要引入AjaxFileUploaderV2.1.zip,下载链接:http://pan.baidu.com/s/1i3L7I2T 代码和相关配置如下 ...
【servlet3&period;0新特性】Annotation注解配置
servlet3.0新特性Servlet3.0引入的若干重要新特性,包括异步处理.新增的注解支持.可插性支持等等,为读者顺利向新版本过渡扫清障碍.Servlet3.0新特性概述Servlet3.0作为 ...
老李推荐：第6章3节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令翻译类
老李推荐:第6章3节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-命令翻译类每个来自网络的字串命令都需要进行解析执行,只是有些是在解析的过程中直接执行 ...
mybatis if test 解决页面升序和降序的问题
<if test="status !=null and status !='' and status =='1'.toString()"> ORDER BY tag.c ...
Ubuntu shutdown
gsettings set com.canonical.indicator.session suppress-logout-restart-shutdown true
STL容器 -- Set
核心: set 是一个数学含义上的集合-----保证了每个数的确定性, 互异性, 不仅如此, set 中的元素还是有序的. 头文件: #include <set> 拓展:由于 set 内的 ...
一键部署LNMP堆栈Web应用基础架构
https://market.azure.cn/Vhd/Show?vhdId=9852&version=10884 产品详情产品介绍LEMP/LNMP 是指一组通常一起使用来运行动态网站或者 ...
nginx 安装和配置文件说明
1. 安装依赖包 yum install gcc gcc+ yum install -y pcre pcre-devel openssl openssl-devel zlib zlib-devel 2 ...