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. Win7远程桌面：发生身份验证错误

    下载并安装KB4103718补丁,安装完成后重启计算机 http://www.catalog.update.microsoft.com/Search.aspx?q=KB4103718 根据操作系统选择 ...

  2. stm32定时器时钟以及中间对齐模式

    在永磁同步电机的控制中,需要对电机的三相定子施加一定的电压,才能控制电机转动.现在用的较多的是SVPWM(SVPWM的具体原理会在后面另写一篇博客说明),要想产生SVPWM波形,需要控制的三相电压呈如 ...

  3. strcat的用法

    原型: char *strcat(char *str1,char *str2); strcat的实现: char* MyStrcat(char *dst, const char*src) { if ( ...

  4. docker创建镜像及push镜像出错问题

    docker build  出错 Got permission denied while trying to connect to the Docker daemon socket at unix:/ ...

  5. [精华][推荐]CAS SSO单点登录服务端客户端实例

    1.修改server.xml文件,如下: 注意: 这里使用的是https的认证方式,需要将这个配置放开,并做如下修改: <Connector port="8443" prot ...

  6. 从集合中查找最值得方法——max(),min(),nlargest(),nsmallest()

    从集合中查找最值得方法有很多,常用的方法有max(),min(),nlargest(),nsmallest()等. 一.max()和min() 1.1 入门用法 直接使用max(),min(),返回可 ...

  7. NOVO SOP （SOP简介及历史）

    SOP(Standard Operation Procedure),标准作业程序. 一.什么是SOP(标准作业程序) 所谓SOP,是 Standard Operation Procedure三个单词中 ...

  8. easyui_validatebox常用验证

    $.extend($.fn.validatebox.defaults.rules, { idcard: {// 验证身份证 validator: function (value) { return / ...

  9. javabean转换为map对象

    在调用第三方接口发现对方使用map进行接收(不包括秘钥等),将bean类属性转换为map,直接贴代码: /** * JavaBean对象转化成Map对象 * * @param javaBean */p ...

  10. spring深入学习(二)-----bean的生命周期、IOC容器bean装配

    bean的生命周期 1.实例化Bean对于BeanFactory容器,当客户向容器请求一个尚未初始化的bean时,或初始化bean的时候需要注入另一个尚未初始化的依赖时,容器就会调用createBea ...