导航

常用标签(一)

Posted on 2015-10-25 22:22  net雨  阅读(92)  评论(0)    收藏  举报

1、html的简介

 

    HyperText Markup Language：超文本标记语言，网页语言。

 　　超文本：超出文本的范畴。  

　　 标记：标签，html的所有操作都是通过标签来实现

　　 网页的语言

 　　如何使用html？  

　　 第一个html程序 后缀名是.html .htm  

 　　这是我的第一个<font color="red" size="5">html程序！</font>

 

　写html程序时候规范：

　　（1）html程序以<html>开始，同时</html>结束，范围

　　（2）在<html>范围里面包含两部分：<head>设置html一些相关的信息</head>  和 <body>在页面上显示的内容都写到body里面</body>

　　      <head>
   　　　　　　<title>hello html</title>
   　　  </head>

　　（3）html的标签不区分大小写
　　（4）html的标签有开始标签，也要有结束标签   <title> </title>
　　（5）如果想要对html里面数据进行样式的变化，需要使用标签把数据包起来，通过修改标签的属性和属性值实现标签内数据样式的变化 
　　（6）个别的标签，没有结束标签,在标签内结束 比如换行标签 <br/>

 

 

2、html的常用的标签（一）

　　（1）文字标签和注释标签
 　　 　　字体标签 ： <font></font>
 　　 　　color: 字体的颜色
  　　　　使用英文单词 ：red  blue  green  yellow  orange  gray....
  　　　　使用十六进制数进行表示 #ffffff, RGB，直接使用工具 
　　　　  size: 字体的大小

　　　　  使用值 1-7 字体大小的范围 ，大小超过7，还是按照大小7显示
 
　　　　  标题标签
  　　　　　　<h1></h1>  <h2></h2>........<h6></h6>
　　　　　　　自动换行，从h1到h6字体大小依次变小的

　　　　  水平线标签
 　　　　　　 <hr/>
 　　　　　　　color: 水平线的颜色
      　　　　　 size: 水平的粗细 使用值 1-7 字体大小的范围

　　　　   特殊字符
 　　　　　　 比如想要在html中显示这样的效果 <html>:是html程序的开始
  　　　　　　 特殊字符需要进行转义
    　　　　　 <  ：&lt;
       　　　　 >  : &gt;
      　　　　  &  : &amp;
     　　　　　空格 ：&nbsp;

　　　　  注释标签

　　　　　　  html的注释 <!--  -->

 

　　　　 列表标签
 　　　　　　想要在页面中实现这样的效果
  　　　　　　 公司
        　　　　　　财务部
        　　　　　　人事部
        　　　　　　教育部
 　　　　　　　　 <dl> </dl> : 表示列表的范围
 　　 　　　　　　在dl标签里面 <dt></dt>: 上层内容   <dd></dd>：下层的内容
  　　　　　　　　代码
  　　　　　　　　　　<dl>
  　　　　　　　　　　 <dt>公司</dt>
   　　　　　　　　　　<dd>财务部</dd>
   　　　　　　　　　　<dd>人事部</dd>
   　　　　　　　　　　<dd>教育部</dd>
  　　　　　　　　　　</dl>

　　　　　想要在页面中显示这样的效果(有序列表)


   　　　　　　　　1.财务部
   　　　　　　　　2.人事部
   　　　　　　　　3.教育部

 

　　　　　　　　　a.财务部
　　　　　　　　　b.人事部
　　　　　　　　　c.教育部

 

     　　　　　　　 i.财务部
    　　　　　　　 ii.人事部
   　　　　　　　 iii.教育部

 

　　　　　　<ol></ol>: 表示有序列表的范围
   　　　　　　　属性 type： 表示根据什么进行排序 默认的情况下，使用 1
              　　　type属性里面的值 1 a  i
　　　　　　在ol里面 使用 <li>写具体的内容</li>

 

　　　　　　　　无序列表

　　　　　　　　　使用符号（黑点）财务部
　　　　　　　　　使用符号（黑点）人事部
　　　　　　　　　使用符号（黑点）教育部

　　　　　　　　<ul></ul>: 表示无序列表的范围 type属性：使用什么符号
　　　　　　　　空心圆circle 、实心圆disc 、实心方块square ，默认disc 

　　　　　　　 在ul里面 使用 <li>写具体的内容</li>

 

　　　　　　　　图像标签

 　　　　　　　　可以在页面中显示图片
   　　　　　　　<img src="图片的路径"/>
   　　　　　　　　属性
   　　　　　　　　width：图片的宽度
  　　　　　　　　 height：图片的高度

 　　　　　　　　alt: 在图片上显示的文字（在某些浏览器下面，不支持）
   　　　　　　　　如果图片存在，鼠标放到图片上，显示文字；如果图片不存在，在图片的位置显示文字

 　　　　　　　　路径的介绍

　　　　　　　　　　两种：绝对路径和相对路径
　　　　　　　　　　绝对路径：图片的完全路径  C:\Users\sj\Desktop\day01\code\a.jpg
                               　　　　　　　　　　　　http://www.baidu.com/1.png 

　　　　　　　　　　相对路径:

　　　　　　　　　　　　　　如果图片和html文件在一个目录下面，可以直接写图片的名称

　　　　　　　　　　　　　　　　 图片在html所在目录的下层目录
　　　　　　　　　　　　　　　　　　C:\Users\sj\Desktop\day01\code\ .html
　　　　　　　　　　　　　　　　　　C:\Users\sj\Desktop\day01\code\ img\.jpg

　　　　　　　　　　　　　　　　　　技巧:
　　　　　　　　　　　　　　　　　　找html文件所在路径是什么 code
　　　　　　　　　　　　　　　　　　找图片所在的路径在 code路径的什么位置
　　　　　　　　　　　　　　　　　　　　　　img/a.jpg
    　　　　　　　　　　　　　　　　<img src="img/map02.jpg" width="400" height="400"/>

　　　　　　　　　　　　　　　　 图片在html所在目录的上层目录

　　　　　　　　　　　　　　　　　　C:\Users\sj\Desktop\day01\ code\.html
　　　　　　　　　　　　　　　　　　C:\Users\sj\Desktop\day01\ map01.png
　　　　　　　　　　　　　　　　　　找html所在路径 code
　　　　　　　　　　　　　　　　　　找图片的所在的路径和code路径什么位置
　　　　　　　　　　　　　　　　　　day01在code上层目录  ../ : 表示上层目录
　　　　　　　　　　　　　　　　　　　　　　../map01.png
　　　　　　　　　　　　　　　　　　表示上层目录的上层目录 ../../

　　　　　　　　　　　　　　使用列表标签实现商品的列表
　　　　　　　　　　　　　　　　核心代码
   　　　　　　　　　　　　　　　　　　<dl>
   　　　　　　　　　　　　　　　　　　 <dt><img src="images/photo_01.jpg"/></dt>
    　　　　　　　　　　　　　　　　　　<dd>一口价：21.00</dd><br/>
    　　　　　　　　　　　　　　　　　　全国包邮！韩版修身长袖T恤 打底衫 </dd>
   　　　　　　　　　　　　　　　　　　</dl>