栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

HTML(1)

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

HTML(1)

1、什么是HTML

        HTML全称为HyperText Mark-up Language(超文本标签语言),标签也可以被称作为标记或者元素。HTML是目前网络上应用最为广泛的技术之一,是构成网页文档的主要基石之一。

        超文本标记语言是万维网编程的基础。超文本标记语言之所以被成为超文本标记语言是建立在超文本基础之上的,是因为文本中包含了所谓超级链接和存在媒体文件。

        HTML不是编程语言,而是一种描述性的语言。HTML的优点:简单灵活,具有可扩展性,平台无关性。

2、HTML的组成

        HTML标签是HTML语言中最基本的单位。标签的大小写是无关的,跟表示的意思是一样的,推荐使用小写。

        标签分为单标签和双标签。

        单标签的形式例如
只需要一个标签。

        双标签的形式例如需要头和尾。

        一个HTML的基本框架为head部分和body部分。



        

        

    元素是所有头部元素的容器, 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

        元素是所有身体元素的容器,正文部分就在此处编写。

           html的注释是用来表示。

        标签都有各自的属性,属性拥有所对应的值。所以编写html文件也就是给标签的属性进行赋值、以及给标签内填写内容。

        

3、HTML常见的标签        

        声明本文档为html5文档

        

         双标签

         标签告知浏览器这是一个 HTML 文档。

        元素是 HTML 文档中最外层的元素,也可称为根元素。

        属性:lang        值:en英文        zh-CN 中文       ja 日文       en-US美式英文

        用来标识这页面是什么类型的语言,浏览器带翻译插件的话检测到这个字段就会提示,是否要翻译。
 



