1、超文本标记语言

　　（1）超文本：比普通文本功能更加强大；

　　（2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！

2、HTML语法和规范

　　（1）所有的html文件后缀名都是以.html或者.htm结尾的，建议使用.html结尾；

　　（2）整个html文件分别由头部分<head></head>和体部分<body></body>组成；

　　（3）Html标签都是由开始标签和结束标签组成，单标签除外（<br />）；

　　（4）html不区分大小写，建议使用小写。

3、标题标签

　　（1）标题标签使用<hn></hn>，n从1到6逐渐变小，超过6的按照6进行显示；

　　（2）代码演示：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>标题标签</title>

     </head>

     <body>

         <!--标题标签     -->

         <h1>我是标题1</h1>

         <h2>我是标题2</h2>

         <h3>我是标题3</h3>

         <h4>我是标题4</h4>

         <h5>我是标题5</h5>

         <h6>我是标题6</h6>

     </body>

 </html>

　　运行结果：

　　

4、注释标签

　　<!--注释-->

　　快捷键是Ctrl+/

<!--标题标签     -->

5、水平线标签

　　（1）水平线标签<hr /> ；

　　（2）size属性：水平线的高度，单位像素；

　　（3）noshade属性：没有阴影，取值noshade，表示显示纯色。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>标题标签</title>

     </head>

     <body>

         <!--标题标签     -->

         <h1>我是标题1</h1>

         <h2>我是标题2</h2>

         <h3>我是标题3</h3>

         <hr />

         <h4>我是标题4</h4>

         <!--描述：size属性：水平线的高度，单位像素-->

         <hr size="5" />

         <h5>我是标题5</h5>

         <!--noshade属性：没有阴影，取值noshade，表示显示纯色-->

         <hr noshade="noshade" />

         <h6>我是标题6</h6>

     </body>

 </html>

　　运行结果：

　　

6、段落标签<p></p>

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>段落标签</title>

     </head>

     <body>

         <p>1、超文本标记语言</p>

         <p>　　（1）超文本：比普通文本功能更加强大；</p>

         <p>　　（2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！</p>

     </body>

 </html>

　　运行结果：

　　

7、字体标签

　　（1）字体标签<font></font>，必须结合其属性才能具备一定的样式效果 ；

　　（2）color：指定内容的颜色，可以死英文单词，也可以是十六进制；

　　（3）size：指定内容的大小；

　　（4）face：指定内容的字体；

　　（5）<b<</b>：加粗；

　　（6）<i></i>：斜体；

　　（7）<u></u>：下划线。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <font color="red" size="1">我是字体标签</font><br />

     <font color="red" size="2">我是字体标签</font><br />

     <font color="red" size="3">我是字体标签</font><br />

     <font color="red" size="4">我是字体标签</font><br />

     <font color="red" size="5">我是字体标签</font><br />

     <font color="red" size="6">我是字体标签</font><br />

     <font color="red" size="7">我是字体标签</font><br />

     <body>

     </body>

 </html>

　　运行结果：

　　

8、图片标签

　　（1）图片标签：<img /> ；

　　（2）图片的位置属性：src；

　　（3）绝对路径：带有盘符的；

　　（4）相对路径：

　　　　①同一级的，直接写文件名或者./文件名称；

　　　　②上一级：../文件名称（如果是多层，那么多写几个../）；

　　　　③下一级，写目录名称/文件名称。

　　（5）width：设置图片的高度，取值可以是像素值，也可以是百分比；

　　（6）height：设置图片的高度，取值可以是像素值，也可以是百分比；

　　（7）alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>图片标签</title>

     </head>

     <!--alt是当图片无法正常显示出现的提示-->

     <!--关于src路径的问题：

     不写或者./是当前目录;

     ../当前文件的上一级;

     上上一级是../../

     -->

     <img src="../googlelogo.png" width="272px" height="92" alt="logo图标" />

     <body>

     </body>

 </html>

　　运行结果：

　　

9、列表标签

　　（1）无序标签

　　            <ul type="">
                　　　　　　<li></li>
           　　 </ul>

　　属性：有三个取值。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>无序列表</title>

     </head>

     <body>

         <!--默认是disc,实心圆；circle是空心圆；square是实心方框-->

         <ul type="square">

             <li>google</li>

             <li>百度</li>

             <li>搜狗</li>

         </ul>

     </body>

 </html>

　　运行结果：

　　

　　（2）有序列表
            <ol type="I" start="" reversed="reversed">
               　　 <li></li>
            </ol>

　　属性：有5个取值；start是开始的序数；reverse是倒序。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>有序列表</title>

     </head>

     <body>

         <!--默认是数字1、2、3；start是开始的序数；reversed是倒序；type是数字或者英文等类型-->

         <ol start="6" reversed="reversed" type="a">

             <li>google</li>

             <li>百度</li>

             <li>搜狗</li>

         </ol>

     </body>

 </html>

　　运行结果：

　　

10、超链接标签

　　<a href=“” target="">超链接</a>

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>超链接标签</title>

     </head>

     <body>

         <!--_self是在来的窗口打开超链接，_blank在一个新的窗口打开超链接-->

         <a href="http://www.cnblogs.com/gzdlh/" target="_blank">gzdlh博客园</a>

     </body>

 </html>

　　运行结果：

　　

11、表格标签　
                <table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </table>

　　属性：

　　　　①边框：border；

　　　　②宽度：width；

　　　　③高度：height；

　　　　④背景颜色：bgcolor；

