本文共 12148 字，大约阅读时间需要 40 分钟。

1.课程介绍

1.Html认识；

2.Html简单使用；

3.Html常用标签；

4.Css认识

5.Css使用

6.Css选择器

7.Css属性

2.HTML认识

2.1 什么是HTML

2.2.1 什么是网页

网页，是网站中的任何一页面，通常是HTML（标准通用标记语言下的一个应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页要使用网页浏览器来阅读。现在流行移动设备浏览网页。

（所有通过浏览器输入网址打开的页面就叫网页） 一个页面（html+css+js） HTML（Hypertext Markup Language，超文本标记语言）这种语言是为了创建网页和网页浏览显示的内容设计的一种标记语言。 超文本：为文字添加一个能导航到其它的地方的链接就是超文本。“超”等于“超链接” 标记：为文本的内容提供不同显示及排版。比如:“我就是倾斜”

浏览器解析网页顺序，所有语言都是按照从上往下的解析方式，这跟我们写文章的内容是一致的，从上往下编写。 但是注意一点相同的代码在不同的浏览器显示出来的效果可能不一样，这取决于浏览器的解析。

2.2 动态与静态网页

什么是静态网页:

        是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。另外,如果扩展名为.asp但却没有连数据库,完全是静态的页面,那也是静态网站.只是.asp扩展名。

什么是动态网页：

        是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务；

2.3 HTML、XHTML、DHTML

HTML：超文本标记语言(想写错,不容易)

XHTML：XML+超文本标记语言（结构比较严谨的HTML）

XML：是一种格式非常规范，严谨的一门语言（非常简单）

DHTML：动态HTML（HTML+CSS+Javascript）

拓展阅读

区分HTMl4.01和XHTML:

XHTML:eXtensible Hypertext Markup Language,可拓展的超文本标记语言, 比HTML更严格,可以理解XHTML是新的HTML规范;所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字必须用双引号括起来（而在HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号;除此之外XHTML废弃了部分HTML中的标签属性;

认识DHTML:

DHTML是Dynamic HTML的简称，就是动态的html，是相对传统的静态的html而言的一种制作网页的概念。 所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)，其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念,一般的使用法是: 1.通过HTML把网页标记为各个元素; 2.利用CSS设计元素之间的排版样式，并控制各个标签的位置; 3.利用javascript来控制各个标签;

2.4 HTML的历史

（W3C： 一般都是做一些规范与接口）

HTML1.0 HTML4.01 ： 现在很多网页都是基于这个版本开发 XHTML1.0 ： 只是更加规范而已 XHTML2.0 ： 完全没有人听它的… HTML5 : 只是一个HTML的升级版本(CSS3) HTML：是对前面的版本进行了兼容，我们现在学习的HTML所有的东西在学习HTML5的时候同样适用 wxml

2.5 开发HTML的工具

Dreamwear：Adobe公司的一款开发网页的产品(更适合美工)

：强力推荐(个人非常喜欢) 很像eclipse更适合做前端开发 X

HBuilder

vscode vurtual studio code 微软

Eclipse：这个就是我们要使用的工具(jee版本)

Sublime:提示功能比较强大(轻，小，需要安装插件)

记事本：用来装逼的

随便一个文本工具就可以开发HTML，我们使用的是eclipse(MyElipse)

2.6 浏览器认识

2.6.1 什么是浏览器

浏览器 是个显示网站服务器或文件系统内的文件，并让用户与这些文件交互的一种应用软件;

2.6.2 浏览器分类

浏览器内核：

ie：ie内核 ie8及其以前没有按照w3c的标准来开发 edge：已经开始按照w3c的标准来开发 现在使用谷歌内核 谷歌：chrome内核 80% 火狐：firefox 内核 （插件非常 控制台支持中文）9% safari：苹果自带浏览器内核 5% 网景通浏览器 -> IE浏览器(一家独大) -> 其它的浏览器(火狐，谷歌)

IE浏览器 (它现在问题非常多) 现代浏览器（比较高级的浏览） - 火狐，谷歌 山寨浏览器 （360，QQ，百度，糖果） 我们的建议是使用火狐或者谷歌 现在我们都使用火狐（firebug）

2.6.3浏览器使用场景

