400-700-1307

【Html5基础教程】HTML入门的简单学习

2019-01-29 14:58

1:HTML简介
    1.1:HTML(Haper Text Markup language):超文本标记语言
    超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素

    1.2:开发工具:Adobe Dreamwearver cs5

    1.3:HTML的基本结构
        1.2.1:HTML文档标记:<html>
        1.2.2:HTML文档头标记:<head>
        1.2.3:标记内容可以存放:title,meta,style,link等
        1.2.4:HTML文件标题标记:<title>
        1.2.5:页面的元信息:<meta>
            1.2.5.1:显示字符集的设定<meta http-equiv="content-Type" Content="text/html charset=utf-8"/>
            1.2.5.2:刷新<Meta http-equiv="Refresh" Content="5;url=http://www.baidu.com";>
            1.2.5.3:向搜索引擎提供查询关键字:<Meta name="Keywords" Content="vacation.greece">
        1.2.6:HTML文档主题标记:<body></body>

    1.4:HTML文档保存格式
        包含两种,分别是html,htm;
    1.5:HTML语法不区分大小写,建议尽量使用小写
        使用小写,阅读姓比较高。
    1.6:文档注释<!--注释内容-->
        <!--注释内容-->
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<!--<Meta http-equiv="Refresh" Content="5;url=http://www.baidu.com";>-->
<Meta name="Keywords" Content="JAVA基础,js,javase"><!--content设置百度搜索优化-->    
    <title>我的第一个页面</title>
</head>
<body bgcolor="green"><!--bgcolor设置背景颜色-->
    我的hello
</body>
</html>

2:HTML字体实体
显示结果      描述    实体名称    
              空格       
<              小于号    <

              大于号    >        
&              和好        &
"             引号        "
'             撇号        &qpos;(IE不支持)    
等等等等.....

3:HTML常用文档设置标记
    3.1:格式标记
        <br/>换行  <p>段落   <center>居中对齐
        <pre>预格式化标记   <hr/>水平线割线       
        <div>分区显示标记,也称为层标记,div+css进行网页标记
        列表标记:<ul>无序列表   <ol>有序列表   
                  <dl>定义型列表,可以用来做软件说明
    3.2:文本标记
        hn标题标记,h1最大,h6最小
        font字体设置标记
        b粗体
        i斜体
        em表示强调斜体
        strong表示强调显示粗体
        small小型字体
        u下划线
        del删除线

案例的简单应用源码如下

1 <html>
2 <head>
3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
4 <title>html字符实体</title>
5 </head>
6 <body bgcolor="green"><!--bgcolor设置背景颜色-->
7 <center> 
 8 <p>《春晓》</p>



9 <p>春眠不觉晓,处处闻啼鸟。</p>
10 
11 <div>夜来风雨声,花落知多少。</div>
12 
13 <pre>
14 《悯农》
15 春种一粒粟,秋成万颗子。
16 四海无闲田,农夫犹饿死。
17 锄禾日当午,汗滴禾下土。
18 谁知盘中餐,粒粒皆辛苦。
19 </pre>
20 </center>
21 <ul>
22 <li>1:小米</li>
23 <li>2:魅族</li>
24 <li>3:华为</li>
25 <li>4:vivo</li>
26 <li>5:ppo</li>
27 </ul>
28 <hr/>
29 <ol type="A">
30 <li>java</li>
31 <li>c</li>
32 <li>c++</li>
33 <li>javascript</li>
34 </ol>
35 <hr/>
36 <ol type="a">
37 <li>java</li>
38 <li>c</li>
39 <li>c++</li>
40 <li>javascript</li>
41 </ol>
42 <hr/>
43 <ol type="i">
44 <li>java</li>
45 <li>c</li>
46 <li>c++</li>
47 <li>javascript</li>
48 </ol>
49 <hr/>
50 <dl>
51 <dt>软件说明</dt>
52 <dd>非常好用的软件</dd>
53 </dl>
54 
55 <h1>《悯农》</h1>
56 <h2>《悯农》</h2>
57 <h3>《悯农》</h3>
58 <h4>《悯农》</h4>
59 <h5>《悯农》</h5>
60 <h6>《悯农》</h6>
61 <pre>
62 春种一粒粟,秋成万颗子。
63 <font face="楷体" size=10>四海无闲田,</font>农夫犹饿死。
64 <u>锄禾日当午,</u>汗滴禾下土。
65 谁知盘中餐,粒粒皆辛苦。
66 </pre>
67 <p>原价:100元</p>
68 <p>现价:50元</p>
69 </body>
70 </html>
 4:图像标记
    知识分析:路径分为相对路径和绝对路径
    (1)相对路径,就是在同一个网站下,不同文件之间的的位置定位。引用的文件是相对当前网页的位置而言的,根据这个相对位置得出相对路径。
    (2)绝对路径,指的是完整的路径。

    <img>图像标记,格式支持jpg,png,gif,jpeg;
    4.1:使用方法,<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">
    4.2:<img>标记的属性
        src属性,作用指定我们要加载的图片的路径和图片的名称以及图片格式
        width属性,作用指定图片的宽度,单位px,em,cm,mm
        height属性,作用指图片的高度,单位px,em,cm,mm
        border属性,作用指定图标的边框宽度,单位px,em,cm,mm
        alt属性,作用1当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
                 作用2如果图像没有下载或者加载失败,会用文字来代替图像显示
                 作用3,搜索引擎可以通过这个属性的文字来抓取图片

5:超链接的使用
    5.1:基本语法,href="" target="打开方式" name="页面锚点名称">链接文字或者图片
    5.2:属性
        5.2.1:href属性
            链接的地址,链接的地址可以是一个网页,也可以是一个视频,图片,音乐等等
        5.2.2:name属性
            指定页面的锚点名称
        5.2.3:target属性,作用:定义超链接的打开方式
            _blank:在一个新的窗口中打开链接
            _self(默认值):在当前窗口中打开链接
            _parent:在父窗口中打开页面,框架中使用较多
            _top:在顶层窗口中打开文件,框架中使用较多

【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!

开班信息

当前校区

北京校区
  • 北京校区
  • 上海校区
  • 广州校区
  • 沈阳校区
  • 杭州校区
  • 南京校区
  • 郑州校区
  • 成都校区
  • 深圳校区
  • 西安校区
  • 苏州校区
  • 深圳沙井
  • 深圳观澜
  • 深圳龙岗
  • 武汉校区
  • 西宁校区
  • 石家庄校区
  • 湖北咸宁
  • 广东惠州
  • 广东佛山

                    Copyright © 2007-2019 IT兄弟连教育 版权所有 京ICP备11018177号  京公网安备 11010802026987号