正文
认识HTML
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
基本框架:
1 <html>
2 <head>
3 <title>This Is Title</title>
4 </head>
5
6 <body>
7 <h1><!--一级标题--></h1>
8 <h2><!--二级标题--></h2>
9 <p>
10 <!--段落-->
11 </p>
12 </body>
13 </html>
注释:
- <html>和</html>告诉浏览器文件的内容是HTML
- 被<head>和</head>包围的首部(head)告诉浏览器关于web页面的信息
- head标记中放入title标记,title出现在浏览器窗口
- 页面的主体包括<body>和<body>标记以及他们之间的所有内容,是浏览器中看到的部分
- 元素 = 开始标记 + 内容 + 结束标记
style,CSS
<head>
<title>This Is Title</title> <style type="text/css">
body{
background-color: #eaf;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
注释:
- style指定样式为CSS
- background-color :背景色
- margin-left,margin-right:左右外边距分别占页面的20%
- border:页面周围边框为虚线,颜色为黑色
- padding:在页面主体周围创建一些内边距
- font-family:定义文本使用的字体
HT(hypertext)
<a href = "beverages/elixir.html" > elixirs </a>
<a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>
<a href = "../index.html" > RETURN </a>
<a target = "_blank" href="beverages/elixir.html"> <img src="data:images/j.png"> </a>
注释:
- 使用<a>从一个页面链接到另一个页面
- <a>的属性指定了链接的目标文件
- <a>元素的内容是链接的标签。默认的,这个标签有下划线,指示可以单击的
- 文字和图像都可以用作链接的标签
- 使用“ .. ”可以链接到源文件的上一层文件夹的一个文件," .. "代表父文件夹。
- “/”用来分隔路径的图像
示图:
<p>,<blockquot><br>
<blockquote>
Passing cars, <br>
when you can't see, <br>
A glimpse, <br>
</blockquote> <p>
<q> passing car </q>,when you can't see.
</p>
注释:
- <q>:双引号,短引号,作为现有段落的一部分
- <blockquote>:较长引用,单独显示,为块元素
- <br>:换行符
<ol>,<ul>,<li>
<ol>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four thing
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</li>
</ol>
注释:
- <ol>:ordered list 有序
- <ul> : unordered list 无序
- <li> : 用来标识每个元素
- <ol>和<li> 或者 <ul>和<li>总是要一起使用
URL
URL:
http://www.cnblogs.com/JJ-kelion/ <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a> <!--为标题的开始增加标记-->
<h2 id="chai"> Chai Tea </h2>
<!--用可用ID链接到元素-->
<a href="top.html/#chai" title="read chai"> Chai tea </a>
<!--打开新窗口-->
<a target="_blank" href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>
注释:
- URL:域名,用来唯一标识网站
- 为了便于访问,在<a>元素中使用title元素
- 使用target属性在另一个浏览器窗口中打开链接。
使用图像:
幕后步骤:
- 浏览器从服务器获取文件“jj-kelion.html”
- 读取“jj-kelion.html”,发现有n个图像需要获取
- 从服务器逐个得到图像,从第一开始,显示完后,转向下一个图
常用图片格式:
- JPEG
- PNG
- GIF
格式分析:
- JPEG:适合连续色调图像,可以表示千万种颜色,有损格式,不支持透明和动画
- PNG:适合单色和线条构成图,是一种无损格式,允许透明,
- GIF:最适合单色图和线条图,最多256种颜色,支持透明,无损格式,支持动画。
总结:
- JPEG和PNG擅长表示logo和文本图像;
- JPEG擅长照片
- 需要透明和多种颜色:选择PNG
<img>
<img src="data:images/jj.png">
<img src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg">
<img src="data:images/jj.png" alt="a picture">
<img src="data:images/jj.png" width="48" height="10">
<!--使用缩略图-->
<a href="big picture"> <img src="small picture" alt="a picture"> </a>
注释:
- src不只是用于相对链接,还可以放入URL
- 相同网站上的链接和图像,最好使用相对链接
- 如果图像未能显示,就会用alt属性指定的描述图像的文本代替图像
创建缩略图步骤:
- 为缩略图创建一个目录
- 将各个分辨率降低后的照片存入文件夹中
- 将页面中的各个<img>元素的src设置为缩略版的
- 增加从缩略图到一个新页面显示大图的链接
HTML5
指南:
- <!doctype html> 首行
- alt属性为必要的
- 指定字符编码,在<head>首部中的首行,<meta charset = "utf-8">
- 验证代码工具:http://validator.w3.org
随机推荐
-
c++与c不太相同的一些地方2
1.一般全局变量放到cpp 文件里面,而不是.h 里面.要不然容易乱套,这个乱几次就好了,先记住这样一种编码规范. 以为大家都引入就比较麻烦,但是实现起来就只有cpp里面才有.毕竟.h是要被包含的文件 ...
-
【排障】Outlook Express 2G收件箱大小限制
Outlook Express 2G收件箱大小限制 文:铁乐猫 ----------------------------- Outlook Express(以下简称OE)客户端收件箱大于或接近2G时, ...
-
xml的语法与创建
xml语法很简单,但很严格,如果出现错误则不能正常解析,而HTML如果出现局部的错误,照样解析 xml第一行必须写xml头<?xml version='1.0' encoding='utf8'? ...
-
elfinder-2.x的java servlet后端——elfinder-2.x-servlet
去年在美期间在外导的项目中,需要用到el-finder的完美界面,但苦于没有java后端,因此做了一个elfinder-2.x-servlet. 托管地址:https://github.com/blu ...
-
(七)Hibernate 映射继承
所有项目导入对应的hibernate的jar包.mysql的jar包和添加每次都需要用到的HibernateUtil.java 第一节:每个具体类对应一个表 Image.java package co ...
-
###《Effective STL》--Chapter2
点击查看Evernote原文. #@author: gr #@date: 2014-09-15 #@email: forgerui@gmail.com Chapter2 vector和string T ...
-
[记录 ]升级IOS 9 和 XCode 7 引起的问题
问题一: 升级xcode 7最低的系统配置要求 升级了ios9 后使用 xcode 6.1 已经不能用了,必须升级 xcode 7才行,原先的系统是OSX 10.10.1 版本.而xcode 7.0 ...
-
安装ipython notebook
从http://cs231n.github.io/assignments2016/assignment1/开始说起,因为要学习cs231n课程,需要安装ipython notebook,原本电脑中安装 ...
-
Integer ,==,int 的使用
面试比较常见的题目:自己也经常忘记,所以就记下来了 上代码: Integer a = ,b=; Integer c = ,d=; System.out.println(a==b); System.ou ...
-
Android_时间服务
接着上一节,这次我查看了Android的时间服务,觉得帮助很大,解决了我很多疑问,下面我就自己总结了一下,加深了自己的印象,好记性不如烂笔头,还真讲得很不错,收下吧?看下图如何利用线程更新UI组件 重 ...
1.一般全局变量放到cpp 文件里面,而不是.h 里面.要不然容易乱套,这个乱几次就好了,先记住这样一种编码规范. 以为大家都引入就比较麻烦,但是实现起来就只有cpp里面才有.毕竟.h是要被包含的文件 ...
Outlook Express 2G收件箱大小限制 文:铁乐猫 ----------------------------- Outlook Express(以下简称OE)客户端收件箱大于或接近2G时, ...
xml语法很简单,但很严格,如果出现错误则不能正常解析,而HTML如果出现局部的错误,照样解析 xml第一行必须写xml头<?xml version='1.0' encoding='utf8'? ...
去年在美期间在外导的项目中,需要用到el-finder的完美界面,但苦于没有java后端,因此做了一个elfinder-2.x-servlet. 托管地址:https://github.com/blu ...
所有项目导入对应的hibernate的jar包.mysql的jar包和添加每次都需要用到的HibernateUtil.java 第一节:每个具体类对应一个表 Image.java package co ...
点击查看Evernote原文. #@author: gr #@date: 2014-09-15 #@email: forgerui@gmail.com Chapter2 vector和string T ...
问题一: 升级xcode 7最低的系统配置要求 升级了ios9 后使用 xcode 6.1 已经不能用了,必须升级 xcode 7才行,原先的系统是OSX 10.10.1 版本.而xcode 7.0 ...
从http://cs231n.github.io/assignments2016/assignment1/开始说起,因为要学习cs231n课程,需要安装ipython notebook,原本电脑中安装 ...
面试比较常见的题目:自己也经常忘记,所以就记下来了 上代码: Integer a = ,b=; Integer c = ,d=; System.out.println(a==b); System.ou ...
接着上一节,这次我查看了Android的时间服务,觉得帮助很大,解决了我很多疑问,下面我就自己总结了一下,加深了自己的印象,好记性不如烂笔头,还真讲得很不错,收下吧?看下图如何利用线程更新UI组件 重 ...