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. ORACLE设置用户密码不过期

    1.查看用户的 profile 是哪个,一般是 default SELECT USERNAME, PROFILE FROM dba_users; 2.查看指定概要文件(这里是1中对应的profile) ...

  2. Openssl asn1parse命令

    一.简介 asn1parse命令是一种用来诊断ASN.1结构的工具,也能用于从ASN1.1数据中提取数据 二.语法 openssl asn1parse [-inform PEM|DER] [-in f ...

  3. MongoDB的Replica Set以及Auth的配置

    http://blog.0x01.site/2017/01/13/MongoDB%E7%9A%84Replica-Set%E4%BB%A5%E5%8F%8AAuth%E7%9A%84%E9%85%8D ...

  4. Android自动化之Monkey环境搭建（一）

    从事测试行业两年了,一直很喜欢研究新技术,但是最近有点慵懒.正好公司新出了产品,督促我学习monkey用来测其稳定性. 网上搜索了很久,内容总是很零散,通常需要找几篇文章才能搭好环境.特写此文,一篇文 ...

  5. springboot Ehcache使用

    .Ehcache简单说明及使用 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Ja ...

  6. java之路 定义个一初始值 取它 个位 十位 百位 千位。。的数值。

    class Demo{ public static void main(String[] args){ int i =2584; //do{ int g = i%10; int s = (i%100) ...

  7. nohup 运行后台程序

    写了个程序,大概就是日志文件快写满的时候自动删日记.然后 java -jar  log_delete.jar  &  跑起来.过两天ps发现程序没有了, 网上一查明白是因为:通过终端(shel ...

  8. hw1

    如上面两个小程序中,分析下列问题: 1.Identify the fault. 2. If possible, identify a test case that does not execute t ...

  9. #2019-2020-4 《Java 程序设计》第九周总结

    2019-2020-4 <Java 程序设计>第九周知识总结 第十一章:JDBC与MySQL数据库 11.1 MySQL数据库管理系统 下载安装: 11.2 启动MySQL数据库服务器 具 ...

  10. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...