三、Html常用标签_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:45:15
原创
1528人浏览过

  • 1,基本标签
  • :html文档的根元素,可以指定一个xmlns属性,值只能是http://www/w3.org/1999/xhtml。
    :页面主体部分
    :页面开始部分

    2,

    可以包含,但是不能包含

    ,但是

    可以包含所有的东西,实际中
    也使用最多。


    以下是一份包含上面标签的html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Html基本标签</title></head><body>	<!-- 标题一到标题6输出文本 -->	<h1>林肯公园</h1>	<h2>林肯公园</h2>	<h3>林肯公园</h3>	<h4>林肯公园</h4>	<h5>林肯公园</h5>	<h6>林肯公园</h6>	<!-- 输出换行 -->	<br />	<!-- 输出一条水平线 -->	<hr />	<!-- 使用span定义3个节 -->	<span>不换行</span><span>不换行</span><span>不换行</span>	<!-- 使用div定义3个节 -->	<div>换行</div><div>换行</div><div>换行</div>	<!-- 使用p定义3个段落 -->	<p>换行</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>
                        <div class="aritcle_card">
                            <a class="aritcle_card_img" href="/ai/2179">
                                <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680176330664.png" alt="慧中标AI标书">
                            </a>
                            <div class="aritcle_card_info">
                                <a href="/ai/2179">慧中标AI标书</a>
                                <p>慧中标AI标书是一款AI智能辅助写标书工具。</p>
                                <div class="">
                                    <img src="/static/images/card_xiazai.png" alt="慧中标AI标书">
                                    <span>120</span>
                                </div>
                            </div>
                            <a href="/ai/2179" class="aritcle_card_btn">
                                <span>查看详情</span>
                                <img src="/static/images/cardxiayige-3.png" alt="慧中标AI标书">
                            </a>
                        </div>
                    <p>换行</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p><p>换行</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p></body></html>
    登录后复制



  • 2,文本格式化标签
  • :粗体文本
    :斜体文本
    :强调文本
    :大号字体文本
    :粗体文本
    :小号字体文本
    :上标文本
    :下标文本
    :定义文本的显示方向。这个标签可以指定dir属性,该属性值只能是ltr和rtl。
    以下是一份包含上面标签的html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>文本格式化标签</title></head><body>	<span><b>加粗的文本</b></span><br />	<span><i>斜体的文本</i></span><br />	<span><b><i>加粗的斜体文本</i></b></span><br />	<span><em>被强调的文本</em></span><br />	<span><big>大号字体文本</big></span><br />	<span><small>小号字体文本</small></span><br />	<span><strong>加粗的文本</strong></span><br />	<span>普通的文本<sup>上标文本</sup></span><br />	<span>普通的文本<sub>下标文本</sub></span><br />	<bdo dir="ltr">指定文本内容从左到右,left to right么</bdo><br />	<bdo dir="rtl">指定文本内容从右到左,right to left</bdo></body></html>
    登录后复制



  • 3,超链接
  • :超级链接。页面使用超链接,与网络中的另外一个资源保持关联,当用户点击页面上的超级链接时,浏览器会定义到该浏览器链接所指的资源。关于这个标签有2个属性很重要:
    href:指定超链接所关联的另一个资源。这里的属性值可以是相对路径,也可以是绝对路径。指定了这个属性,超级链接位置上鼠标移过去就变成了手势图标了,而且字体也变色了。
    target:指定使用框架集中的哪一个框架来加载资源。一般有_self(自身),_blank(新窗口),_top(顶级框架),_parent(父框架)
    注意:当href的属性值指定的是绝对路径时,属性值就是一个URL。关于url不多说了,他的语法规范是:
    scheme://host.domain:port/path/filename


    标签还可以生成一个命名锚点。命名锚点用于在html中生成一个定位点,这样子允许超级链接链接到指定页面的该定位点。通俗点就是说要是没有锚点的话每次页面链接过去呢,都是在最上面开始显示,假如一个页面很长的话,那么我们就要自己去拖拉和滚动。定位了一个锚点呢,就是页面一下子就跳到了指定的这个地方了,不用再拖拉页面了。
    比如
     这里的name属性就是说该命名锚点的名称

    这里就是说在url资源后指定了锚点名,锚点名和url资源之间用#隔开。


    以下是一份包含上面标签的html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>超链接</title></head><body>	<a href="http://www.baidu.com">使用绝对路径打开百度(自己的窗口)</a><br />	<a href="http://www.baidu.com" target="_blank">使用绝对路径打开百度(新的窗口)</a><br />	<a href="Park.html">使用相对路径打开自己的文件</a><br />	<a href="Park.html#linkin">直接定位到linkin锚点</a></body></html>
    登录后复制


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Park.html</title></head><body>	<h1>这里是另外的一个页面</h1>	<hr />	<h1>这里是另外的一个页面</h1>	<hr />	<a name="linkin">这里定义了一个锚点</a></body></html>
    登录后复制



    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

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