前端学习自学笔记:day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助.

在此之前先为大家显示下前端工程师的路线图:

第一天的笔记:HTML AND CSS

早上学习知识:

1.注册freeCodeCamp&GitHub

2.freeCodeCanp基本操作

3.代表一个HTML元素,h1是一级标题。

h2,3,4....代表2,3,4。。。。级标题

注释:浏览器会自动地在标题的前后添加空行。

注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

4.p是段落,格式为

.

注释:浏览器会自动地在段落的前后添加空行。

不能忘记结束标签。

5.注释 注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

6.lorem ipsum text 占位符

7.style 样式 (以inline style(内联样式)为例)

颜色属性 color 例:CatPhotoApp

字号属性 font-size 例:

字体属性 font-family 例:

8.元素选择器

例:

.blue-text {

color: blue;

}

元素上应用:

CatPhotoApp

中午补充的知识点:

之间的文本描述网页

之间的文本是可见的页面内容

HTML链接是通过标签进行定义的。

1.使用新窗口打开链接 target="_blank"

HTML图像是通过标签进行定义的。

例:

HTML元素语法

- HTML元素以开始标签起始

- HTML元素以结束标签终止

- 元素的内容是开始标签与结束标签之间的内容

- 某些HTML元素具有空内容

- 空元素在开始标签中进行关闭

- 大多数HTML元素可拥有属性

注意:大多数HTML元素可以嵌套(可以包含其他HTML元素)

例:

This is my first paragraph.

空的HTML元素

没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。

例:

HTML建议使用小写标签。

HTML属性

HTML标签可以拥有属性。

属性总是以名称/值对的形式出现并且在开始标签中规定的。

例:

这是一个例子

属性例子:

对齐标题

为标题添加背景颜色

HTML建议使用小写属性值。

HTML必须为属性值添加双引号。

HTML水平线

标签在HTML页面中创建水平线。(可用于分割内容)

例:

This is a paragraph

This is a paragraph

如何查看其他网页的源代码

单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),

其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

HTML拆行(换行)

例:

This is

a para

graph with line breaks

注意:当显示页面时,浏览器会重新排版,会自动忽略掉多余的空格和空行,所以

多余的空行和空格会被认为是一个空格。

字体加粗:

例: www.DIVCSS5.com

本文来自企鹅号 - 极客AND编程媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

一个简单的卡动车排队系统

7320
来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

27650
来自专栏十月梦想

bootstrap表格

条纹表格.table-striped(作用在table的class类名),实现隔行换色

9420
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

30660
来自专栏程序员八阿哥

开心学前端(一):HTML、CSS入门(1)1.1 html概述及html文档基本结构1.2 html标签入门

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语...

17710
来自专栏从零开始学自动化测试

Selenium2+python自动化65-js定位几种方法总结

前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一、以下总结了5种js定位的方法 除了id是定位到的是单个elemen...

34370
来自专栏静默虚空的博客

HTML 简介

HTML 简介 超文本标记语言  (Hypertext Markup Language, HTML)  是一个可以用来结构化你的Web内容并给予其含义和目标的...

22790
来自专栏Golang语言社区

go语言文件正则表达式搜索功能示例

package main import ( "fmt" "os" "path/filepath" "regexp" ...

36350
来自专栏九彩拼盘的叨叨叨

前端开发利器:Emmet 介绍 其他

Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器。Emmet 定义了一些缩写...

6920
来自专栏强仔仔

JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

19960

扫码关注云+社区

领取腾讯云代金券