HTML第二篇

1>压缩文件格式:使用.zip格式较好

2>charset(字符集)  国内最新字符集格式为:gb18030

            国际上通用的字符集是:UTF-8

3>添加图片

<img src=”path” alt=”text” title=”text”  width=”x”  height=”y”/>

4>path路径:

绝对路径:指文件在硬盘上真是存在的路径。

eg: <body backround="E:\book\网页布局\代码\第2章\bg.jpg" >

相对路径:指相对于自己目标文件的位置。

eg:  <body background="img/bg.jpg">

注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录,因此在“img”前不用再加上“/”字符。

5>超链接

页面超链接: <a href=”path” target=””>链接图文</a>      target属性值常用:_seft  _blank   _parent

锚链接: a:  创建跳转标记  <a name=”marker”>标记点</a>

        b:  创建跳转链接  <a href=”#marker”>链接点</a>

功能性链接:  <a href=”mailto:[email protected]”>联系我们</a>    mailto 邮件传输协议

<a href=”ftp://192.168.90.25”></a>    ftp传输协议

6>   块元素(block):独占一行

  行内元素:内容撑开的宽度

7>列表(无序,有序,定义列表)

what:列表就是信息资源的一种展示形式。他可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。

无序列表unordred  list       item项目

<ul>
<h3>热门活动</h3>
    <li>
        <img src="../picture//img1.png"/>
        <p>推荐活动 | 原创音乐现金榜T榜</p>
    </li>
    <li>
        <img src="../picture//img2.png"/>
        <p>推荐节目|《TAImusic》爆笑来袭</p>
    </li>
    <li>
        <img src="../picture//img3.png"/>
        <p>推荐歌单 | 继续宠爱张国荣</p>
    </li>
    <li>
        <img src="../picture/img4.png"/>
        <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
    </li>
</ul>

where:常用于导航栏,侧边栏新闻。

有序列表  1.有顺序,每个<li>标签独占一行(块元素)2.默认<li>标签项前有顺序标记 3.一般用于排序类型的列表,where:常用于试卷,问卷调查。

1 <ol>
2     <dt>热门排行榜</dt>
3     <li><a href="#"> 潇洒走一回</a><a href="#"><img src="../picture/pic1.png"/></a></li>
4     <li><a href="#">偏偏喜欢你</a><a href="#"><img src="../picture/pic1.png"/></a></li>
5     <li><a href="#">酒干倘卖无</a><a href="#"><img src="../picture/pic1.png"/></a></li>
6     <li><a href="#">不说再见</a><a href="#"><img src="../picture/pic1.png"/></a></li>
7     <li><a href="#">舍不得你</a><a href="#"><img src="../picture/pic1.png"/></a></li>
8     <li><a href="#">请跟我来</a><a href="#"><img src="../picture/pic1.png"/></a></li>
9 </ol>

定义列表 define    title

1 <dl>
2     <dt>水果</dt>  标题
3     <dd>苹果<dd>
4     <dd>香蕉<dd>
5     <dd>橘子<dd>
6 </dl>

where:常用于一个标题下有多个子标题

 

8>表格table

<body>
<h1>流量调查表</h1>
<table border="1">
    <tr><td>总页面流量</td><td>共计来访</td><td>会员</td><td>游客</td></tr>
    <tr><td>9756488</td><td>97656</td><td>7538087</td><td>43364677</td></tr>
    <tr><td>46776686</td><td>85544</td><td>69357</td><td>568787</td></tr>
    <tr><td>7538087</td><td>546774</td><td>476897</td><td>334545</td></tr>
    <tr><td colspan="3">平均没人浏览</td><td>1.58</td></tr>
</table>
</body>

row 行    rowspan  跨行    column列    colspan 跨列

9> 视频 video        音频  audio(用法同video)

<video src=”path” controls></video>

1 <video controls>
2 <source src=”path” type=”video/mp4”/>
3 <source src=”path” type=”video/avi”/>
4 </video>

autoplay 自动播放

10>页面布局(用户体验)layout

 
 header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记肩部区域的内容(用于整个页面或页面的一块区域)
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容

11>内联框架  inner

<iframe src=”path” name=”mainFrame”></iframe>

时间: 2024-10-14 01:15:04

HTML第二篇的相关文章

Android Metro风格的Launcher开发系列第二篇

前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲! Launcher主体框架实现: Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager

[C++11新特性]第二篇

0.可变数量参数,可变函数模版,变长模版类 c++98可变数量参数 #include<cstdio> #include<cstdarg> double SumOfFloat(int count, ...) { va_list ap; double sum=0; va_start(ap,count); for(int i=0;i<count;i++) sum+=va_arg(ap,double); va_end(ap); return sum; } int main() { p

