随笔分类 - web前端
多媒体技术
摘要:HTML5多媒体的特性 在HTML5语法中,<video>标记用于页面添加视频,<audio>标记用于为页面添加音频。 多媒体的支持条件 在实际操作中要考虑视频、音频编解码器,以及浏览器支持等多种因素。 视频和音频编解码器 视频编解码器 定义了多媒体数据流编码和解码的算法,其中编码器主要是对数据流进
阅读全文
表单
摘要:认识表单 1.表单的构成 在网页中,一个完整的表单通常由表单控件(也称表单元素)、提示信息和表单域3个部分构成。具体解释如下: 表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮等。 提示信息:一个表单通常带有说明性文字,提示用户进行填写和操作。 表单域:相当于一个容器
阅读全文
浮动与定位
摘要:元素的浮动 1.元素的浮动属性float 所谓的元素浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程。浮动属性作为CSS3的重要属性,在网页布局中至关重要。在CSS3中,通过float属性来定义浮动,其基本语法格式为: 选择器{float:属性值;} float属性
阅读全文
CSS盒子模型
摘要:盒子模型概述 1.认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的“盒子”,也就是一个盛装内容的容器。每个矩形盒子都由元素的内容、内边距、边框和外边距组成。 下面通过一个案例来认识到底什么是盒子模型。新建HTML页面,并在页面中添加一个段落,然后通过盒子相关属性对段落进行控制:
阅读全文
CSS3选择器
摘要:属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元
阅读全文
阶段案例——制作服装推广软文
摘要:制作页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>服务推广软文</title> </head> <body> <p><strong>NO.3</strong><strong>BUTTERFLY</strong></p
阅读全文
CSS高级特性
摘要:CSS的层叠性和继承性 CSS是层叠式样式表的简称,层叠性和继承性是其基本特征。 1.层叠性 所谓层叠性是指多种CSS样式的叠加。 下面通过一个案例对CSS的层叠性进行演示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CS
阅读全文
文本样式属性
摘要:字体样式属性 1.font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,具体如下表所示: 相对长度单位 说明 em 倍率,相对于当前对象内文本的字体尺寸 px 像素,最常用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 p
阅读全文
CSS核心基础
摘要:CSS样式规则 具体格式如下: 选择器{ 属性1 :属性值1 ; 属性2 :属性值2 ;属性3 :属性值3 ;} 选择器用于指定CSS样式作用的HTML对象,大括号内是对该对象设置的具体样式。其中属性和属性值以“键值对”的形式出现,属性是对指定的对象设置的样式属性,如字体大小、文本颜色等。属性和属性
阅读全文
CSS简介
摘要:CSS概述 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 CSS非常灵活,既可以嵌入在HTML文档中,也可以是一个单独的外部文件(如果是独立的文件,则必须以.css为后缀名)。 CSS采用的是内嵌方式,虽然与HTML在同一
阅读全文
HTML全局属性
摘要:HTML5的全局属性是指在HTML5的任何元素中都可以使用的属性。 draggable元素 draggable元素用来定义页面中的元素是否可以拖动,该属性有2个值:true和false,默认为false,当值为true时表示元素选中之后可以进行拖动操作,否则不能拖动。 下面通过一个案例对dragga
阅读全文
HTML文本层次语义元素
摘要:为了使HTML5页面中的文本内容更加形象生动,需要使用HTML5中一些特殊的元素来突出文本之间的层次关系,这样的元素被称为层次语义元素。 time元素 time元素用于定义时间或日期,可以代表24小时中的某一时间。 time元素不会在浏览器中呈现任何特殊效果,但是该元素能以机器可读的方式对日期和时间
阅读全文
主体标签body
摘要:<body>标签定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。 <body> 标签的属性有: bgcolor:设置整个网页的背景颜色。 background:设置整个网页的背景图片。 text:设置网页中的文本颜色。 leftmargin:
阅读全文
HTML页面交互元素
摘要:HTML5是一些独立特性的集合,其中不仅添加了许多web页面特性,而且其本身也是一个应用程序。 details元素和summary元素 details元素用于描述文档或文档某个部分的细节。 summary元素经常与details元素配合使用作为details元素的第一个子元素,用于details定义
阅读全文
HTML分组元素
摘要:分组元素用于对页面中的内容进行分组。 figure元素和figcaption元素 在HTML5中,figure元素用于定义独立的流内容(图像、图表、照片、代码等),一般指一个单独的单元 figure元素的内容应该与主内容相关,但如果被删除,也不会对文档流产生影响。 figcaption元素用于为fi
阅读全文
HTML结构元素
摘要:HTML5中所有的元素都具有结构性,且这些元素的作用于块级元素非常相似。 header元素 是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容。 header元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图像、搜索表单或者其他相关内容。 <he
阅读全文
HTML区块
摘要:HTML <div> 和<span> HTML 可以通过 <div> 和 <span>将元素组合起来。 HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时,通常会以新行来开始(和结束)。 实例: <h1>, <p>, <ul>, <table> HTML
阅读全文
HTML列表
摘要:HTML 支持有序、无序和定义列表: HTML无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用 <ul> 标签 <ul><li>Coffee</li><li>Milk</li></ul> 浏览器显示如下: Coffee Milk HTML 有序列表
阅读全文
HTML表格实例
摘要:使用 Cell spacing 增加单元格之间的距离 <!DOCTYPE html><html><head><meta charset="utf-8"><title>博客园</title></head><body><h4>没有单元格间距:</h4><table border="1"><tr><td
阅读全文
HTML表格
摘要:HTML 表格 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例 <ta
阅读全文