欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5基础知识

程序员文章站 2022-06-12 13:38:41
...

1.HTML5基础知识介绍

1.1什么是HTML5

1.HTML5是超文本标记语言

2.2014年才定制完HTML5的标准,历时8年

3.HTML5的设计目的是为了在移动设备上支持多媒等功能

1.2为什么要用HTML5

1.跨平台

利用HTML5编写的UI界面能运行在所有拥有浏览器的平台

HTML5的运行平台:浏览器

2.HTML5的新增了很多的功能,比如video、audio和canvas... 

3.但是HTML5不能完成一些特定的功能,比如:拍照、访问相册....

1.3如何使用HTML5

1.自己编写大量的HTML5代码

2.使用现成的HTML5框架

sencha-touch: 基于JavaScript编写的Ajax框架,该框架是世界上第一个基于HTML5的Mobile App框架

phoneGap: 是一个基于HTMLCSSJavaScript的Mobile App框架,是创建移动跨平台移动应用程序的快速开发平台。业界很多主流的移动开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等

jQuery mobile:jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台

Bootstrap: 是目前最受欢迎的前端框架(移动先行)。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷

1.4手机APP的开发模式

1> 原生( 纯 Object C / Java )

2> 纯HTML5

3> 原生+HTML5

4> React Native

1.5为什么要学习HTML5

1>跨平台:运行的环境是浏览器

2>目前的一种趋势:移动web时代

3> 增加面试、开发竞争力

1.6公司职位的划分

1> 平面设计师 作图、切图、HTML、CSS

2> 前端工程师HTML、CSS、Javascript、模板技术

3> 后台工程师 服务器(Java、.Net、PHP)、数据库 、WEB

4>移动工程师(iOS/android): 手机UI界面(OC、Java、HTML5)、跟服务器交互

1.7开发工具

1>Android

eclipse 、android studio

2>iOS

Xcode

3>HTML5

1).后端:eclipse、MyEclipse

2).美工:Dreamweaver

3).前端:WebStorm 神器,默认集成各种各样的插件,配置完美

1.8Web开发新时代

1.Web1.0 主流技术:HTML+CSS

2.Web2.0 主流技术:HTML+CSS +Ajax ( JavaScript/DOM/异步数据请求 )

3.Web3.0 主流技术:HTML5+CSS3

  • HTML5亮点: Canvas 、HTML5音视频 、Web存储 、多线程处理...

  • CSS3 亮点: 设计动画、 2D变形、 N多新特性...

2.HTML常用的标签

2.1网页的组成

一个功能完整的网页,一般由3部分组成

  • HTML 做网页的具体内容和结构

  • CSS 做网页的样式(美化网页最重要的一块)

2.2HTML..

由浏览器负责将它解析成具体的网页内容。

比如,浏览器会将左边的HTML源代码代码 转换为右边的网页内容

  • HTML的组成跟XML类似,HTML由N个标签(节点、元素、标记)组成

  • HTML语法非常松散,目前的最新版是5.0,也就是HTML 5

  • 网页输出HelloWord

<!--根标签-->
<html>
    <!--头部-->
    <head>
        <!--网页的标题-->
        <title>Hello World ! 你好</title>
        <!--编码:UTF-8  GBK GB2312-->
        <meta charset="utf-8">
    </head>
    <!--身体-->
    <body>
        <div>Hello World !</div>
    </body>

</html>

2.3*常见的HTML标签

  1. 标题:h1、h2、h3、h4、h5、h6

  2. 段落:p

  3. 表单:input

  4. 图片:img

  5. 链接:a

  6. 换行:br

  7. 列表:ul、ol、li

  8. 容器:div、span(用来容纳其他标签)

  9. 横线:hr

  10. 表格:table、tr、td

