认识HTML

baisigan4935

于 2015-10-30 22:32:00 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/JJ-kelion/p/4924554.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

 1 <head>                    
 2     <title>This Is Title</title>
 3         
 4     <style type="text/css">
 5                 body{
 6                     background-color: #eaf;    
 7                     margin-left: 20%;
 8                     margin-right: 20%;
 9                     border: 2px dotted black;
10                     padding: 10px 10px 10px 10px;
11                     font-family: sans-serif;
12                 }
13     </style>
14 </head>

注释：

style指定样式为CSS
background-color ：背景色
margin-left，margin-right：左右外边距分别占页面的20%
border：页面周围边框为虚线，颜色为黑色
padding：在页面主体周围创建一些内边距
font-family：定义文本使用的字体

HT（hypertext）

1 <a href = "beverages/elixir.html" > elixirs </a>
2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>
3 <a href = "../index.html" > RETURN </a>
4 <a target = "_blank" href="beverages/elixir.html"> <img src="images/j.png"> </a>

注释：

使用<a>从一个页面链接到另一个页面
<a>的属性指定了链接的目标文件
<a>元素的内容是链接的标签。默认的，这个标签有下划线，指示可以单击的
文字和图像都可以用作链接的标签
使用“..”可以链接到源文件的上一层文件夹的一个文件，".."代表父文件夹。
“/”用来分隔路径的图像

示图：

<p>,<blockquot><br>

1 <blockquote>
2     Passing cars, <br>
3     when you can't see, <br>
4     A glimpse, <br>
5 </blockquote>
6 
7 <p>
8     <q> passing car </q>,when you can't see.
9 </p>

注释：

<q>：双引号，短引号，作为现有段落的一部分
<blockquote>：较长引用，单独显示，为块元素
<br>：换行符

<ol>，<ul>，<li>

 1 <ol>
 2     <li> one </li>
 3     <li> two </li>
 4     <li> three </li>
 5     <li> four thing 
 6         <ul>
 7             <li> one </li>
 8             <li> two </li>
 9             <li> three </li>
10         </ul>
11     </li>
12 </ol>

注释：

<ol>：ordered list 有序
<ul> : unordered list 无序
<li> ：用来标识每个元素
<ol>和<li> 或者 <ul>和<li>总是要一起使用

URL

 1 URL:
 2     http://www.cnblogs.com/JJ-kelion/
 3         
 4     <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>
 5         
 6     <!--为标题的开始增加标记-->
 7     <h2 id="chai"> Chai Tea </h2>  
 8     <!--用可用ID链接到元素-->
 9     <a href="top.html/#chai" title="read chai"> Chai tea </a>
10     <!--打开新窗口-->
11     <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>

1 <img src="images/jj.png">

2 <img src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg">

3 <img src="images/jj.png" alt="a picture">

4 <img src="images/jj.png" width="48" height="10">
  <!--使用缩略图-->
5 <a href="big picture"> <img src="small picture" alt="a picture">  </a>