2319人加入学习
(8人评价)
新人必看的HTML5基础知识视频教程

HTML5基础知识视频教程

价格 ¥ 1800.00
会员免费学 购买课程

一. 表格元素总汇

  1. <table>
[展开全文]

一. 分组元素

  1. <p>建立段落
    <p>这是一个段落</p>
    <p>这也是一个段落</p>
    解释:<p>元素实际作用就是将内部包含的文本形成一个段落;而段落和段落之间 保持一定量的空隙
  2. <div>通用分组
    <div>这是一个分组</div>
    <div>这是又一个分组</div>
    解释:,<div>元素在早期的版本中非常常用,通过<div>这种一般性分组元素进行布局
  3. <blockquete>引用大段他出内容
    <blckquete>这是一个大段引自他出内容<blockquete>这是另一个大段引自他出内容</blockquete>
    解释:<blockequete>元素实际作用除了和<p>元素一样,有段落空隙的功能,还包含了首尾缩进的功能。语义上表示,大段的引用他出的内容。
  4. <pre>展现格式化内容
    <pre>
      #####
           #####
                 ######
           #####
      #####
    </pre>
    解释:<pre>元素实际作用就是编辑器怎么排版的,原封不动的展现出来。当然,这种只适合简单的排版,复杂的排版就无法满足要求了
  5. <hr>添加分割
    解释:<hr>元素实际作用就是添加一条分割线,意图呈现上下文主题的分割
  6. <ul><li>添加无序列表
    <ul>
         <li>张三</li>
         <li>李四</li>
    </ul>
  7. <ol><li>添加有序列表
    解释:<ol>元素表示有序列表,而<li>元素则是内部的列表项。

    <ol>元素目前支持三种属性

                  ol元素属性
    start:从第几个序列开始统计<ol start="2">
    reversed:是否倒序排列<ol reversed>,一般主流浏览器不支持
    type:表示列表的编号类型,值分别为1、a、A、i、I
           
                  li元素属性
    value:强行设置某个项目的编号
     
  8. <dl><dt><dd>生成说明列表
    <dl>
        <dt>这是一份文件</dt>
        <dd>这是是这份文件的详细内容1</dd>
         <dd>这里是这份文件的详细内容2</dd>
    </dl>
    解释:这三个元素是一个整体,但<dt>或<dd>并非都必须出现
  9. <figure><figcaption>试用插图
    <figure>
          <figcaption>这是一张图</figcaption>
          <img src="img.png">
    </figure>
    解释:这两个元素一般用于图片的布局
[展开全文]

<a>元素属于文本元素,有一些私有属性或者叫局部属性,那么,相对应的还有通用属性或叫做全局属性

  • 制定<a>元素所指资源的URL
  • hreflang 指向的链接资源所使用的语言
  • media  说明所链接的用语哪种设备
  • rel  说明文档与所链接资源的关系类型
  • target  指定用以打开所链接资源的浏览环境
  • type  说明所链接资源对的MIME类型(比如text/html)
  1. href属性
    <a  href="http//www.baidu.com">百度</a>
    href是必须属性,否则<a>元素变成空元素了,如果属性值是http://开头的URL,意味着点击跳转到制定的外部网站
  2. target属性
    <a  href="http://www.baidu.con" target="_blank">百度</a>

    _blank:是新窗口或标签页中打开文档
    _parent:在父窗框组(frameset)中打开文档
    _self:在当前窗口打开文档(默认)
    _top:在顶层窗口打开文档

