前端 html 总结（一）

基础部分：
计算机原理 a： 是由运算器 控制器 内存组成
储存器包括内存、外村
外存 硬盘
内存 由外村调入到内存执行
输入——内存——cpu 运算

cpu运算——内存——输出设备

程序是人为控制电脑，通过指令对电脑进行操作

html部分：
标签
标记
</> 单标记
<></> 双标记

注意：
所有属性必须有值
必须加双引号
字体有分级区别

网页组成：
结构与内容

head 中标明属性

标签的形成：
1.块状元素
特点：
独霸一行
可以设置宽高
默认请款高度和内容相等
宽度和浏览器同宽

2.行级元素
特点：
同行显示

标签：
<html></html>
<head></head>
<title></title> 标题
<body></body> 内容
<hr></hr> 标题大小

补充：
html数据：长度值、绝对值、相对值
<标记名 属性名=“属性值” 属性名2=“属性值”>

4.块状元素标签
<font></font>
<b></b>
<hr></hr>
<ol></ol>
<li></li>
<dl><dl>
<dd></dd>

5.行级元素

<img src= "" alt="" titele> // 链接
<a></a>
<span></span> 将块状元素转换成行级元素
<input type=""> 设置表单的属性
<img src > 链接
<textarea> 多行文本

6.表单的使用以及客户的链接
<form></form> 表单的标记
<input><input> 表单描述
<input type=""> 描述样式表
type属性问题：
<password> 密码文本
<textarea>多行文本
<select>下拉菜单
<submit> 提交按钮
<button> 普通按钮
<reset>重置按钮
<checkbox> 双选按钮
<title> 文本文件
<hidden> 隐藏

注意：
<form action ="" methed="提交方法">
<form action> 提交的每项数据必须加name

如果输入框中没有name value 则数据不予提交
所有表单包括from 标记中提交的方式

提交方式
get 提交
post 提交
get 提交 ：
1.不安全
2.提交数据有长度
3.255数据

post 提交：
隐秘字段 可以增加安全性
2.无长度限制

web 开发标准
1.标签闭合
2.属性必有值
3.标签名 属性用小写

跨列/行
1.属于表单结构
2.只能通过表格属性来实现

跨行标签
<colspan>/行
<rowspan>/列

链接类型：
1.页面链接 描点

<a name="can">
<a href="# can">

2.站内链接

< a href="hettp/www.baidu.con">

3.邮件链接

<a href="134@qq.con">

二 css 部分

CSS 的优点
1.美化页面
2.页面布局

<div > </div> 盒子模型

<div>内容 ：默认情况 为块元素 可以通过转换来改变

<style type="text/css"></style > //格子值

{
属性值
}

2.三种容器
1.id 选择器
< div id="">

2.class 选择器

<div class>

其他选择器
*　主要是解决兼容问题

注：三种选择器可以相互使用

层级选择器

语法 选择器1 选择器 2

4.属性问题：
文本属性：
font_family 通用字体
line_height 行高
text_decoration 一般

5.背景属性
background_color 背景颜色
background_img url 链接
坐标系：
坐标:
background_repeat -x
坐标

CSS 模型 盒子组成
1.内填充 padding lelt-top-right-bottom -x
边框
border-widtth
2.外填充
margin _buttom 四个方向

结论：
一个盒子的实际宽度 =内容+外填充四个方向+内填充分四个方向

CSS布局：
1.默认文档流
2.浮动文档 float /方向
注意：
1.元素浮动范围在元素之内
2.会对元素之间产生影响
3.浮动元素对父元素与的宽高会产生影响
4.如果父元素一行存在多个元素浮动为父元素宽高
否则会出想布局错乱

2.注意：
某些元素有默认的margin 和padding 用两者置0

定位布局：
posttion :absolute (绝对)
relatire 相对
重新定位位置不释放
绝对定位也是让盒子漂浮原来的文档流
上 下 左 右
注意：
以上这四个设置一定是设置了position 之后才能生效

总结：
float 和 position 异同：
相同：
都浮动、从默认文档脱离

float 是从父元素 的 left right 来参考定位
2.position 定位更加强大 left 0px; 直接定位

html 前端 总结(一)的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  10. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

  1. mysql数据库备份与还原命令

    还原一个数据库:mysql -h localhost -u root -p123456 www 备份一个数据库:mysqldump -h localhost -u root -p123456 www ...

  2. [导入]Eclipse 导入/编译 Hadoop 源码

    http://www.cnblogs.com/errorx/p/3779578.html 1.准备工作 jdk: eclipse: Maven: libprotoc :https://develope ...

  3. Android MVP理解

    Android默认采用的是MVC: View:对应于布局文件 Model:业务逻辑和实体模型 Controllor:对应于Activity 但是却存在很多问题: 1.这个View对应于布局文件,其实能 ...

  4. IconFont和FontAwesome的区别？

    一.[Iconfont] Iconfont支持所有低版本浏览器: Iconfont的图标库更大: Iconfont可以用自己上传的svg,但是要花费大量时间和耐心去设计AI图标: Iconfont的使 ...

  5. ajax轮循

    使用 AJAX 进行异步加载轮询操作.简单代码如下: <script> // 执行ajax轮循操作 function polling(){ var xmlhttp; // 判断浏览器--创 ...

  6. Codeforces 675E Trains and Statistic（DP + 贪心 + 线段树）

    题目大概说有n(<=10W)个车站,每个车站i卖到车站i+1...a[i]的票,p[i][j]表示从车站i到车站j所需买的最少车票数,求所有的p[i][j](i<j)的和. 好难,不会写. ...

  7. BZOJ1841 : 蚂蚁搬家

    树分治,对于每个分治结构,维护两棵线段树. 第一棵按dfs序维护所有点到重心的距离,第二棵维护每个分支的最长链. 那么当前结构对答案的贡献就是第二棵线段树的最大值$+$次大值. 对于操作$0$,如果是 ...

  8. POJ 2480 (约数+欧拉函数)

    题目链接: http://poj.org/problem?id=2480 题目大意:求Σgcd(i,n). 解题思路: 如果i与n互质,gcd(i,n)=1,且总和=欧拉函数phi(n). 如果i与n ...

  9. 在ScrollView下加入的组件，不能自动扩展到屏幕高度

    ScrollView中的组件设置android:layout_height="fill_parent"不起作用的解决办法 在ScrollView中添加一个android:fillV ...

  10. [WP8.1UI控件编程]Windows Phone自定义布局规则

    3.2 自定义布局规则 上一节介绍了Windows Phone的系统布局面板和布局系统的相关原理,那么系统的布局面板并不一定会满足所有的你想要实现的布局规律,如果有一些特殊的布局规律,系统的布局面板是 ...