HTML常用标签(二)

段落标签 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">
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容