符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
article 定义页面独立的内容区域。
创新互联是一家网站设计、做网站,提供网页设计,网站设计,网站制作,建网站,按需策划设计,网站开发公司,公司2013年成立是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。
aside 定义页面的侧边栏内容。
bdi 允许您设置一段文本,使其脱离其父元素的文本方向设置。
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)。
figcaption 定义 figure 元素的标题
footer 定义 section 或 document 的页脚。
header 定义了文档的头部区域
mark 定义带有记号的文本。
新增的结构标签:
1、header元素
表示页面中一个内容区块或真个页面的标题。
2、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
3、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
4、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
5、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。
HTML5新规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求(比如 Flash),更优秀的错误处理,更多取代脚本的标记,HTML5 应该独立于设备开发进程应对公众透明 ;
HTML5 新特性:
新的特殊内容元素,比如 article、footer等,新的表单控件,比如 calendar、date、time、email、url、search;用于媒介回放的 video 和 audio 元素;用于绘画的 canvas 元素
对本地离线存储的更好的支持。
一、文本标签
1.1 标题标记:hn align=”对齐方式”标题文本/hn
注意:
1.标题准备了h1----h6的标题,按照字号依次递减(块级元素)
2.align表示对齐方式,其值为left,center,right
1.2 字体标记:font face=”字体名称” size=”字号” color=”字体颜色” 文字/font
注意:中文网页以黑体,宋体,3号字的效果显示
1.3 段落标记:p align=”对齐方式” 段落内容/p
注意:p可以作为单标记或双标记:
单标记:段落与上文产生一个空行的间距。
双标记:段落与上下文之间产生一个空行的间距
1.4 换行标记:
注意:br /表示换行,多次换行多次使用br /
1.5 预格式化标记:pre...../pre
注意:预格式化标记可将空格、制表符、回车符等忽略
1.6 转义字符:转义字符让特殊字符显示出来。
语法:实体名称;
二、列表标记
2.1 无序列表
ul type=”列表项的标签符”
li项目一/li
li项目二/li
li项目三/li
......
/ul
注意: type表示了项目符号:
disc(默认) 实心圆
circle:空心圆
square:实心方块
2.2 有序列表:
ol type=”列表项的标记符” start=”起始值”
li项目一/li
li项目二/li
li项目三/li
......
/ol
注意:1. 1:1,2,3,.......
a:a,b,c,d,e.......
A:A,B,C,D,E.......
i:i,ii,iii,iv......
I:I,II,III,IV......
2.start表示起始值,从第几个数开始计算
2.3 嵌套排列
ol type="1"
lih/li
lit/li
ul type="disc"
lim/li
lil/li
/ul
li5/li
/ol
2.4 分割线标记:hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”
color=”水平线颜色”
三、超链接标记
3.1 文本链接:a href=”目标URL” target=”目标窗口”指针文本/a
注意: 1.href表示文本链接的目标资源的URL
绝对地址和相对地址
绝对地址:在任何情况下都可以找到的地址(例如:网址)
相对地址:必须知道当前所在,才能找到(../表示上一级目录,/表示下级目录)例子:../img/baidu.jpg 表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。
3.2 图片标记:img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/
3.3 多媒体标记
3.3.1 滚动字幕标记:marquee可以实现文字或图片的跑马灯效果
marquee..../marquee
marquee的属性:
behavior 指定了跑马灯的效果:scroll(滚动)、slide(滑动)、alternate(交替)
bgcolor:跑马灯的背景颜色
direction:跑马灯的移动方向,left(左)、right(右)、up(上)、down(下)
scrolldelay:每次移动的延迟时间,单位毫秒
loop:跑马灯运行次数,-1表示无限循环
height、width
hspace:左右空白宽度
vspace:上下空白宽度
3.3.2 嵌入音乐文件
audio src=”文件地址” 提示文字/audio
3.3.3 嵌入视频文件
video src=”视频文件地址” controls=”controls”提示文字/video
四、表格
4.1 表格基本语法:
table
tr
......
td单元格内容/td
......
/tr
/table
注意:
table:声明一个表格对象
tr:声明一行
td:声明一个单元格
4.2 表格的基本属性
1.align 对齐方式:left、center、right
2.border:表格边框
3.bordercolor:边框颜色
4.bgcolor:表格背景颜色
5.background:背景图片
6.height、width
4.3 单元格合并
1.rowspan:所跨的行数
2.colspan:所跨的列数
五、表单
5.1 表单标签:form action=”URL” method=”get|post” target=”...”/form
注意:form:该标记中包含的数据将被提交到服务器或者电子邮件中
action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址
method:get/post:数据传输到服务器的传递方法
target:服务器返回文档结果的显示位置:_blank:在新的浏览器窗口中打开
_self:在当前浏览器中显示
5.2 表单标记
5.2.1 input标签:input type=”类型” name=”服务器 获取用户输入信息的名字” value=”初始值”
注意:1.type类型(输入类型):
1. text:单行文本框
2. password:密码输入框
3. radio:单选按钮 checked表示默认
4. checkbox:复选框 checked表示默认
5. submit:提交按钮
6. reset:重置按钮
7. button:普通按钮
2.maxlength:输入的最大长度
5.2.2 select标签
select name=”” size=”” multiple
option value=”选项1” 选项1
.......
option value=”选项n” 选项n
/select
注意:name:服务器 获取用户输入信息的名字
value :初始值
option:下拉框的内容
multiple:多选,若没有multiple则是单选
selected:表示默认选项
size:表示长度
5.2.3 textarea 标签:textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”
/textarea
注意: name:多行文本框的名称
cols:一行可容纳的字符数
rows:表示可显示额的行数
wrap:virtual和phycal控制自动换行
一、Html的基本结构:
!DOCTYPE html
html
head
meta charset=utf-8"
title/title
/head
body
网页的文本、图片等信息;
/body
/html
二、Head部分:用于表示网页的元数据即描述网页的基本信息
其常用标签及属性有:
1、title标签:浏览器标签页显示的标题
2、meta标签:其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:meta charset="UTF-8"
常见的字符集编码格式:
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码
c.UTF-8:万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。
3、link标签:链接网页图标(title前的小logo),其常用属性有:
①rel属性:声明链接文件的类型,此处选icon
②type属性:可以省略
③href属性:表示图片的路径地址
三、body部分:网页的文本、图片等信息
标签的分类:
块级标签:显示为块,前后隔一行(自动换行)
行级标签:按行从左往右逐一显示。
1、 常见的块级标签:
①h1/h1......h6h6:标题标签,自动加粗,h1最大,h6最小。
②hr/:水平线标签,添加一条水平线。
③p/p:段落标签,
④br/:换行标签,
⑤blockquote//blockquote:引用标签,cite属性,表明引用的来源,一般引用网址
浏览器默认首行缩进。
⑥pre/pre:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示:nbsp;
2、 基于布局的块级标签
列表:无序列表、有序列表、定义列表
①有序列表:ol/ol 列表项:li/li
②无序列表:ul/ul 列表项:li/li
③定义列表(实现图文混排):dl/dl
列表标题:dt一般只有一项/dt
列表描述项:dd可以有很多项/dd
3、组合标签:figure/figure用于显示图片及图片标题
他有两个子标签:img /图片
figcaption/figcaption图片的标题
例如:figure
img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/
figcaption探险家 伊泽瑞尔/figcaption
/figure
4、分区标签:div/div
5、常见的行级标签
1span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:
这是span style="color: red;font-size: 36px;"span/span中的文字
img(图片):其常用属性:①src:表示引用图片的地址。
路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址
a、与文件处于同一层的图片,直接写图片名
b、图片在当前文件下一层:文件名/图片名
c、图片在当前文件上一层:../图片名
绝对路径:盘符:/文件夹/图片名,但 是严禁使用
图片网址:网络上的图片链接,但是一般不用
②height和width:图片的高度和宽度。可以用CSS样式代替
③title:图片标。当鼠标指上之后显示的文字
④alt:当图片无法显示的时候,显示的文字
2em(倾斜强调)
3strong(加粗强调)
4b(加粗)
5i(倾斜)
Strong、em、b、i的区别
1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高
2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
6q(短引用)
7small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限
8a(超链接)
1、href:超链接的路径,可以是网络链接,也可以是本地文件。
2、target:跳转页面打开的位置。_self自身页面,_blank新页面。
3、title:鼠标指在超链接上显示的名称。
4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:
rel="prev"被链接文档是当前文档的前一篇文 档,
rel="next"被链接文档是当前文档的后一篇文档,
rel="icon"被链接文档是当前文档的图标
rel="stylesheet"被链接文档是当前文档的样式表
5、Rev(当前是被链接的前/后一篇)
锚链接:
①本页面锚链接:a、设置锚点:a name="top"/a
b、跳转锚点:#name名
①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
b、跳转锚点:页面地址.html#name名
a href="02_常见的块级标签.html#Hbuilder"页面间锚链接/abr/
功能性链接: mailto用于给指定邮箱发送邮件
file:///e:/aaa.png打开本地文件
tencent://message/?uin=1315618220 给指定QQ发送息
9s标签,有误文本:删除线
s这是S标签中的文字/sbr /
10cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用
cite这是cite中的文本/citebr /
11code:计算机代码,不保留代码格式
pre
code/code
/pre
12bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左
bdo dir="rtl"1234567/bdobr /
kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体
请输入“kbdEsc/kbd”推迟系统br /
13sup:上标文本,sub:下标文本
xsub6/subbr /
© copy; 空格 nbsp;
© copy; 空格 nbsp;br /
14u:下划线
u这是下划线/ubr /
mark:高亮或标记文本,浏览器显示为黄色背景
markmark/markbr /
html5新增标签大致如下:
canvas 新元素
canvas 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 video 和 audio
embed 定义嵌入的内容,比如插件。
track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
新表单元素
datalist 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
keygen 规定用于表单的密钥对生成器字段。
output 定义不同类型的输出,比如脚本的输出。
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
article 定义页面独立的内容区域。
aside 定义页面的侧边栏内容。
bdi 允许您设置一段文本,使其脱离其父元素的文本方向设置。
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)。
figcaption 定义 figure 元素的标题
footer 定义 section 或 document 的页脚。
header 定义了文档的头部区域
mark 定义带有记号的文本。
meter 定义度量衡。仅用于已知最大和最小值的度量。
nav 定义导航链接的部分。
progress 定义任何类型的任务的进度。
ruby 定义 ruby 注释(中文注音或字符)。
rt 定义字符(中文注音或字符)的解释或发音。
rp 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
section 定义文档中的节(section、区段)。
time 定义日期或时间。
wbr 规定在文本中的何处适合添加换行符。
初学者建议多访问下菜鸟教程:网页链接,都是比较全面的基础知识,可以看做编程词典,即使老司机也经常去查一些资料。