2016年11月19号，计划把基础在看一下，听大神说好的东西就要多看几遍，知识是学来用的解决问题的，加油

接下来的是我在自学中的小笔记吧，每天都在保持几个小时的学习思考状态，由于要升本所以学前端的时间相对分的有点少，不求进度有多快，只愿能有收获。如这里面有错误，望提出，我再加以修改，谢谢了。

总结学习知识（工欲善其事，必先利其器：浏览器Opera、IE、Google、火狐；开发工具：Notepad++、或者自带记事本）

1、html部分：html的全部语法，主要结构，超链接和常用标记语言

2、css部分：css的三种选择器的使用，使用Div+css进行布局，搞清楚浮动问题

一、格式

语法：HTML标记语言(表示网页信息的符号标记语言）

可以设置文本的格式、创建列表、插入图像和媒体、建立表格、超链接可以使用鼠标点击超链接来实现网页之间的跳转。

标记和属性：保存格式(.html  .htm  .xhtml)

属性格式<标记 属性1=属性值 属性2=属性值  属性3=属性值.......>

不区分大小写，一般写小写；注释<！——......——>；空格键和回车键不会影响网页，无论加多少空格键，但是只会有一个空格，回车但是会显示多行；tab可以缩进；字符实体如空格、小于号...;

二、基本结构

<html>...</html>

开始标记，位于网页的最前端和最后端

<head>...</head>

头信息标记，头标记，开始标记，主要用来包含文件的标准信息，如关键字，标题，不会在浏览其中显示

<title>...</title>

标题标记，一般不能太长，不能包含其他标记，放在head元素里面

<body>...</body>

主体标记，构成我们所看成的标记，bgcolor背景颜色、text字体颜色、link超链接颜色、alink正在访问的颜色、vlik访问过的颜色

<meta>... </meta>

页面的元信息（meta-information）；

功能：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词；

必须属性：content 值：same_text,比如name属性相关的元信息；

常见属性1、author 2、keywords 3、description 4、others

把content属性关联到一个名称，比如描绘出网页的关键词：<meta name="keywords" content="博客园 博客">；

注意meta标记必须放在head元素里面。

三、文档设置标记—格式标记（<br>、<p>、<center>、<pre>、<li>、<ul>、<dl>、<dt>、<dd>、<hr>、<div>）

<br>强制换行    <p>换段落标记    <center>居中对齐标   <pre>预格式化标记：保留排好的格式    <li>列表项目标记，有value属性   <ul>无序列表标记   <ol>有序列表标记，可以有type属性

< dl>、<dt>、<dd>定义型

四、文档设置标记—文本标记（<hn>、<font>、<b><i><sub><tt><cite><em><strong><small><big><u>）

五、图像标记（img）

六、超链接的使用（a）

七、html表格（<table>、<caption>、<tr>、<th>、<td>）

table属性

2 caption、3 tr属性

td th属性

八、html框架（<frame>、<frameset>）

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

九、html表单设计（<form><input><select>）

十、使用css样式的方法

十一、css样式表(标签选择器、class选择器、ID选择器、组合选择器、伪类选择器以及优先级问题)

十二、css属性（网页中的颜色属性、字体属性、背景属性、文本属性、边框属性）

十三、Div+css布局（盒模型、布局相关属性：定位、浮动、显示、溢出）

十四、实战（简单的企业网站首页）

html+css基础篇的更多相关文章

  1. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  2. html/css基础篇——iframe和frame的区别【转】

    转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...

  3. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  4. 前端面试题——html与css基础篇

    整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...

  5. CSS 基础篇、绝对有你想要

    本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > ...

  6. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  7. CSS基础篇之选择符3

    border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...

  8. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  9. html/css基础篇——link和@inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

随机推荐

  1. Visual Studio 换颜色

    --- 给 Visual Studio 换颜色 “为革命,保护视力,预防近视,眼保健操开始......” 这个应该是最老版本的眼保健操了,你听过? 一堆废话 且不说上面这个眼保健操到底有木有用,让眼睛 ...

  2. Kraken.js!

    Hello Kraken.js! 前言 kraken.js 由paypal 公司开源的一个用于快速开发基于Express.js框架应用的快速开发工具, 因为kraken 并没有在Express.js基 ...

  3. Jumony Core 3，真正的HTML引擎

    Jumony Core 3,真正的HTML引擎,正式版发布 2013-11-28 17:22 by Ivony..., 778 阅读, 18 评论, 收藏, 编辑 Jumony是一个开源项目,已经有三 ...

  4. -协同IResult

    Caliburn.Micro学习笔记(五)----协同IResult   今天说一下协同IResult 看一下IResult接口 /// <summary> /// Allows cust ...

  5. 使用反射机制实现jQuery调用ashx类中的指定方法

    使用反射机制实现jQuery调用ashx类中的指定方法   近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...

  6. div光标定位问题总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 论公司spring的滥用

    这个公司每个项目用不同的一套开发框架,实在忍不住拿一个出来说说事.

  8. CSS：CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  9. java链接mysql数据库

    package com.DateSystem; import java.sql.Connection; import java.sql.DriverManager; import java.sql.S ...

  10. 从零开始学C++之运算符重载（三）：完善String类（[]、 +、 += 运算符重载）、>>和<<运算符重载

    在前面文章中使用过几次String类的例子,现在多重载几个运算符,更加完善一下,并且重载流类运算符. []运算符重载 +运算符重载 +=运算符重载 <<运算符重载 >>运算符重 ...