Day1:html和css

Bertha 。 2021-09-17 09:54 298阅读 0赞

![标题图][20181221193645502]

> Day1:`html`和`css`

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

前端开发工具:

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

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

![效果][20181221193645526]

用`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`的基本骨架:

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

常用的标签:

段落标签`<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>加下划线

图形标签`img`

<img src=""/> alt title width height border
    图形的路径
    图形不显示时替换的文本
    显示的内容
    宽度
    高度
    图像边框的宽度

## 链接标签`anchor` ##

## 緢点定位 ##

<a href="#me">dashu</a>
    <h1 id="me>dashucoding</h1>

`<base>`标签

// img hr br base 单
    <head>
     <base target="_blank"/>
    </head>

特殊字符

![效果][20181221193645632]

注释：\`

相对路径,同一级的

路径:

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

图片放在上一级路径:

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

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

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[20181221193645502]: /images/20210724/dfe621f2ce8d4d0ba8fd411584ee24fb.png
[20181221193645526]: /images/20210724/1fb7bdacc6274c75b4fe89527476e157.png
[20181221193645632]: /images/20210724/c2fa23c83ced4b3cad9e2fd91faabebc.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1