　　　　⑤边框与边框：cellspacing；

　　　　⑥边框与内容：cellpadding；

　　　　⑦居中显示align 。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表格标签</title>

     </head>

     <body>

         <table border="1px">

             <tr >

                 <td>11</td>

                 <td>12</td>

                 <td>13</td>

             </tr>

             <tr>

                 <td>21</td>

                 <td>22</td>

                 <td>23</td>

             </tr>

             <tr>

                 <td>31</td>

                 <td>32</td>

                 <td>33</td>

             </tr>

         </table>

     </body>

 </html>

　　运行结果：

　　

12、跨行跨列操作

　　跨行：rowspan；

　　跨列：colspan。

13、框架集结构标签

　　（1）        <frameset rows="" cols="">
            　　　　　　　　<frame src=""/>
           　　　　　　　　 <frame name=""/>
       　　　　   </frameset>

　　属性：

　　　　①cols：进行垂直切割划分，可以切割为任一快（参数的值相加=100%，其中一块可以使用*表示）；

　　　　②rows：进行水平和切割划分，可以切割为任一快（参数的值相加=100%，其中一块可以使用*表示）；

　　（2）一旦划分区域后，我们需要对具体的区域进行内容的填充，此时需要使用<frame></frame>:；

　　属性：

　　　　①src：指定区域显示的文件（路径）；

　　　　②name：它通常会结合超链接的target属性使用，来定义最终的显示位置。

　　（3）代码演示：

　　　　①左侧内容

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         左侧内容

     </body>

 </html>

　　　　②右侧内容

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         右侧内容

     </body>

 </html>

　　　　③框架集标签

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>框架集标签</title>

     </head>

     <!--不需要body-->

     <frameset cols="25%,*">

         <frame src="left.html" />

         <frame src="right.html" />

     </frameset>

 </html>

　　运行结果：

　　

15、参考文档：W3CSchool全套Web开发手册链接：W3CSchool全套Web开发手册密码：z99r

04001_HTML简单介绍的更多相关文章

  1. [原创]关于mybatis中一级缓存和二级缓存的简单介绍

    关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...

  2. 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍

    一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...

  3. 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍

    一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...

  4. yii2的权限管理系统RBAC简单介绍

    这里有几个概念 权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖 角色 比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限 高级会员组:发帖 ...

  5. angular1.x的简单介绍(二)

    首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...

  6. Linux的简单介绍和常用命令的介绍

    Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...

  7. iOS-iOS开发简单介绍

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...

  8. iOS开发多线程篇—多线程简单介绍

    iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcod ...

  9. iOS开发UI篇—UITabBarController简单介绍

    iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...

随机推荐

  1. 计算机视觉-SIFT特征匹配进行目标转换

    Lowe将SIFT算法分解为如下四步: 1. 尺度空间极值检测:搜索所有尺度上的图像位置.通过高斯微分函数来识别潜在的对于尺度和旋转不变的兴趣点. 关键点定位:在每个候选的位置上,通过一个拟合精细的模 ...

  2. 一步一步学习GTK

    完成课设,偶然碰到GTK,索性学习一遍 转载自ikoDotA の BLOG (一).一步一步学GTK+之开篇 一.什么是GTK+ GTK+ 是一种函数库是用来帮助制作图形交互界面的.整个函数库都是由C ...

  3. Tian Ji -- The Horse Racing HDU - 1052

    Tian Ji -- The Horse Racing HDU - 1052 (有平局的田忌赛马,田忌赢一次得200块,输一次输掉200块,平局不得钱不输钱,要使得田忌得到最多(如果只能输就输的最少) ...

  4. KMP HDOJ 4300 Clairewd's message

    题目传送门 题意:完全不懂,最后还是看题解才理解了.第一行字符串是密文变成明文的规则,比如第二个样例:“qwertyuiopasdfghjklzxcvbnm”,‘q'对应的明文为’a','w'对应'b ...

  5. home键拦截

    代码: public class HomeKeyReceiver extends BroadcastReceiver { private static final String LOG_TAG = & ...

  6. 转 SQLPLUS中SQL换行执行

    权声明:本文为博主原创文章,未经博主允许不得转载. 正常情况下,在SQLPLUS中输入命令时,可以换行,但不能有空格,否则不能执行,会直接返回到SQL>下.但通过命令设置可以实现语句换行时允许有 ...

  7. POJ 2002 Squares 数学 + 必须hash

    http://poj.org/problem?id=2002 只能说hash比二分快很多.随便一个hash函数都可以完爆二分. 判断是否存在正方形思路如下: 1.枚举任意两个点,作为正方形的一条边,那 ...

  8. windows系统里Cygwin中如何正确安装wget（图文详解）

    具体步骤,见如下: https://ftp.gnu.org/gnu/wget/ 解压到Cygwin的主目录中,一般是   你的Cygwin目录/home/当前用户名/ . 我这是如下     先./c ...

  9. AJPFX关于abstract的总结

    抽象类: abstract抽象:不具体,看不明白.抽象类表象体现.在不断抽取过程中,将共性内容中的方法声明抽取,但是方法不一样,没有抽取,这时抽取到的方法,并不具体,需要被指定关键字abstract所 ...

  10. Jquery+ashx实现Ajax

    一 Ajax的实现方式 1.使用一般的webform,在页面用jQuery ajax调用,再从取得的html数据中取得<body>内的内容,写入DOM 优点:不用改变现有的asp.net开 ...