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. php JS 导出表格特殊处理

    但是这样导出身份证号会变为科学计数: 解决方法就是: 我们了解一下excel从web页面上导出的原理.当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取 它,所以把mi ...

  2. 20172306 2018-2019-2 《Java程序设计与数据结构》第九周学习总结

    20172306 2018-2019-2 <Java程序设计与数据结构>第九周学习总结 教材学习内容总结 无向图 图是由结点和这些结点之间的连接构成 就图来说,结点叫做顶点,结点之间的连接 ...

  3. Java Swing实现展示数据，以及过滤排序

    public class RelationCostctrTable extends DefaultTableModel { public RelationCostctrTable(Vector< ...

  4. 详解js跨域

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 对于端口和协议的不同,只能通过后台来解决.URL 说明 是否允许通信 http://www.a.com/a.js http ...

  5. Linux 下 Samba 服务器搭建

    初学,分享 环境和条件--- 虚拟机:VMware虚拟机 系统:Linux ubuntu 4.4.0-31-generic #50~14.04.1-Ubuntu SMP Wed Jul 13 01:0 ...

  6. vue使用中遇到的，以及vue1.0到vue2.0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...

  7. docker启动异常driver not supported

    使用阿里云机器重启docker服务出现错误提示信息 [root@iz2ze5ivwiz2bnwddc20k4z ~]# systemctl restart docker Job for docker. ...

  8. MyBatis中<if test=" ">标签条件不起作用

    问题产生? 今天在做Excel导出的时候,有个判断一个状态的字段,我的这个字段是int类型的,还有两个时间类型,我在判断的时候给的是Long类型的. 在测试的时候发现,不管怎么样都不执行if条件里面的 ...

  9. mongodb分组排序

    @Override public MessageDto getCheckInMembersByFlight(String fltDt, String fltNr, String channel,Str ...

  10. tensorflow学习之（十一）将python代码写入文件

    #save to file import tensorflow as tf import numpy as np ##(1)Save to file 把相关变量存储到文件中 #remember to ...