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. weblogic安装升级配置

    本次操作是主要围绕如何搭建weblogic服务器升级weblogic软件及配置服务,总共有三大步骤,可划分为六个小步骤: 选取已有环境,准备weblogic压缩包,java包等 准备操作系统环境用户目 ...

  2. Chapter_4_JAVA作业

    一.类的封装,继承与多态 1.课前预习 1.1 举列现实生活中的封装,以及简述在程序中什么是属性的封装? 1.1.1 将东西捆绑在一起,如集成芯片:高压电线等等 1.1.2 封装就是将属性私有化,提供 ...

  3. 配置GitHub的SSH key

    配置GitHub的SSH key 生成密钥对 打开git bash工具(Windows环境),Linux则直接打开命令行,执行下面的命令生成密钥文件 ssh-Keygen -t rsa -C &quo ...

  4. 面试简单整理之IO

    1.字节流,字符流 整个Java IO体系都是基于字节流(InputStream/OutputStream) 和 字符流(Reader/Writer)作为基类,根据不同的数据载体或功能派生出来的. 2 ...

  5. tomcat中如何禁止列目录下的文件

    tomcat中如何禁止列目录下的文件在{tomcat_home}/conf/web.xml中,把listings参数设置成false即可,如下: <servlet> <servlet ...

  6. python 数据可视化 -- 生成可控的随机数据集合

    生成可控的随机数据集合 使用 numpy.random 模块 numpy.random.random(size=None)  返回 [0.0, 1.0) 区间的随机 floats, 默认返回一个 fl ...

  7. java8 先groupingBy 后map

    Map<Integer,List<String>> mapBanJI_UserNameList=list.stream().collect(Collectors.groupin ...

  8. 摹客iDoc的PS插件全新改版！—— 智能检测不对应的设计稿

    一.简洁美观——iDoc的PS插件全新界面 iDoc对PS插件的界面进行了全新设计,无论是登录.上传.还是设置界面,都变得更精致.简洁美观,功能分布也非常明确,是一款轻巧且实用的小插件. 二.同步上传 ...

  9. 南昌邀请赛I.Max answer 单调栈+线段树

    题目链接:https://nanti.jisuanke.com/t/38228 Alice has a magic array. She suggests that the value of a in ...

  10. 图数据库-Neo4j使用

    Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix)  为节点添加一个ID (:Movie ...