学习资料:http://www.w3school.com.cn/

  • 1.标题:h1、h2、h3、h4、h5、h6

    
        <h1>我是H1标签</h1>
        <h2>我是H2标签</h2>
        <h3>我是H3标签</h3>
        <h4>我是H4标签</h4>
        <h5>我是H5标签</h5>
        <h6>我是H6标签</h6>
  • 2.段落:p

    
        <p>我是段落我是段落我是段落我是段落我是段落我是段落</p>
        <p>我是段落我是段落我是段落我是段落我是段落我是段落</p>
        <p>我是段落我是段落我是段落我是段落我是段落我是段落</p>
  • 3.表单:input

    
        <!--表单标签:输入框-->
        <input >
        <input placeholder="默认的占位符">
        <input value="我是默认的文字">
        <input type="color" >
        <input type="text" >
        <input type="checkbox" >
        <input type="file" >
  • 4.图片:img

    
        <!--图片标签-->
        <!--
            src:
                相对路径:图片资源来自于项目: ./    ../    ../../
                绝对路径:图片资源来自于网络:http://  file://  ftp://
            alt:
                图片加载失败时显示的文字
        -->
        <img src="https://www.baidu.com/img/bd_logo1.png"
             alt="加载失败" width="100px">
             
        <img src="image/0.jpg" alt="加载失败" width="50%">
  • 5.链接:a

    
        <!--a标签-->
        <!--
            href 链接的地址
            target 打开页面的方式:_blank 使用新的窗口打开;_self 使用当前窗口打开;
                                _parent 在父亲窗口中打开; _top 回到网页的顶部
        -->
        <a href="http://www.baidu.com" target="_blank">我是超链接</a>
  • 6.换行:br

    
    <br>
  • 7.列表:ul、ol、li

    
       <!--列表标签-->
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
    
        <ol type="A">
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
        </ol>
  • 容器:div、span(用来容纳其他标签)

    
        <!--容器标签-->
        <div>我是容器标签</div>
        <div>我是容器标签</div>
        <div>我是容器标签</div>
        
        <span>我是容器标签</span>
        <span>我是容器标签</span>
        <span>我是容器标签</span>
  • 横线:hr

    
    <hr>
  • 表格:table、tr、td

​ 单标签:不是容器 格式: <>

​ 双标签:是容器 格式:< > </>

3.HTML5新增的标签.

HTML5新增了27个标签,废弃了16个标签.

主要包括结构性标签、级块性标签、行内语义性标签、交互性标签

3.1*结构性标签

负责Web上下文结构的定义,确保HTML文档,包括:

article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)

header 标记头部区域内容, 注意:与 head 不一样

footer标记脚部区域内容

section 区域章节表述

nav菜单导航,链接导航

案例:新闻详情页面练习


   <!--一篇新闻-->
    <article>
        <!--新闻的头部-->
        <header>
            
        </header>
        <!--内容部分-->
        <div>
            <!--第一章节-->
            <section>

            </section>
            <!--第二章节-->
            <section>

            </section>
        </div>
        <!--尾部-->
        <footer>

        </footer>
    </article>

3.2块级性标签

完成Web页面区域的划分,确保内容的有效分隔,包括:

aside注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容,例如:

figure对多个标签组合并展示,常与figcaption联合使用, 例如:

code表示一段代码

dialog人与人之间对话,包含dt和dd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容)

3.3行内语义性标签

完成Web页面具体内容的引用和表述,丰富展示内容,包括:

meter特定范围内的数值,如工资、数量、百分比

time时间值

progress进度条,可用max、value进行控制

video视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式

audio音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式

3.4交互性标签

功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:

details表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示 , 例如:

datagrid控制客户端数据与显示,可用于动态脚本及时更新

menu用于交互菜单

command用来处理命令按钮

4.CSS样式简介

4.1什么是CSS

  • 它用来控制HTML标签的样式,在美化网页中起到非常重要的作用

4.2CSS的编写格式

键值对形式,比如:


<!-- 单值  -->
color: red;
background-color: blue;
font-size: 20px;

<!-- 复合值  -->
border:3px solid red;

冒号:左边的是属性名,冒号:右边的属性值

CSS属性值:1)单值 ; 2)复合值。

4.3*CSS的3种书写形式..

  • 行内样式:(内联样式)直接在标签的style属性中书写

    
    <!--
    给body标签设计样式
    -->
    <body style="color: red;">
    
    </body>

  • 页内样式:在本网页的style标签中书写。style标签一般放在head标签中

    
    <!--
    style是样式的标签,一把放在header标签中
    -->
    <style>    
      body {        
          color: red;   
      }
    </style>
  • 外部样式:在单独的CSS文件中写,然后在网页中用link标签引用。link标签一般在放在head标签中

    
    <!--
        rel   默认值是stylesheet。代表引用的文件与网页的关系(也可以说是引用文件的格式)
        href  引用CSS的文件
    -->
    <link rel="stylesheet" href="index.css">    

  • CSS的属性遵循的规律

    1)叠加原则(例如:外部样式和页内样式叠在一起)

    2)就近原则(例如:当外部样式和页内样式出现同样的样式时,就使用最近的样式)

5.CSS选择器..

5.1CSS的两大重点

  • 选择器 通过选择器找到对应的标签设置样式

  • 属性 通过属性的复杂叠加才能做出漂亮的网页

