美文网首页
HTML常用标签(二)

HTML常用标签(二)

作者: 耳_总 | 来源:发表于2017-03-24 17:27 被阅读38次
    段落标签 P
    <!--font 标签属性设置文本的字体的大小和颜色,标签包裹的文字为作用域-->
    <p> 前<font color="red" size="12"> font标签</font>后</p>
    
    加粗标签strong、b
    <!--strong 、b标签加粗文本-->
    <p> 文本 <strong>strong 加粗文本</strong>  <b>b标签加粗文本</b></p>
    
    01.png
    超链接标签 a标签
        <a href="http://www.baidu.com" title="a标签超链接,_self" target="_self">a标签超链接,_self</a>
        <a href="http://www.baidu.com" title="a标签超链接,blank" target="_blank">a标签超链接,blank</a>
    
    

    a标签的href属性表示将要跳转的链接(也可以是本地文件),target属性_self表示在当前的窗口跳转,覆盖当前窗口,_blank表示新建一个窗口。
    如果要在页面的全局设置则在body标签外面设置base标签的target属性就行
    跳转的内容可以使文字、图片,如下代码:

    <base target="_self">
    <body >
        <a href="01.html" title="a标签超链接,_self" target="_self">a标签超链接,_self</a>
        <a href="http://www.baidu.com" title="a标签超链接,blank" target="_blank">a标签超链接,blank</a>
        图片作为跳转内容
        <a href="http://www.baidu.com" title="a标签超链接,blank" target="_blank">![](1.png)</a>
    </body>
    
    

    假如这样书写链接:href= "http://www.w3school.com.cn/html" ,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样href="http://www.w3school.com.cn/html/"。

    • 另外还可以发送邮件
    <p>
    这是邮件链接:
    <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
    </p>
    
    • 利用超链接标签实现锚链接
      网页的返回顶部功能和目录导航等功能
    <body>
        <p id="top"></p>
        <p>dfdfdfdfdfdf</p>
        <br>dfdfdfdfdf</p>
        ...
        <br>
        <a href="#top">返回顶部</a>
    </body>
    

    '#top'表示id为top的标签

    • 简单下载功能
    <a href="girl.zip">这里是打包好的高清无码的图片</a>
    

    只要在href属性里面填写文件的路径就行了,.zip、.png等等

    • a标签有许多的属性:查看
    HTML DOM Anchor 对象

    Anchor 对象表示 HTML 超链接。
    在 HTML 文档中 a 标签每出现一次,就会创建 Anchor 对象。
    锚可用于创建指向另一个文档的链接(通过 href 属性),或者创建文档内的书签(通过 name 属性)。
    您可以通过搜索 Document 对象中的 anchors[] 数组来访问锚,或者使用 document.getElementById()。

    详情请看

    列表标签

    clipboard.png
    <!--<table style="border: 1px solid red">-->
        <table  border="1" cellspacing="0" cellpadding="5" width="300" bordercolor="red" >
            <tr>
                <th colspan="3">Month</th>
                <!--<th>Save</th>-->
                <!--<th>Hello</th>-->
            </tr>
            <tr>
                <td>
                    <ul type="circle">
                        <li>dddd</li>
                        <li>dddd</li>
                        <li>dddd</li>
                    </ul>
                </td >
                <td rowspan="2">$1000</td>
                <td>
                    <!-- 有序列表 -->
                    追女朋友的步骤
                    <ol type="1" start="1">
                        <li>故意制造邂逅</li>
                        <li>索要联系方式</li>
                        <li>搞定女孩她娘</li>
                        <li>女孩子到手了</li>
                    </ol>
                </td>
            </tr>
    
            <tr>
                <td>
                    xxxxxxx
                </td >
                <!--<td>$1000</td>-->
                <td>
                    xxxxxxx
                </td>
            </tr>
    
        </table>
    
        <!-- 自定义列表 -->
        <dl>
            <dt>售后服务</dt>
            <dd>产品维修</dd>
            <dd>补开发票</dd>
            <dd>技术支持</dd>
            <dd>相关政策</dd>
    
            <dt>关注我们</dt>
            <dd>官方微信</dd>
            <dd>技术网站</dd>
            <dd>售前咨询</dd>
            <dd>联系地址</dd>
        </dl>
    
    3.png
    • cellspacing 表格单元格之间的间距
    • td 的colspan属性表示合并表格的行,rowspan表示合并单元格的列
      属性值表示从自己起合并几个单元格
    • ul :无序列表,type属性代表前面的图标
    • ol:有序列表 start表示从哪个开始

    嵌入标签

    <embed src="song.mp3" hidden ="true"/>
    

    滚动标签

    <marquee behavior="slide" direction="up" 
                     width="500" height="500" bgcolor="pink"> 
              ![](girl.jpg)
            </marquee>
    

    在<marquee> </marquee>标签中利用width,height,bgcolor属性设置滚动区域的大小和背景颜色;利用behavior属性设置了滚动的方式其值可取scroll、slide、alternate;利用direction属性设置滚动的方向其值可取left、right、up、down等值

    元信息标签

    <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

    • 文档编码

    <meta charset="UTF-8">

    • name 属性
    <meta name="keywords" content="html,ccs,web,前端">
    

    name 的值可以有很多种类型author、description、generator、revised等等,keywords一个很常用的属性,可以被搜索引擎捕捉到,将content的内容作为搜索关键字保存。
    content是meta的一个必须属性,他表示对内容的描述,如果有name表示name的内容,默认表示http-equiv的内容,所以说为什么是文档相关的名称/值对

    • http-equiv 属性

    值有:content-type、expires、refresh、set-cookie。http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
    当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
    使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。

    <meta http-equiv="charset" content="iso-8859-1">
    <meta http-equiv="expires" content="31 Dec 2008">
    //五秒后跳转页面
    <meta http-equiv="refresh" content="5;http://www.baidu.com">
    
    • content 属性
      content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
      content 属性始终要和 name 属性或 http-equiv 属性一起使用。

    链接标签

    link标签一般用于连接外部css样式

    <link rel="stylesheet"   href="test.css">
    

    相关文章

      网友评论

          本文标题:HTML常用标签(二)

          本文链接:https://www.haomeiwen.com/subject/rthhnttx.html