第二篇 基于微擎的模块开发—PHP

从陌生到如今能勉强完成第一个微网站模块的实现.也算是一个小小的进步,从设计数据库到,返回数据,前端模版渲染 每一点都是有点难度的.所以我想总结一下,我是如何实现一个微擎模块. 第一,首先得分析某个模块的想实现什么需求,根据需求设计合理的数据库结构. 第二,了解微擎的结构,运行流程,设计模块结构. 第三,重点就是site.php , 完成site.php 需要一定的php的编程能力, 第四,site.php 其中 通过 pdo 从数据库的获取我们想得到数据源. 微擎已封装其路由机制, doWeb

Python之路【第二篇】:Python基础(一)

Python之路[第二篇]:Python基础(一) 入门知识拾遗 一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1:     name = 'wupeiqi' print  name 下面的结论对吗? 外层变量,可以被内层变量使用 内层变量,无法被外层变量使用 二.三元运算 1 result = 值1 if 条件 else 值2 如果条件为真:result = 值1如果条件为假:result = 值2 三.进制 二进制,01 八进

chromium浏览器开发系列第二篇:如何编译最新chromium源码

说一下为什么这么晚才发第二篇,上周和这周department的工作太多了,晚上都是十点半从公司出发,回家以后实在没有多余的精力去摸键盘了.所以请大家包涵! 上期回顾: chromium源码下载: 1.找个靠谱的vpn(我试过了,网上说的不用vpn拿代码的都不靠谱): 2.获取depot_tools,解压,设置环境变量; 3.gclient获取python和git,svn,设置环境变量: 4.fetch–nohooks chromium –nosvn=true 获取源码: 5.gclientsyn

第二篇 SQL Server代理作业步骤和子系统

本篇文章是SQL Server代理系列的第二篇,详细内容请参考原文. SQL Server代理作业由一系列的一个或多个作业步骤组成.一个作业步骤分配给一个特定的作业子系统(确定作业步骤去完成的工作).每个作业步骤运行于一个单独的安全上下文,尽管每个作业有一个所有者来决定谁可以修改作业.本篇主要关注组成SQL Server代理的作业步骤和子系统.快速回顾作业理解SQL Server代理作业的最佳方式是把相关联的 需要完成给定任务 的组件放在一个容器中.作业最主要的组件有作业步骤.计划.警告和通知.

认识IL代码---从开始到现在 &lt;第二篇&gt;

·IL代码分析方法 ·IL命令解析 ·.NET学习方法论 1.引言 自从『你必须知道.NET』系列开篇以来,受到大家很多的关注和支持,给予了anytao巨大的鼓励和动力.俱往昔,我发现很多的园友都把目光和焦点注意在如何理解IL代码这个问题上.对我来说,这真是个莫大的好消息,因为很明显我们的思路慢慢的从应用向底层发生着转变,技巧性的东西是一个方面的积累,底层的探索在我认为也是必不可少的修炼.如果我们选择了来关注这项修炼,那么我们就应该选择如何来着手这项修炼,首先关注anytao的『你必须知道的.N

Asp.net管道 (第二篇)

从请求进入ASP.NET工作者进程,直至它到达最终的处理程序之前要经过一系列的步骤和过程,这个步骤和过程称为ASP.NET处理管道. Asp.net的处理管道流程如下: 语言描述如下: Asp.net处理管道的第一步是创建HttpWorkerRequest对象,它包含于当前请求有关的所有信息. HttpWorkerRequest把请求传递给HttpRuntime类的静态ProcessRequest方法.HttpRuntime首先要做的事是创建HttpContext对象,并用HttpWorkerR

拿出来分享了!VIP珍藏!!!全网最齐全的 DEDECMS模板 网盘地址!没有你找不到的!【第二篇】

拿出来分享了!VIP珍藏!!!全网最齐全的 DEDECMS模板 网盘地址!没有你找不到的! 模板类型最齐全: -------------优美的走起!---------- 五:DEDECMS模板--服装类模板列表: 织梦模板爱搭配服装行业dedecms门户模板下载.zip 35.25 MB昨天16:43VIP永久 服装行业dedecms模板.zip 138.09 KB昨天16:43VIP永久 织梦模板爱搭配服装行业dedecms门户模板下载.zip 35.25 MB昨天16:43VIP永久 201

UI学习第二篇 (控件)

UIbutton 也是一个控件,它属于UIControl 用的最多的就是事件响应 1. //创建按钮对象 UIButton * _botton = [UIButton buttonWithType:UIButtonTypeCustom]; //设置标题 [_botton setTitle:@"按住说话" forstate:UIControlStateNormal]; [_botton setTitle:@"松开说话" forstate:UIControlStateH