5.2*选择器

作用:选择对应的标签,为之添加样式

1.标签选择器

​ 根据标签名找到标签,为之添加样式, 比如:

2.类选择器

​ 根据标签 中的类名找到标签,为之添加样式, 比如:

3.id选择器

​ 根据标签中的id找到标签,为之添加样式, 比如:

4.并列选择器

​ 为多个标签添加同样的样式, 比如:

5.复合选择器

​ 根据指定标签中的[类名]找到标签,为之添加样式, 比如:

6.后代选择器

​ 找到指定标签中所有指定的子标签,为之添加样式, 比如:

7.直接后代选择器

​ 找到指定标签中指定的直接子标签,为之添加样式, 比如:

8.相邻兄弟选择器

​ 根据指定标签中找到相邻的标签,为之添加样式, 比如:

9.属性选择器

​ 根据标签中指定的属性找到标签,为之添加样式, 比如:

图1:

图2:

图3:

10.伪类选择器

为某个标签添加伪类选着器,为之添加样式, 比如:

格式: 选择器:属性{} , 如下:

xxx:focus{

}

11.伪元素选择器

为某个标签添加伪元素选着器,为之添加样式, 比如:

格式: 选择器:属性{} , 如下:

xxx:first-letter{

}

注意:如果效果不出来,就是选择器写错了

6.CSS选择器的优先级别..

复合选着器: 权值=等于各个权值相加

原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先

  • 优先级排序

important(1000) > 行内样式(999)> id > 类 > 标签 | 伪类 | 属性选择 |伪元素 > 通配符 > 继承

代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-CSS选着器优先级别</title>
    <style>
        /*通配符选着器:0*/
        *{
            color: red;
        }
        /*标签选着器:1*/
        div{
           color: green;
        }
        /*复合选着器:1+100=101*/
        div#main{
            color: blue;
        }
        /*类选择器:10*/
        .test1{
            color: yellow;
        }
        /*属性选着器:10*/
        div[class]{
            color: purple;
        }
        /*权值最高选着器:1000*/
        div{
            color: antiquewhite !important;
        }
    </style>
</head>
<body>
    <div id="main" class="test1">测试优先级别</div>
</body>
</html>

7.HTML的标签类型..

7.1标签显示的类型

HTML有N多标签,根据显示的类型,主要可以分为3大类

1块级标签

