登录  /  注册

什么是HTML?关于html的具体介绍

零下一度
发布: 2017-06-17 14:40:43
原创
1492人浏览过

HTML

hyper text mark-up language(超文本标记语言)

  • 超文本:超链接

  • 标记语言:由标记(标签)构成的语言

什么是HTML?关于html的具体介绍

一个简单的例子


<!DOCTYPE html><html lang="en"> <!--html根标签,代表html文档的开始和结束--><head> <!--html的头部分,设置网页属性,可以设置标题-->
    <meta charset="UTF-8">
    <title>Hello World!</title></head><body> <!--html的正文部分,放置想要在页面上显示的内容--><!--在HTML中不支持空格、制表符、回车--><h1>静夜思</h1> <!--不分开始和结束的标签,自闭合标签--><p> <!--段落标记,有上下边距即行间距-->
    <font color="red" size="12">床</font>前明月光,<br /> <!--指定字体的颜色、大小-->
    疑似地上霜,<br />
    举头望明月,<br />
    低头思故乡,<br /></p><hr /> <!--分隔符--><b>哈哈</b><br /> <!--加粗-->H<sub>2</sub>O<br /> <!--下标-->2<sup>3</sup><br /> <!--上标--></body></html>
登录后复制

转义字符


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>转义字符</title></head><body>哈 哈<br /> <!--空格-->a<b c>d<br /> <!--大于小于需要转义,有可能误当成标签-->1<3>2<br /> <!--标签里不可以是数字,所以这样写直接就是< >--></body></html>
登录后复制

列表和图形


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表标签</title></head><body><h2>爱好</h2><ul type="square"> <!--无序列表-->
    <li>抽烟</li>
    <li>喝酒</li>
    <li>打游戏</li></ul><hr><ol type="A" start="10"> <!--有序列表,从A的后十位开始-->
    <li>小明</li>
    <li>小强</li>
    <li>小军</li></ol><hr><dl>
    <dt>水果</dt>
        <dd>苹果</dd>
        <dd>草莓</dd>
        <dd>香蕉</dd>
    <dt>零食</dt>
        <dd>辣条</dd>
        <dd>奥利奥</dd>
        <dd>绿豆糕</dd></dl><!--图形标签,border是边界,alt是加载不出来显示,title是鼠标放置时显示的--><img src="image.png" border="1" width="200"    style="max-width:90%" alt="HTML" title="我是一张普通的图片"></body></html>
登录后复制

超链接


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>超链接</title></head><body><!--a超链接标签,href用于指定链接,以下的网页在同一文件夹内,traget的_blank不覆盖当前页面,而是打开新的页面--><!--href由协协议名+协议内容组成--><a href="排版标记.html" target="_blank">点我跳转</a><br /><a href="https://www.baidu.com">百度</a><br /><a href="mailto:haiyu19931121@163.com" target="_blank">联系我们</a><br /><a href="thunder://abcdefg.mp4" target="_blank">下载</a><br /><a name="回来"></a><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><img  src="image.png" border="1"    style="max-width:90%"  style="max-width:90%" alt="什么是HTML?关于html的具体介绍" ><br /><a href="#回来">回到顶部</a> <!--#表示使用本地超链接--></body></html>
登录后复制

表格


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格标签</title></head><body><!--cellpadding是文字距离内边框的距离,cellspacing是内边框和外边框的距离--><table border="1" cellspacing="0" width="200">
    <tr> <!--tr表示行-->
        <th>姓名</th> <!--表头,自带居中和加粗-->
        <th>年龄</th>
    </tr>
    <tr>
        <td>小红</td> <!--td表示列-->
        <td>13</td>
    </tr>
    <tr>
        <td>小强</td>
        <td>15</td>
    </tr></table></body></html>
登录后复制
登录后复制

什么是HTML?关于html的具体介绍

border是最外边的蓝线的宽度,不要理解成了内外边框的距离,cellspacing才是。

框架标签

如用一个页面来显示3个页面,共需要四个。用4.html来显示其他三个

4.html


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><frameset rows="30%, 70%"> <!--上下比例3:7-->
    <frame src="1.html" /> <!--占了30%-->
    <frameset cols="30%, 70%"> <!--左右比例3:7-->
        <frame src="2.html" /> <!--占30%-->
        <frame src="3.html" name="_mine"/> <!--占70%,name为_mine,方便点击2.html中的超链接转到3.html中显示-->
    </frameset></frameset></html>
登录后复制

1.html


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><h1>首页</h1></body></html>
登录后复制
登录后复制

2.html


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><h1>首页</h1></body></html>
登录后复制
登录后复制

3.html


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格标签</title></head><body><!--cellpadding是文字距离内边框的距离,cellspacing是内边框和外边框的距离--><table border="1" cellspacing="0" width="200">
    <tr> <!--tr表示行-->
        <th>姓名</th> <!--表头,自带居中和加粗-->
        <th>年龄</th>
    </tr>
    <tr>
        <td>小红</td> <!--td表示列-->
        <td>13</td>
    </tr>
    <tr>
        <td>小强</td>
        <td>15</td>
    </tr></table></body></html>
登录后复制
登录后复制

表单标签


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表单</title></head><body><!--form标识表单范围-->
    <form action="#"> <!--action决定提交的位置,还没学服务器,先提交给自己,没什么意义-->
        <!--input            type:决定输入类型            name:提交的键            size:文本输入框的长度            maxlenght:显示文本框输入长度(能输入的字符个数)            readonly:只读,不能修改,不影响提交            disable:禁用,被禁用的表单项不会提交。所有的input属性都能用             form            action:提交的地址            method:提交的方法                get:                1、将键值对拼接在url地址                2、安全性不太好                3、提交的长度有限                post:                1、参数不在url地址                2、安全性比较好                3、理论上提交长度没有限制            -->
        用户名:<input type="text" name="username" value="admin" disabled="disabled"/><br /> <!--name提交的键-->
        密码:<input type="password" name="password"/><br /> <!--name提交的键-->
        性别:男<input type="radio" name="sex" value="male" />女<input type="radio" name="sex" value="female"><br /> <!--name提交的键-->
        爱好:抽烟<input type="checkbox" name="habit" value="smoke">
             喝酒<input type="checkbox" name="habit" value="drink">
             吃零食<input type="checkbox" name="habit" value="eat"><br />
        学历:<select name="edu" >
            <option value="zk">专科</option>
            <option value="bk">本科</option>
            <option value="yjs">研究生</option>
            <option value="bss">博士生</option>
        </select><br />
        个人说明:<textarea rows="10" cols="30" name="desc">这家伙很懒,什么都没留下</textarea><br />
        近照:<input type="file" name="file"><br />
        <!--隐藏了但是能提交-->
        <input type="hidden" name="haha" value="heihei">
        <input type="submit" /><input type="reset" />
    </form></body></html>
登录后复制

meta标签


<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!--指定字符集--><meta http-equiv="Refresh" content="3;url=https://www.baidu.com"> <!--3秒刷新并定向到百度-->
登录后复制

以上就是什么是HTML?关于html的具体介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号