二.相对与绝对路径

   相对路径:就是相对于链接页面而言的另一个页面的路径。

   绝对路径:就是直接从file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面,其中一个页面链接到另一个页面。

  1. 绝对路径
    <a  href="file:///D:/备课/HTML5第一季/clde/index2.html">index2</a>
    解释:首先是file:///开头,然后是磁盘符,然后是一个个的目录层次,找到相应的文件,这种方式最致命的问题是,当整个目录转移到另外的盘符或其他电脑时,目录结构一旦出现任何变化,链接当即失效
  2. 相对路径
    <a  href="index2.html>index2</a>
    解释:相对路径的条件是必须文件都在一个磁盘或目录下,如果是在同一个目录下,直接属性值就是被链接额文件名.后缀名。如果在同一个主目录下,有多个子目录层次,那就需要使用目录结构语法。
  3. 目录语法
    同一个目录:index2.html或  ./index2.html;
    在子目录:xxx/index2.html;
    在孙子目录:xxx/xxx/index2.html
    在父目录:../index2.html;
    在爷爷目录:../../index2.html;

三. 锚点设置

超链接也可用来将同一个文档中的另一个元素移入视野。通过属性id或name实现锚点定位

        //链接

        <a  href="#1">第一章</a>  <a href="#2">第二章</a> <a  href=”#3“>第三章</a>

        //锚点

        <a name="#1></a> <a id="3"></a>    

 

 

 

 

 

 

[展开全文]
  1. <strong>表示重要的文字,
    <b>表示关键字和产品名称
  2. <em>加以强调
    (倾斜文本)
  3. <i>表示外文词汇或科学用语
    (倾斜文本)
  4. <br>强制换行,<wbr>安全换行
  5. <s>强调(中间线或删除线)
  6. <del>强调(中间线或删除线)
  7. <u>强调(下划线)
  8. <ins>与<u>一样
  9. <small>添加小号字体
  10. <sub>添加上标
    <sup>添加下标
  11. <code>表示输入和输出
    <code>表示计算机代码片段
    <var>表示编程语言中的变量
    <samp>表示程序或计算机的输出
    <kdb>表示用户的输入
    由于属于英文范畴的,必须将lang="en"英语才能体现效果
  12. <abbr>表示缩写
    解释:<abbr>元素没有实际作用,从语义上看,是一段文本的缩写
  13. <dfn>表示定义术语
  14. <q>引用来自他出的内容(实际用途:添加双引号)
  15. <cite>引用其他作品的标题
    实际作用:加粗
  16. <ruby>帮助语言文字正确发音。
    比如:汉语拼音在文字的上方。
  17. <bdo>设置文字方向
    <bdo dir="rtl">html5</bdo>
    解释:<bdo>必须使用属性dir才可以设置,一共两个值:rtl(从右到左)和ltr(从左到右)。
    默认为ltr。还有一个<bdi>也是处理方向的,一般主流浏览器不支持
  18. <mark>突出显示文本
    实际效果:加一个黄色的背景,黑色的字,用语记号
  19. <time>表示日期和时间
    <time>元素没有实际作用:表示日期和时间
  20. <span>表示一般性文本
    <span>元素没有实际作用,表示一段文本,经常用它来设置css等操作
[展开全文]
  1. 文档结构
    <!DOCTYPE html>

     <html>

             <head>

                       <meta  charset="utf-8"> 

                       <title>

                       </title>

              </head>

              <body>

              <a  href="http//www.baidu.com">               百度</a>

              </body>

       </html>

  2. meta——声明  

[展开全文]

 

  1. 开发工具
    Sublime Text3 作为HTML5编码工具,试用Soda Dark 3作为软件界面的主题
[展开全文]

音频   音频轨道  视频轨道  元数据

视频

编解码器  

co

[展开全文]

header

footer

hgroup

section 

 

[展开全文]

lang  确定语言

br  hr  

emble

meta

a

div

表格属性

px

table  border 边框线

tr  th  th  tr

tr

td

从外到内

colspan

rowspan

tfoot 表角

tbady

caption  表格标题

colgroup 表格格式

col  span 占位符

 

[展开全文]

blockquote  段落格式

pre  允许换行

hr   分割线水平线

ul  li  无序列表

ol  li   有序列表 start从什么时候开始统计

value  5 了解

