您现在的位置:首页 >> 前端 >> 内容

HTML标记语言的特点、基本结构和使用介绍

时间:2018/3/9 10:34:26 点击:

  核心提示:HTMLHTML(Hyper Text Markup Language),即超文本标记语言。超文本(文字+图片+音频+视频+)标记语言(浏览器看到什么样的标记就会做出什么样的反应)HTML直接用浏览器...

HTML

HTML(Hyper Text Markup Language),即超文本标记语言。

超文本(文字+图片+音频+视频+……)

标记语言(浏览器看到什么样的标记就会做出什么样的反应)

HTML直接用浏览器来执行。

HTML经常用于编写web动态页面

这里介绍一个HTML的网站,这里的HTML还是比较全面的,对于入门学习很不错:HTML教程

HTML标记语言的特点

标记(标签或元素)的形式

双标签

<元素名>内容</元素名>

        如:<font>文字</font>

单标签

<元素名/>

        如:<img src=“a.jpg”/>

<元素名>

        如:<br/>

HTML页面的基本结构

<html>                  //HTML起始标签

    <head>              //页面头部起始标签

        <title>网页标题</title> //页面标题

    </head>             //页面头部结尾标签

    <body>              //页面正文起始标签

        网页正文

    </body>             //页面正文结束标签

</html>

回车键和空格键在HTML中显示时不起作用,为使代码清晰,建议不同的标记之间回车编写,以便于代码的阅读

HTML编辑时不是所见即所得

HTML不区分大小写

缩进用tab,不要使用空格

HTML中注释格式为

<!--需要注释的内容-->

空格标签

&nbsp;

标题标签

<hn></hn>

n从1到6, 标题从大到小,超过6的按照6级标题显示

水平线标签,即出现一根横划整个页面的横线

<hr/>

段落标签,开启一个段落

<p></p>

字体标签

 <font></font>

 例如:<font size="7" color="#00FFFF" face="楷体">HTML</font> 

- 属性size表示字体的大小,有1至7逐渐递增

- 属性color表示颜色,除了能使用颜色的英文表示,通常使用RGB三原色表示法,例#FF0000  

- 属性face表示字体

图片标签

<img />

例如:<img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉,图片无法显示!">

- src:指的是显示的图片的路径

- width:指定图片的宽度,取值可以是像素值,也可以是占页面的百分比

- height:指定图片的高度,取值可以是像素值,也可以是占页面的百分比

- alt:当图片无法正常显示的时候给出的提示信息

表格标签

<table>

    <tr>

        <td>

        </td>

    </tr>

</table>

tr标签标示行

td标示单元格

table属性border表示边框

table属性bordercolor表示边框颜色,除了能使用颜色的英文表示,还通常使用RGB三原色表示法,例#FF0000

table属性width 表示表格宽度,可以使用像素表示(px),也可以使用百分比(~%)

table属性height表示表格高度,可以使用像素表示(px),也可以使用百分比(~%)

table属性cellpadding表示表格边与内容的距离

table属性cellspacing表示表格边与边的距离,也就是单元格之间的距离

td属性colspan表示单元格跨列数目

td属性rowspan表示单元格跨行数目

td属性align定义内容在水平方向的排布:left center right

td属性valign定义内容在竖直方向的排布:bottom middle top

form表单

form表单是用户可以填写信息提交服务器的控件。form表单包含如下控件:

<input type=“text”/>                <!– 可编辑文本域 -->

<input type=“password”/>                   <!– 密码框 -->

<input type=“checkbox”/>                   <!– 多选框 -->

<input type=“radio”/>                  <!– 单选框 -->

<input type=“button”/>                 <!– 按钮 -->

<input type=“file”/>                       <!– 文件浏览 -->

<textarea cols=“50” rows=“4”> </textarea> <!– 文本域-->

<select> <option></option></select>          <!–  下拉控件-->

