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. 史上最全的Matlab资源电子书教程和视频下载合集【超级推荐】

    收藏吧,网上搜集的,费了老大劲了,推荐给有需要的人,^_^.   MATLAB课件2007北京交通大学.zip 4.87 MB   A Guide to MATLAB for Beginners an ...

  2. Prototype,创建型模式

    读书笔记_探索式测试_混合探索式测试   一.测试场景 1.讲述用户故事 2.描述需求 3.演示产品功能 4.演示集成场景 5.描述设置和安装 6.描述警告和出错情况 二.使用基于场景的探索式测试 1 ...

  3. iOS基础 - XML & JSON

    一.HTML & XML HTML 是用来描述网页的一种语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记 ...

  4. pearl（二分查找，stl）

    最近大概把有关二分的题目都看了一遍... 嗯..这题是二分查找...二分查找的代码都类似,所以打起来会水很多 但是刚开始打二分还是很容易写挂..所以依旧需要注意 题2 天堂的珍珠 [题目描述] 我有很 ...

  5. asp.net打印网页后自动关闭网页【无需插件】

    项目遇需要网页加载自动打印网页后需要自动关闭该网页,但是百度了好久发现都是需要插件什么的 于是就自己摸索摸索,用js弄了个定时器,意外的发现,当打印设置窗口弹出后,定时器就暂停了 不管你点击取消或者打 ...

  6. Paint.NET

    http://www.dotpdn.com/downloads/pdn.html Paint.NET To download, please click the Free Download Now l ...

  7. html5 人物行走

    键盘方向键控制人物上下左右行走 演示地址 点击打开链接 MYCode <html> <head> <meta charset=utf-8> <title> ...

  8. Lua里的"switch-case"语句

    Lua本身并没有提供switch-case语句,难道说我们就只能靠不断的"if ... elseif ... "这样冗长的方式来实现选择的功能么?当然不是这样的.Lua提供了功能强 ...

  9. MacOSX64位机器上gcc编译32位x264静态库

    x264最新包地址:http://www.videolan.org/developers/x264.html 编译命令: ./configure --enable-static --host=i386 ...

  10. UITableView的常用方法与示例

    实例方法 dequeueReusableCellWithIdentifier: 初始化一个指定重用标识符的UITableCell对象 两个协议 UITableViewDataSource tableV ...