用于显示服务器里面的图片，视频，文字，等内容

2.7完成第一个HTML文件

步骤：1 新建一个文本文档

2 将后缀名改为html（htm） 3 在这个文件里加上相应的内容(hello world)

2.8小结

1.HTML:超文本标记语言

2.动态和静态网页区分 3.浏览器认识 4.完成第一个HTML网页

3. HTML入门

3.1 第一个HTML

    
           
   
            hello world 欢迎来到德莱联盟(你所写的内容全都在这里面)    
   

3.2 怎么用idea来开发一个网页

3.2.1 新建一个 web项目

然后会自动生成下面的代码

3.2.2 HTML页面基本架构

3.3 HTML注释

格式：

idea快捷键 ctrl+/（ctrl就是鸡键-----唱跳rap篮球 ）

3.4 HTML 的编码问题

代码：

   `

这个文件内容编码必需和文件编码一致,如果不一致那么有可能会出现乱码，从而带来不可预知的错误。

3.5 HTML的编码规范

规范：HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 HTML是不区分大小写（建议都使用小写） 注意不要交叉嵌套

    
           
   
            hello world 欢迎来到德莱联盟(你所写的内容全都在这里面)        
    正确的写法        
    错误的写法    
   

其实 你想写错很难浏览器有自动纠错功能！！！！！！！！！！！！浏览器牛逼

3.6 小结

1.第一个HTML页面;

2.HTML注释

3.HTML规范

4. HTML标签

4.1 什么是HTML标签

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签

学习标签，我们需要学习的东西有这么几个

带着这四个问题去学习标签：

1 标签的写法

2 标签的意义

3 标签的效果

4 标签的属性

4.2 标签的分类

双标签

双标签是比较多的，比如今天早上学习的html,body,head,title,b,i,u这些都是双标签 例：<b>内容</b><br> 单标签 单标签相对来说比较少，我们只需要记住它的格式 例：<hr />

4.3 标签属性

一个人，属性就有身高，年纪

<人 身高=“223” 年纪=“35”></人> 格式：<标签名 属性名=“属性值” 属性名=“属性值”></标签名> 属性中的值，可以加双引号，也可以加单引号，甚至可以不加 建议大家加上引号(统一)

4.4 基本标签

i,b,u,p,br,hr,hx,font,div,span

4.4.1

i,b,u,p,br,hr,hx

4.4.2 font修改文字

font标签已经废弃（以后不要用了）【但是我写博客还在用，哈哈】

今天的内容必须用到它（猜一猜：font应该有那些属性） Size: 值是从1-7 Face:修改字体(必需要我们自己的电脑上有这个字体) Color:颜色(rgb-不建议使用,十六进制，颜色名)

4.4.3 div，span（无意义的标签）

4.4.3 div,span(无意义的标签)

我们先说一个：文档流 什么是文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)

div占用的位置是一行，

span:行内元素, 内容有多宽就占用多宽的空间距离 用于让我们方便的去写CSS样式的

4.5超链接（A）标签

百度一下，你就知道！！！

4.5.1 常用属性

A标签里面有一个非常非常重要的属性（href）

href它的值：就是我们的统一资源路径（唯一的地址）

4.5.2绝对路径与相对路径

绝对路径：https://www.baidu.com

https: 协议(绝对路径一定要有协议) www.baidu.com / ip : 域名 还应该指向具体的一个页面 本地的绝对路径： 相对路径：始终从自己开始计算 同一个页面下的路径：

hello

都是去找下层的路径：

去找上层的路径：( … 回到上一层 )

4.6 图片标签（img）

注意：

①img是一个行内标签

②多种图片格式都认识（jpg,bmp,png,gif）

③属性src必需要有

④当我们修改图片的宽度时，高度会等比例进行缩放(反之亦然)

⑤alt:如果图片不存在,显示alt中的文字(这个文字是图片)

⑥title:图片的名称,解释(鼠标移动在上面会显示出来)

⑦width,height

4.7 列表标签

列表标签分为有序列表与无序列表：

4.7.1无序列表

代码格式

   
   
    
    
淘气喜羊羊
    
    
臭美美羊羊
    
    
舔狗沸羊羊
   

注意：无序列表的嵌套

   
    
    
淘气喜羊羊
    
    
臭美美羊羊
    
    
舔狗沸羊羊
    
    
其他        
     
            
      
我会回来灰太狼
            
      
时好时坏包大人
        
     
    
   

4.7.2 有序列表

格式（所有的格式和ul是完全一致的）

   
   
    
    
熊大
    
    
熊二
    
    
光头强
   

4.7.3定义列表（dl、dt、dd）

   
    
    
     名词
    
    
    
     名词的解释
    
 
   
   
    
    
     英雄联盟
    
    
    
     一款竞技游戏
    
    
    
     王者荣耀
    
    
    
     一款手游
    
   

4.8 表格标签

表格的组成：固定的列与可变的行组成

table,tr,td(td里面可以放任何元素) th(表头使用，效果为加粗居中) thead,tbody,tfoot（表格的结构标签） 完成一个最简单的表格 一行一列

注意：

1 表格默认是没有边框的(加上边框在table框架里用border属性)

2 它的宽和高默认是由里面的内容决定

3 所有行里面的列必需保证一致(下图为错误演示)

4 如果一个格子没有内容，请加上& nbsp;

今天会用到的一个属性：cellspacing:将单元格合并

th标签

   
            
     
                  
用户名 
                  
概况 
                  
性别 
                  
爱好 
             
             
              
灰太狼红太狼
              
夫妻
              
555
              
只能吃草
         
         
              
山东菏泽曹县
              
牛皮
              
666
              
我的宝贝
         
        
   

table中的跨行与跨列： 跨行（rowspan）：

   
            
     
                  
山东菏泽曹县
                  
牛皮666
                  
我呢宝贝
             
             
                  
钵钵鸡
                  
真香
             
                 
   

跨列（colspan）

       
   
            
     
                  
 
       
        山东
        
             
             
                  
菏泽曹县
                  
牛皮666
                  
我呢宝贝
             
        
   

4.9特殊符号

我们来了解一下一个标签他的名字是 ，主要用能是加粗

发现没有了！！！

问题是，我们怎么在页面上把 显示出来？？

这种情况我们就需要用到特殊符号：

4.1 form表单

表单的主要功能：可以让我们和用户进行交互

4.10.1 form表单

4.10.2 input标签

默认就是一个普通的文本框

标签用于搜集用户信息。   根据不同的 type 属性值，输入字段拥有很多种形式。   name name名 定义input元素的名称   value 任何字符 控件初始显示的文字内容（数据）   size 整数 定义输入字段的宽度   maxlength 整数 规定输入字段中的字符的最大长度   checked checked 指定控件处于被选取状态，此布尔属性仅适用于type属性设置为radio或checkbox时生成的控件   注意：readonly会向后台提交数据 disabled不会向后台提交数据   readonly readonly 指定控件处于只读状态   disabled disabled 当 input 元素加载时禁用此元素 input标签属性的值type 预定义值 规定 input 元素的类型。

text 单行文本输入框

password 密码输入框

checkbox 复选框

radio 单选框

submit 提交按钮

reset 重置按钮

image 图片提交按钮

src URL type属性设置为image时，此属性指定图片来源，此图片用于修饰图形化的提交按钮

button 普通按钮

hidden 隐藏控件

file 文件选择控件

4.10.3select

select：选择标签 -->格式如下（不要忘记了 name属性）

        曹县        北京        上海        广州        纽约    

注意的地方：

当有value的时候，传将value传到后台

没有value的时候，将它显示的内容传到后台

4.10.4 textarea标签

简介： <textarea name="" id="" cols="30" rows="10"></textarea>

Rows: 代表行（多少个字符） Cols:代表列（多少个字符） 注意 <textarea></textarea>中间什么都不加

下面为表单元素的内容演示与解释

    
       
       
           
       
   
        
            用户名：
    
    
        昵称：
    
    
        密码：
    
    
        爱好：
    干饭        
    装逼        
    喊666        
    老铁没毛病       
    
 性别：
    男
    女
    
        国籍：
                中国            美国            加拿大                头像：
    
    
        简介：
            
            
        
   

5 CSS

5.1 认识CSS

5.1.1 WEB标准介绍

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）html、表现（Presentation）css和行为（Behavior） js。

内容，结构，表现和行为

1.内容：就是制作者放在页面内真正想要让访问者浏览的东西(内容为王)

2.结构：使内容更加更加具有逻辑性与易用性

3.表现：用于修饰内容的外观的样式的东西称为表现

4.行为：对内容的交互及操作效果，如通过javascript判断表单的提交等

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

ECMAScript：javascript ,actionscript(flash)

WEB标准的目的

在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容

结构 HTML

样式CSS

行为JS

5.1.2 什么是CSS

CSS是(Cascading Style Sheets)层叠样式表的缩写 ，简称样式表。

网页设计者使用CSS可以定义元素的样式，包括字体，颜色及其它的高级样式。

5.1.3 为什么要使用CSS

采用标准的优点：

1.提高页面浏览速度。 使用CSS方法，比传统的web设计方法至少节约50%以上的尽寸。

2.缩短改版时间，将表现与内容相分离。 只要简单的修改几个CSS文件就可以重新设计一个有成千上万个网页。

3.降低网站流量的费用。带宽要求降低(代码更简洁),成本更低

4.理想容易被搜寻引擎搜索到。 提高网站在百度或google中的排名

5.内容能被更广泛的设备所访问。包括屏幕阅读机，手持设备，搜索机器人，打印机，电冰箱等等。

5.2 CSS入门

5.2.1 写第一个SCC样式

   想要变成红色加粗

5.2.2 CSS的语法

单个：样式属性名：样式属性值 ; 比如 color:red;

多个：样式属性名：样式属性值 ; 样式属性名：样式属性值 ; 比如 color:red;font-size:120px; 示例：

5.2.3 CSS属性

  在格式声明语句中，属性名称与属性值之间以冒号“：”隔开，属性值不需要使用引号括起来，除非属性值是由多个单词组成。

  有的属性可以指定多个属性值，多个属性值间以“,”隔开。   当定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。 如果值为若干单词，则要给值加引号： p {font-family: "sans serif";}

5.2.4 CSS中的注释

/* 注释的内容  */

5.2.5 注意事项

注意1： 一个CSS样式表由一个或多个规则组成；

每一条格式声明语句由“属性名:属性值”对组成，属性名和属性值间以冒号隔开，每条声明语句以分号“;”结束。 注意2：CSS对大小写不敏感。（大家尽量都用小写）

5.3 选择器

5.3.1 什么是 CSS选择器

Css选择器：把设置的“样式”作用于网页中的哪些元素；就是使用选择器

5.3.2选择器的写法与格式

5.3.3 基本选择器

*（所有，全部）

*通用选择器

/*通用选择器*/*{
       color: red;}

通用选择器一般我们不会使用，因为它会对页面上所有的元素的样式进行渲染，这样就会使页面的渲染速度变慢。

标签选择器

如果所有的(或者说大部分的)标签都要使用某一个样式,那么我们可以全用标签选择器

*{
       color: red;}/* 标签选择器  */div{
       width: 300px;    background-color: red;}input{
       width: 300px;}h1{
       font-size: 10px;}

类选择器

所有的标签都有一个class属性

我们为这个class设定一个值，然后再写选择器来匹配这一个值、

/* 要求：第一个，第三个，第五个变成红色    如果要对应 class的属性，需要在前面加上一个 .*/.ren{
       color: red;    font-size: 20px;}

例

我才是最最特殊的,哈哈哈...

ID选择器

所有的标签都有一个id属性

我们为这个id设定一个值，然后再写选择器来匹配这一个值 例：

/* 如果要对应id的属性，需要在前面加上一个 # */#mydiv{
       color: gray;}

   
    我才绿色的
   

Id使用的 # ，class 使用的是 .

规则上来说:一个html页面的id最必需唯一的

5.3.4 其他的一些选择器

E,F

多元素选择器 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 p,h1,h2{margin:0px;} 测试代码:

style>        h1,p{            background-color:yellow;        }                html代码:        
欢迎来到我到的主页
        
   
        
    
我是老王
        
    
我住在你隔壁
        
   
        
欢迎你随时过来

E F:

后代元素选择器 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #slidebar p{font-color:#990000;}

先说一下什么是后代？

1.设计div中的p标签字体颜色

2.设定ul中的所有span标签字体变大

3.设置一个class为myfocus的元素(div)内的字体加粗，并加上下划线

注意：如果多层，只作用到最后一层

多元素选择器可以和后代选择器同时使用

后代选择器不要嵌太多层p

测试代码：

                        
欢迎来到我到的主页
        
   
           
    
我是老王。
            
    
我住在您隔壁。
        
   
        
欢迎随时过来。

E > F 选择父元素为 元素的所有 元素。

子元素选择器 子元素选择器，匹配所有E元素的子元素F div > p{color:#990000;}

比后代选择器更加精确

注意：多元素选择器，子元素选择器可以和后代选择器同时使用

测试代码：

    
       
       
               
欢迎来到我到的主页
    
   
       
    
我是老王。
       
    
我住在您隔壁。
    
   
    
欢迎你随时过来。
    
   
    
    
我不会过来的。    
   

这E + F 相邻元素选择器 相邻元素选择器，匹配所有紧随E元素之后的同级元素F div + div{ color:#990000; } 测试代码：

    
       
       
                                   
欢迎来到我到的主页
    
   
        
    
我是老王。
        
    
我住在您隔壁。
    
   
    
我最好的朋友是米老鼠。
    
我不会过来的。

E[attr] 匹配所有具有att属性的E元素，不考虑它的值 h1[align]{……} input[type][size]{……} 比如:

        baidu.com

E[attr = val] 匹配所有attr属性值等于val的E元素 h1[align=center]{……} 属性值一般不加引号 对于 a 标记，其对应4种不同的状态：未访问链接(link)、、鼠标放上状态(hover)、已访问链接(visited)、当前活动链接(active)。CSS允许对于元素的不同状态，定义不同的格式化信息。 写个a标签看一下，大家看一下有什么效果 到网上看一下百度，淘宝，京东，别人是什么效果

a:link	未访问的链接a:hover	鼠标移动到链接上a:active	选定的链接a:visited	已访问的链接a.red:link	class等于red的a元素a.red:visited	class等于red的a元素a.red:active	class等于red的a元素a.red:hover	class等于red的a元素

---

/*将所有的a标签的状态都修改成下面这样*/   a{
   		color:black;				text-decoration: none;  /*不显示下划线*/	}	/*当鼠标移上来的状态我们进行单独的修改*/	a:hover{
   		color:red;		text-decoration: underline;		font-size:30px;	}

5.4 引用、继承与优先级

5.4.1 引用CSS

引用CSS有三种方式：

第一种：使用style属性

能不用尽量不要使用(我们要把样式和结构相分离)

第二种：使用style标签

这个样式只能作用到当前页面

大家想一下:我们开发软件(网站),对所有的网页都一个统一的格式标准.那么这些格式标准我们是否需要每一个页面都写一次呢???

我们使用什么办法来解决这个问题?? 使用外连式!!!

第三种：使用link标签进行外连

步骤：

1 新建一个CSS文件

2 在CSS文件里直接写样式表

3 使用link标签将它们链接起来、

5.4.2 CSS的继承特性（了解）

CSS继承性

  HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。 HTML中，是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。

具有继承的CSS属性

文本相关的属性是继承的

text-align、color、text-indent、font-family、font-size

font-style、font-weight、 letter-spacing、word-spacing

text-transform、line-height等

列表相关的属性是继承的(ul,ol,li)

list-style、 list-style-image、list-style-position、list-style-type 测试代码:

   
    我想要变成红色的文字
   

5.4.3 CSS的优先级

样式是有优先级的

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 在选择器优先级(先看优先级)相同的情况下，我们参照就近原则

5.5 CSS属性

块元素和行内元素

块：独占一行，可以设置宽高

行内：不可以设置宽高

5.5.1为table设置边框样式

例子：

table{
       border-collapse: collapse; /* 合并单元格的边线 */}/* 如果我们要为 table设置边框的话 请用 table td */table td{
       border: 1px solid red;}

其他样式可以从CSS文档中查阅

6课后练习

1 .第一题: 完成下面表格练习

2 .第二题：表格+图片 ★

3.第三题: 完成课程表

4.第四题: 图片墙

5 .第五题: 链接与列表

6. 第六题: 列表,字体等
   

7.第七题 表单(选做)

转载地址：http://eecmf.baihongyu.com/