HTML标记语言的特点、基本结构和使用介绍

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<BODY>
    <!--此部分为注释,并不会出现

        1、html编辑时不是所见即所得;
        2、HTML不区分大小写
        3、段落标签<p />开启下一段,或者使用<p></p>
        4、换行标签<br />
        5、标题标签 H1——H6  依次递减
        6、缩进用TAB,不要使用空格
        6、字体标签 <font></font>
            属性size表示字体的大小,由1至7逐渐递增,
            属性color表示颜色,除了能使用颜色的英文表示,通常使用RGB三原色表示法,例#FF0000  
            属性face表示字体
            eg:<font color="red" size="5" face="楷体">HTML</font>
        7、水平线标签<hr/>
    -->
        <h1>HTML语言经常用于编写Web静态页面</h1>
        <h2>HTML语言经常用于编写Web静态页面</h2>
        <h3>HTML语言经常用于编写Web静态页面</h3>
        <h4>HTML语言经常用于编写Web静态页面</h4>
        <h5>HTML语言经常用于编写Web静态页面</h5>
        <h6>HTML语言经常用于编写Web静态页面</h6>
        <hr/>
        <font size="7" color="#00FFFF" face="楷体">HTML</font> 
        <br/>

        Java程序设计教程

        <!--段落标签-->
        <p>
            Textbook for Programming in Java
        </p>

        <br/>

        <!--表格标签<table><tr><td></td> </tr></table>
            <tr>标签标示行
            <td>标签标示单元格
            table属性border表示边框
            table属性bordercolor表示边框颜色
            table属性width 表示表格宽度,可以使用像素表示(px),也可以使用百分比(~%)
            table属性height表示表格高度,可以使用像素表示(px),也可以使用百分比(~%)
            table属性cellpadding表示表格边与内容的距离
            table属性cellspacing表示表格边与边的距离,也就是单元格之间的距离
            td属性colspan表示单元格跨列数目
            td属性rowspan表示单元格跨行数目
            td属性align定义内容在水平方向的排布:left  center  right
            td属性valign定义内容在竖直方向的排布:bottom middle  top
            &nbsp;表示空格
        -->
        <table border="1" bordercolor="#00FFFF" cellspacing="1px" cellpadding="0px" height="250" width="100%">
            <tr>
            <td>时间\星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>
            </tr>
            <tr>
            <td rowspan="2" align="center">上午</td><td>数据结构</td><td>编译原理</td><td>java</td><td>数据库原理</td><td>编译原理</td>
            </tr>
            <tr>
            <td>休息</td><td>休息</td><td>操作系统</td><td>计算方法</td><td>休息</td>
            </tr>
            <tr>
            <td colspan="6">&nbsp;</td>         <!--空格跨6列-->
            </tr>
            <tr>
            <td rowspan="2" align="center">下午</td><td>休息</td><td>汇编语言</td><td>数据结构</td><td>休息</td><td>休息</td>
            </tr>
            <tr>
            <td>数据库原理</td><td>休息</td><td>计算方法</td><td>休息</td><td>操作系统</td>
            </tr>
        </table>
        <br/>
        <br/>


        <!--表单标签
            Form表单是用户可以填写信息提交服务器的控件。Form表单包含如下控件:
            <input type="text"/> 可编辑文本域                              
            <input type="password"/> 密码框                 
            <input type="checkbox"/> 多选框                 
            <input type="radio"/> 单选框                 
            <input type="button"/> 按钮              
            <input type="file"/> 文件浏览                   
            <textarea cols="50" rows="4"></textarea> 
            <select> <option></option></select>       
        -->
        <table border="1" bordercolor="blue" cellspacing="0px" cellpadding="0px" width="100%">
            <tr>
            <td align="right">用户名:</td>
            <td><input type="text" name="userName" /> </td>
            </tr>
            <tr>
            <td align="right">密&nbsp;&nbsp;码:</td>
            <td><input type="password" name="passwd"/> </td>
            </tr>
            <tr>
            <td align="right">专&nbsp;&nbsp;业:</td>
            <td>
            <select>
            <option>--请选择--</option>
            <option>软件工程</option>
            <option>计算机科学与技术</option>
            <option>通信工程</option>
            <option>电子信息</option>
            </select>
            </td>
            </tr>
            <tr>
            <td align="right">性&nbsp;&nbsp;别:</td>
            <td><input type="radio" name="gender" />男 <input type="radio" name="gender" />女</td>
            </tr>
            <tr>
            <td align="right">兴&nbsp;&nbsp;趣</td>
            <td><input type="checkbox" name="favorate" />羽毛球 <input type="checkbox" name="favorate" />篮球<input type="checkbox" name="favorate" />乒乓球</td>
            </tr>
            <tr>
            <td align="right">
            介&nbsp;&nbsp;绍:
            </td>
            <td>
            <textarea rows="3" cols="30"></textarea>
            </td>
            </tr>
            <tr>
            <td align="center">
            <input type="submit" value="提交" />
            </td>
            <td align="center">
            <input type="reset" value="重置"/>
            </td>
            </tr>
        </table>
        <br/>
        <br/>

        <!--图片标签
            <img /> 
            src:指的是图片显示的路径
            width:指定图片的宽度,取值可以是像素值,也可以是百分比
            height:指定图片的高度,取值可以是像素值(px),也可以是百分比
            alt:当图片无法正常显示的时候给出的提示信息
        -->
        <img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉,图片无法显示!">
        <br/>

    </BODY>
</html>

Tags:HT TM ML L标 
作者:网络 来源:远方水木