figsure  

   figcapion     figcaption

   img  src

 

 

[展开全文]

全局  私有 局部属性

targe

锚点属性

[展开全文]

htmi5  超文本语言

emble

meta

img

文本不重要

b  strong wbr i em s del u ins  small  big  sub sup  code  var  abbr  q  cite

ruby bdo《dir》   mark  span    

style全局属性

[展开全文]

CSS边框与背景[下]

设置背景

background-color  颜色

银灰色  silver

none 取消背景图片的设置

image 

url 设置背景图片

 background-regeat

背景平铺的方式

水平平铺  repeat-x

垂直平铺   repeat-y

cover 等比例缩放图像

contain 显示完整的图片

auto

background-attachment:scroll 默认滚动

border-box 边框渗透

background-clip 裁剪渗透背景的区域

url(img.png) no reapeat bo-repeat top legt

 

 

 

[展开全文]

CSS边框和背景

声明边框

border-width   长度

border-height  高度

color  颜色值

border-style:soli

边框样式

CSS长度值 比如px、em

百分数  1,2,3

thin

medium       从小到大依次增大

thick

定义边框

none 没有边框

dashed 虚线边框

dotted 圆点线

double  双线边框

groove 潮线(立体感)

  outset 同上

ridge 同上

圆角边框

border-radius

border-top-right-radius 右上角

 

 

 

 

 

 

[展开全文]

CSS盒模型[下]

元素的可见性

visbility

visible 元素在页面上显示

hidden 隐藏

类型

块级元素  设置元素尺寸、大小、高度、隔离元素

行内元素   <span>、<b>

隐藏元素  

background:背景

行内-块元素

属性                    值                 说明     

display         block                 盒子为块级元素

                  inline                    盒子为行内元素

          inline-block            盒子为行内-块元素

               none               盒子不可见,不占位   span{

background:silver

width

height

display:block

}          

元素的浮动

float      left  将元素靠左浮动

                right   将元素靠右浮动

              none    禁用浮动

 

clear   禁止浮动

both    两边都不浮动

 

 

 

 

 

 

[展开全文]

CSS盒模型[上]

width  设置元素的宽度

height 设置元素的高度

min-width  设置元素的最小的宽度

min-height  设置元素的最小的高度

max-width 设置元素的最大的宽度

max-height 设置元素的最大的高度

<div>...... </div>

元素的内边距

padding-left  设置左边内边距

padding-right 设置右边内边距

padding-top  设置顶部内边距

padding-bottom 设置底部内边距

处理溢出

auto 溢出就显示滚动条

hidden 将溢出的删除

visible 默认值,不管是否溢出,都显示内容

scroll 不管是否溢出,都显示滚动条

overflow-....

[展开全文]

CSS文本样式[下]

文本装饰,英文大小写装换好人文本阴影

文本装饰

text-decoration  加下划线

p{

      text-decoration:underline;

}

overline 头部叫线

英文文本转换大小写

none  将已被转换大小写的值恢复到默认状态

capitalize 将英文单词首字母大写

uppercase 将英文转换为大小写字母

lowercase 将英文转换为小写字母

text-shadow:5px,5px,3px,red;

加阴影

文本控制

text- align

left 靠左

right 靠右

center 居中

justify 两端对齐

start  开始的边界

end 结束的边界

white-space

nornal

nowrap 空白被压缩,文本不换行

pre 遇到换行符才换行

pre-line 同上

pre-wrap 不换行

letter-spacing

4px

设置文本间距

line-height

设置段落行高

word-wrap

让过长的单词断开

text-indent

设置文本首行的缩进

 

 

 

 

 

 

 

 

 

 

 

 

[展开全文]

授课教师

瓢城Web俱乐部创始人

课程特色

视频(28)

学员动态

郭月汶 加入学习
Mr._阿强 开始学习 HTML5概述
Mr._阿强 加入学习
kelvinDzj 开始学习 HTML5概述