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:raycosmos@aliyun.com”>联系我们</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:常用于试卷,问卷调查。
<ol>
<dt>热门排行榜</dt>
<li><a href="#"> 潇洒走一回</a><a href="#"><img src="../picture/pic1.png"/></a></li>
<li><a href="#">偏偏喜欢你</a><a href="#"><img src="../picture/pic1.png"/></a></li>
<li><a href="#">酒干倘卖无</a><a href="#"><img src="../picture/pic1.png"/></a></li>
<li><a href="#">不说再见</a><a href="#"><img src="../picture/pic1.png"/></a></li>
<li><a href="#">舍不得你</a><a href="#"><img src="../picture/pic1.png"/></a></li>
<li><a href="#">请跟我来</a><a href="#"><img src="../picture/pic1.png"/></a></li>
</ol>
定义列表 define title
<dl>
<dt>水果</dt> 标题
<dd>苹果<dd>
<dd>香蕉<dd>
<dd>橘子<dd>
</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 跨列
去除隐藏的单元格线条 border-collapse:collapse; 属性。
9> 视频 video 音频 audio(用法同video)
<video src=”path” controls></video>
<video controls>
<source src=”path” type=”video/mp4”/>
<source src=”path” type=”video/avi”/>
</video>
autoplay 自动播放
10>页面布局(用户体验)layout
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记肩部区域的内容(用于整个页面或页面的一块区域) |
section | web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
11>内联框架 inner
<iframe src=”path” name=”mainFrame”></iframe>
HTML第二篇的更多相关文章
- [ 高并发]Java高并发编程系列第二篇--线程同步
高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...
- 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
- (转)从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
原文地址: http://www.cnblogs.com/lyhabc/p/4682028.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...
- 《javascript权威指南》读书笔记——第二篇
<javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...
- [转]Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...
- 第二篇.Bootstrap起步
第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...
- 【OpenGL】第二篇 Hello OpenGL
---------------------------------------------------------------------------------------------------- ...
- 解剖SQLSERVER 第二篇 对数据页面头进行逆向(译)
解剖SQLSERVER 第二篇 对数据页面头进行逆向(译) http://improve.dk/reverse-engineering-sql-server-page-headers/ 在开发Orc ...
随机推荐
- 怎样生成一个顶点迭代器(MItMeshVertex)
最近修改一个maya中的jlCollisionDeformer工具,该工具有一个明显不足,变形后顶点分布太乱,无法满足生产需求.于是考虑对该变形后的顶点进行平滑处理.既然要做平滑处理就要获取当前点及与 ...
- Ubuntu 16.04 LTS 常用快捷键
在Linux下Win键就是Super键 启动器 Win(长按) 打开启动器,显示快捷键 Win + Tab 通过启动器切换应用程序 Win + 1到9 与点击启动器上的图标效果一样 Win + Shi ...
- Learn the Basics - RN2
使用Image 1. 引用 import { Image } from 'react-native'; 2. 使用 format: <Image source={{}} style{{}} /& ...
- Celery 异步任务 , 定时任务 , 周期任务 的芹菜
1.什么是Celery?Celery 是芹菜Celery 是基于Python实现的模块, 用于执行异步定时周期任务的其结构的组成是由 1.用户任务 app 2.管道 broker 用于存储 ...
- easyui增删改查前段代码
<script> var url; //添加用户窗体 function newUser() { $('#dlg').dialog('open').dialog('setTitle', '学 ...
- gentoo 图像方面的软件
图像方面的软件一般包括:查看图像,屏幕截图,图像修改. 查看图像简单的可以安装 feh,但是 feh 一般作为墙纸来用.稍微好一些的是 gqview. 屏幕截图可以用 screengrab,使用的时候 ...
- windows清空电脑的DNS缓存
清空电脑的DNS缓存 按"Win+R"系统热键打开"运行"窗口,进入terminal终端 输入"ipconfig /flushdns"命令后 ...
- Java 身份证判断性别获取年龄
import com.alibaba.fastjson.JSON; import org.junit.Test; import java.text.SimpleDateFormat; import j ...
- WPF程序 双击exe自动申请“以管理员方式运行”权限
实现方式: 在 xxx.exe 目录下包含其对应的清单文件(xxx.exe.manifest, 由 VS 编译时自动生成): 用记事本打开 manifest 文件,将文件中的项:<request ...
- ReactiveX 学习笔记(21)使用 Rx.NET + ReactiveUI 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...