块级标签独占一行的标签能随时设置宽度和高度(比如div、p、h1、h2、ul、li

2行内标签(内联标签)

行内标签(内联标签)多个行内标签能同时显示在一行 , 宽度和高度取决于内容的尺寸(比如span、a、label

3行内-块级标签

行内-块级标签(内联-块级标签)多个行内-块级标签可以显示在同一行 , 能随时设置宽度和高度(比如input、button、img

7.2修改标签显示的类型

CSS中有个display属性,能修改标签的显示类型:

none隐藏标签

block:让标签变为块级标签,主要针对行内标签和行内-块级标签

inline:让标签变为行内标签,主要针对块级标签

inline-block:让标签变为行内-块级标签(内联-块级标签) 主要针对块级标签 和行内标签

注意:行内-块级标签只能改变成块级标签

8.CSS标签中的属性..

CSS有N多属性,根据继承性,主要可以分为2大类:

  • 可继承属性: 父标签的属性值会传递给子标签一般是文字控制属性


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可继承属性</title>
    <style>
        div{
            background-color: red;
            width: 300px;
            height: 350px;
            /*下面的两个属性会被p标签继承*/
            font-size: 40px;
            color: white;
        }
        p{
            background-color: green;
        }

    </style>
</head>
<body>
    <div>
        我是div标签
        <p>我是p标签</p>
    </div>
</body>
</html>

  • 不可继承属性: 父标签的属性值不能传递给子标签一般是区块控制属性


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可继承属性</title>
    <style>
        div{
            background-color: red;
            /*不可给子标签继承的属性*/
            width: 300px;
            height: 300px;
            margin-top: 50px;
        }
        p{
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        我是div标签
        <p>我是p标签</p>
    </div>
</body>
</html>

8.1可继承属性

可继承属性:父标签的属性值会传递给子标签一般是文字控制属性

  • 块级标签可继承父亲下面属性:

    text-indent、text-align

  • 列表标签可继承父亲下面属性:

    list-style、list-style-type、list-style-position、list-style-image

8.2不可继承属性

不可继承属性: 父标签的属性值不能传递给子标签一般是区块控制属性

display、margin、border、padding、background、background-size

height、min-height、max-height、width、min-width、max-width

overflow、position、left、right、top、bottom、z-index

float、clear

table-layout、vertical-align

page-break-after、page-bread-before

unicode-bidi

9.盒子模型..

9.1盒子模型

网页上的每一个标签都是一个盒子, 比如:(div , p , h1 , a , img ....

每个盒子都有四个属性:

  • 内容(content)

    盒子里装的东西网页中通常是指文字和图片

  • 填充(padding,内边距)

    怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料

  • 边框(border):

    盒子本身

  • 边界(margin,外边距)

    盒子摆放的时候的不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出

9.2IE盒子模型

结论:

  • 默认盒子的大小=内容+填充+边框

9.3标准盒子模型

结论:

  • 默认盒子的大小=内容 ( 默认的box-sizing : content-box ; )

思考:ie盒子与标准盒子的大小计算方式不一样?怎样做适配?

手动指定盒子大小计算的标准:

盒子大小统一使用:盒子大小=内容+填充+边框

标准盒子模型的解决方法:改 盒子box-sizing 的值

1.box-sizing 默认值为content-box ,盒子的大小=内容

2.将box-sizing设计为‘border-box’,盒子的大小=内容+填充+边框

9.4盒子(标签)CSS属性

网页上的每一个标签都是一个盒子, 比如:(div , p , h1 , a , img ....

1.控制内容(content)

HTML5基础知识

2.控制填充(padding, 内边距)

图1-属性:

HTML5基础知识

图2-例子:

HTML5基础知识

3.控制边框(border)

  • border: 设计边框的width,style,color

  • border-width

  • border-style

  • border-color

简写例子:


p{
  border:red 5px solid
}

4.控制边界(margin, 外边距 )

图1-属性

HTML5基础知识

图2-例子:

HTML5基础知识

案例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-盒子模型</title>
    <style>
        /*给所有的标签设计*/
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: red;
            /*盒子的大小*/
            width:300px;
            height:300px;
            /*内边距*/
            padding: 20px 0 0 20px;
            /*边框*/
            border: 4px solid green;
            /*边界*/
            margin: 30px 0px 0px 50px;

            /*改变盒子大小计算方式*/
            box-sizing: border-box;

            /*控制盒子最大值和最小值*/
            max-width: 300px;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div>
        我是一个盒子
    </div>
</body>
</html>

10.CSS3新增特性..

  • RGBA透明度

    ​ RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道,可用于设置透明值(0 - 1)块

  • 阴影box-shadow text-shadow

  • 圆角border-radius

  • 边框图片 border-image

  • 动画 transform:

    -webkit-transition 过度效果

    -webkit-transform-origin 参照坐标

    -webkit-transform 动画效果

案例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-CSS3新增特性</title>
    <style>

        /*标签的高度*/
        div{
            /*盒子的大小*/
            width:150px;
            height:60px;
            margin: 10px 0;

            /*圆角效果*/
            border-top-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }

        /*设计渐变*/
        .test1{
            background-color: rgba(255,0,0,1.0);
        }
        .test2{
            background-color: rgba(255,0,0,0.8);
        }
        .test3{
            background-color: rgba(255,0,0,0.6);
        }
        .test4{
            background-color: rgba(255,0,0,0.4);
        }
        .test5{
            background-color: rgba(255,0,0,0.2);
        }

        div:hover{
            /*透明度:0完全不透明 1完全透明*/
            opacity: 0.5;

            /*
            *  设计块阴影
            *  box-shadow: 10px 10px;  右边和底部有阴影
            *  box-shadow: -10px -10px; 左边边和顶部有阴影
            *  box-shadow: -10px -10px blue; 阴影的颜色为蓝色
            *  box-shadow: -10px -10px 30px blue; 阴影边界模糊30px
            */
            box-shadow: -10px -10px 30px blue;
             /*圆角效果*/
            border-radius: 70px;
        }
        p{
            font-size: 100px;
            color: orange;
            /*文字阴影*/
            text-shadow: -2px -2px 10px blue;
        }
    </style>
</head>
<body>
    <div class="test1">1</div>
    <div class="test2">2</div>
    <div class="test3">3</div>
    <div class="test4">4</div>
    <div class="test5">5</div>
    <P>Android 大神班</P>
</body>
</html>

13.总结:

  1. 常见的HTML标签:

  2. HTML5新增的标签:

  3. CSS的3种书写方式:

  4. CSS的选着器 , 选着器的优先级别:

  5. HTMl的标签类型:

  6. HTML常用的CSS属性:

  7. 盒子模型:

  8. CSS3新增的属性:

相关标签: 标签