Day1:html和css

  • 了解浏览器
  • 掌握WEB标准
  • 理解标签语义
  • 掌握常用标签
  • 掌握三种列表标签

前端开发工具:

浏览器是网页显示、运行的平台，IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera称为五大浏览器。

chrome(谷歌), sublime, photoshop, ie, firefox(火狐), safari, 和 Opera.

用sublime书写代码.

浏览器内核:浏览器分两个部分,一个是渲染引擎(layout engineer 或者 Rendering Engine)和js引擎.

渲染引擎是负责网页的内容(如html, xml 图像等), 和 css, 还有计算网页的显示方式,, 进行显示, 浏览器的内核不同对网页语法的解释就会有所不同, 导致渲染的效果也不同.

js引擎是用来解析javascript语言的,来实现网页的动态效果.听说开始渲染引擎和js引擎是没有区别的,只是后来js引擎的独立,内核就指渲染引擎了, 常见的浏览器内核分为:Trident(IE内核), Blink(chrome), Gecko(Firefox), Webkit(Safari).

web标准,重点在于兼容性.不同的浏览器解析出来的效果会不一样.这就需要web标准.包括结构Structure,表现Presentation,行为Behavior三个方面,结构标准是我们要学的HTML,用于对网页元素进行整理和分类,表现标准是我们要学的css,用于设置网页元素的样式,行为标准是我们要学习的javascript用于网页的交互.

html决定页面的结构

css决定页面的样式

js决定页面的行为

  1. html相当于人的骨骼结构
  2. css相当于人的穿着打扮
  3. javascript相当于人的动作行为

html学习

HTML是超文本标记语言,文本,标签<>,不是一种编程语言,而只是标记的语言,标记语言是一套标记标签.

html的基本骨架:

<HTML>

 <head>

  <title></title>

 </head>

 <body>

 </body>

</HTML>

字符集:utf-8是目前常用的字符集编码方式,gb2312和big5,GBK.

<HTML>

 <head>

 <meta charset="UTF-8">

  <title></title>

 </head>

 <body>

 </body>

</HTML>

常用的标签:

<head> 头部 <title></title> 文档标题

<h1> <h2> <h3> <h4> <h5> <h6>

段落标签<p>,水平标签<hr/>是单标签, 换行标签<br/>,h1到h6文字从小到大,p标签一行只能放一个.

div和span,网页布局css+div.一行可以放多个span,而div一行一个,没有语义,用来布局的.文本格式标签:

<b></b><strong></strong>粗体

<i></i><em></em>斜体

<del></del><s></s>加删除线

<u></u><ins></ins>加下划线


<strong> <em> <ins> <del>

图形标签img

<img src=""/> alt title width height border

图形的路径

图形不显示时替换的文本

显示的内容

宽度

高度

图像边框的宽度

链接标签anchor

<a href="" target= "_blank"></a>

緢点定位

<a href="#me">dashu</a>

<h1 id="me>dashucoding</h1>

<base>标签

// img hr br base 单

<head>

 <base target="_blank"/>

</head>

特殊字符

注释：`

相对路径,同一级的

<img src=" xxx.gif "/>

路径:

xxx.html

images/xxx.gif

<img src=" images/xxx.gif "/>

图片放在上一级路径:

html->xxx.html

xxx.gif

<img src= "../xxx.gif "/>

列表标签:无序列表ul,有序列表

<ul>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ul>


<ol>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ol>


<ul>

 <li><li>

</ul>


<ol>

 <li></li>

</ol>


<dl>

 <dt>名称</dt>

 <dd></dd>

 <dd></dd>

</dl>

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞``

Day1:html和css的更多相关文章

  1. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

  2. Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. CSS学习笔记day1

    1.css的简介  css:层叠样式表 (层叠:一层一层的:样式表:很多的属性和属性值) 使页面显示效果更好 将页面内容和显示样式进行分离,提高了显示功能. 2.css和html的结合方式(4种) 在 ...

  5. CSS基础-DAY1

    CSS 概述CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何显示 HTML文件中的标签元素,CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...

  6. css day1

    基础知识 css:层叠样式表 以html为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版 css中只有(冒号):  没有(等于号)= css样式规则 1.选择器用于指定css样式作用的htm ...

  7. html+css 知识点总结 day1(01-08)

    01  初步认识浏览器 02 浏览器内核 IE   内核:Trident,                 win10 Edge  内核:EdgeHTML Firefox(火狐浏览器)   内核:Ge ...

  8. CSS学习—day1

    摘要:web前端设计三剑客分为是html.CSS.Javascript,前面我们已经对html基础知识做了介绍,它定义了页面基本组成,而CSS则控制网页的样式和布局. 首先,明确一个问题,什么是CSS ...

  9. 中软培训第一周复习总结 --简单的HTML 与CSS

    一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...

随机推荐

  1. Visual Studio Installer 使用案例

    1.创建自定义操作 一步:新建“安装程序类”文件 2.重写函数: public override void Install(IDictionary stateSaver) { base.Install ...

  2. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  3. springboot使用Redis，监听Redis键过期的事件设置与使用代码

    我使用的是Windows下的Redis服务,所以一下Redis设置都是在Windows平台进行. 1.修改Redis配置文件 1.1:Windows下的Redis存在两个配置文件 修改带有servic ...

  4. java用POI操作excel——随便写一下，最基础的东西

    前两天部门实施在做一个东西,需要把客户放在Excel中的数据导入到Oracle数据库中,我就想着直接写一个模板,必要的时候改一下实体类应该可以解放实施同事的双手,不过在实际写的过程中,还是碰到很多问题 ...

  5. 设计模式学习心得<桥接模式 Bridge>

    说真的在此之前,几乎没有对于桥接模式的应用场景概念. 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来 ...

  6. web安全之机器学习入门——3.2 决策树与随机森林

    目录 简介 决策树简单用法 决策树检测P0P3爆破 决策树检测FTP爆破 随机森林检测FTP爆破 简介 决策树和随机森林算法是最常见的分类算法: 决策树,判断的逻辑很多时候和人的思维非常接近. 随机森 ...

  7. OO第二单元单元总结

    总述 OO的第二单元主题是电梯调度,与第一单元注重对数据的输入输出的处理.性能的优化不同,第二单元的重心更多的是在线程安全与线程通信上.这此次单元实验之前,我并未对线程有过了解,更谈不上“使用经验”, ...

  8. IIS Express（7.0） HTTP 错误 500.22 - Internal Server Error（vs2013）

    1.错误如下: HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置. 解决的方法: 首先,找到本地appcmd.x ...

  9. linux sort排序命令的高级用法(按多个列值进行排列)

    http://www.jquerycn.cn/a_9076 在linux中,使用sort按行进行排序是很简单的.不过有时,生活总是爱抛给你一个一个的问题.如果使用sort按多个列值排列,同时使用tab ...

  10. fortran语言调用fortran写的dll

    环境:vs2013+IVF 2011 有时候想把fortran写的常用的函数编译为DLL,以供不同的fortran exe调用,这时候应该怎样做呢?[参考 彭国伦老师 fortran95 程序设计 书 ...