.....

        双标签

        元素是所有头部元素的容器。位于 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息,等等。

       

        双标签

         元素定义文档的主体。

         元素包含文档的所有内容,比如文本、超链接、图像、表格、列表等等。

        

        .....

        

       

        .....

       

        <p>        <title>是一个双标签。</p> <p>        <title> 标签定义文档的标题。<title>标签位于<head>标签之中。</p> <p>例如:</p> <blockquote> <p><head></p> <p>        <title>这里是标题

        标签在浏览器中的导航栏可以看到</p> <p></p> <h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbase%3E">        <base> <p>        <base>是一个单标签</p> <p>        <base> 标签为页面上的所有链接规定默认地址或默认目标(target)</p> <p>        属性:herf             值:URL(网址)</p> <p>        属性:tagrget        值:_blank     _parent   _self  _top  <em>framename</em></p> <p>       基链接对于具有平面目录结构的较小站点,这不会有太大帮助; 但对于具有深度嵌套目录的站点,<base>标记可能会从您的网页中减少很多额外的重量,并且还有助于保持URL更清洁和更短。             </p> <p>        我们将所有图片放入一个文件夹里,在base里的herf赋值为这个文件夹的URL,之后我们再链接其中图片时,就可以使用相对路径(相对于base标签的)来链接。</p> <blockquote> <p><head></p> <p>        <base href="//www.zzy.com/images/"></p> <p>        <base target="_blank" /></p> <p></head></p> <p><body></p> <p>        </p> <p></body></p> </blockquote> <p>        这有效的解决了,在编写html文件时,body部分填写了本地的绝对路径,然后上传至服务器后绝对路径发生改变。</p> <p></p> <h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Clink%3E">        <link> <p>        <link>单标签</p> <p>        <link> 标签定义文档与外部资源之间的关系。</p> <p>        常用来链接外部样式表。</p> <p>        属性:rel(relationship关系)        值:stylesheet等等 必需,用来定义当前文档与被链接文档之间的关系</p> <p>        属性:type                            值:规定被链接文档的 MIME 类型</p> <p>        属性:href                            值:URL</p> <blockquote> <pre class="brush:java;toolbar:false"><head>         <link rel="stylesheet" type="text/css" href="c1.css"> </head></pre> </blockquote> <h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cstyle%3E">        <style> <p>        <style>双标签</p> <p>        <style>标签用于嵌入式的css样式表</p> <blockquote> <pre class="brush:java;toolbar:false"><head>         <style type="text/css">                 body {background-color:yellow}                 p {color:blue}         </style> </head></pre> </blockquote> <h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cmeta%3E%C2%A0">           <meta>  <p>        <meta>单标签</p> <p>        <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。</p> <p>META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。</p> <p>元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。</p> <p>        属性:charset        值:字符编码(UTL-8通用字符集,GBK简体中文字符集加强版,BIG5繁体字符集)          定义当前文档的字符编码</p> <p>        属性:content        值:text        定义与 http-equiv 或 name 属性相关的元信息。</p> <p>        属性:http-equiv        值:content-type        default-style        refresh   把 content 属性关联到 HTTP 头部</p> <p>        属性:name        值:     application-name<br />                                                 author<br />                                                 description<br />                                                 generator<br />                                                 keywords</p> <blockquote> <p><head></p> <p>    <meta charset="UTF-8"></p> <p>    <meta http-equiv="X-UA-Compatible" content="IE=edge"></p> <p>    <meta name="keywords" content="ZZY"></p> <p></head></p> </blockquote> <h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cscript%3E">        <script> <p>        <script>双标签</p> <p>        <script> 标签用于定义客户端脚本,比如 JavaScript。</p> <p>        script 元素即可包含脚本语句,又可通过 src 属性指向外部脚本文件。</p> <p>        必需的 type 属性规定脚本的 MIME 类型。</p> <p>        JavaScript 通常的用途是图像操作、表单验证以及内容动态更改。</p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p></div> </div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明:</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div> <div><span class="gray">本文地址:</span><a href="https://www.mshxw.com/it/1028936.html" class="blue">https://www.mshxw.com/it/1028936.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1028934.html">上一篇 使用Fileupload实现文件的上传(上传到本地)</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1028907.html">下一篇 小甲鱼Python学习笔记5</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>Java相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解(二)设备树语法详解">【Linux驱动开发】设备树详解(二)设备树语法详解</a></li> <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li> <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li> <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流(ObjectOutputStream和ObjectInputStream)">【Java】对象处理流(ObjectOutputStream和ObjectInputStream)</a></li> <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li> <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li> <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍</a></li> <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成</a></li> <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li> <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li> <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li> <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li> <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li> <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口(包含C uci操作)">在openwrt使用C语言增加ubus接口(包含C uci操作)</a></li> <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li> <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li> <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li> <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li> <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li> <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li> </ul> </div> </div> </div> <!-- 公共尾部 --> <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a> <a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a> <a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a> <a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a> <a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a> <a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a> <a href="http://www.mshxw.com/TAG_1/vim.html">vim</a> <a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a> <a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a> <a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a> <a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a> <a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a> <a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a> <a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a> <a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a> <a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a> <a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a> <a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a> <a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a> <a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a> <a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a> <a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a> <a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a> <a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> <div class="dl_ewm"> <div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群"> <p>名师互学网交流群</p> </div> <div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服"> <p>名师互学网客服</p> </div> </div> </div> </div> <div class="copyright"> <p>名师互学网 版权所有 (c)2021-2022 ICP备案号:<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a> </p> </div> </div> <!-- 手机端 --> <div class="m_foot_top"> <img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="https://www.mshxw.com/about/index.html">关于我们</a> <a href="https://www.mshxw.com/archiver/">文章归档</a> <a href="https://www.mshxw.com/sitemap">网站地图</a> <a href="https://www.mshxw.com/about/contact.html">联系我们</a> <p>版权所有 (c)2021-2022 MSHXW.COM</p> <p>ICP备案号:<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p> </div> <div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div> <!--广告!--> <script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script> <script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script> <!--头条搜索!--> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <!--头条搜索结束!--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项,自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>