HTML常用标签

<p>

p是paragraph的缩写,<p>元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,<p> 是块级元素。

<ul>

ul是unorderd list的缩写,<ul>是无序列表,下面跟着<li>,li是list item的缩写,表明列表中的一项。其type属性有:disccirclesquare,默认是disc模式。例如:

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul type="circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>

ol是ordered list的缩写,<ol>是有序列表,下面同样跟着<li>
其type属性有:
'a' 表示小写字母编号;
'A' 表示大写字母编号;
'i' 表示小写罗马数字编号;
'I'表示大写罗马数字编号;
'1' 表示数字编号(默认值)。

<img>

<img src="#" alt="logo"/>
其中src是source的意思,是图像的URL,这个属性对 <img> 元素来说是必需的。
alt是alternative的意思,这个属性定义了描述图像的替换文本,如果图片下载失败了,就用alt中的内容来显示。

<nav>

是导航栏标签,是navigation的缩写,通常里面跟着ul,li标签。

<dl>

dl是description list的缩写,是描述列表标签,dl里面有两个标签,分别是dt和dd
<dt> --> description term 描述词语
<dd> -->description definition 描述定义
例如以下代码:

<dl>
<dt>年龄</dt>
<dd>18</dd>
<dt>所在城市</dt>
<dd>北京</dd>
</dl>

<footer>

是页脚标签,在其中填写内容即可。

<kbd>

kbd是keyboard的缩写,是键盘输入元素。例如:
<kbd>ctrl</kbd>+<kbd>C</kbd>
它就会有一个小键盘的形式写出来。

<main>

呈现了文档或应用的主体部分。用该标签将主体部分包起来。

<section>

开启新的一个章节,也可以用<div>替换。

<iframe>

是嵌套网页的标签,将另一个HTML页面嵌入到当前页面中。
<iframe src='#' frameborder ="0"></iframe> //frameborder ="0"是为了消除iframe中自带的边框
src中是嵌套页面的URL地址。
如果你想要在嵌套的框中打开一个网页,在iframe中写上name属性,该属性配合a标签使用:
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">QQ</a>
此时,点击QQ的链接,则http://qq.com的网页在嵌套的框中打开。
还可以指定iframe的宽高,在标签中写上width和height即可。

<a>

a是anchor的缩写,a标签可以创建一个超链接。
<a href="#" target="_blank" download>我的页面</a>
a标签有一个download属性,就是点击这个链接就会下载href中的东西。
href中是超链接的URL。
target,该属性指定在何处显示链接的资源。
target = -
     _blank //在新的窗口打开
     _self //在自己页面打开
     _parent //在父级页面打开
     _top //最高级页面打开,在有祖孙三代的时候可以体现出来
<a href="#">link</a>    //此时页面锚点变成#,页面滚动到顶部,不发起请求
<a href="">link</a>    //此时当前页面刷新
javascript伪协议
<a javascript: alert(1);>QQ</a>    //当点击QQ这个链接时,就执行js代码
如果希望这个a标签点击之后什么也不做的话,就写成:
<a href="javascript:;">QQ</a>

<form>

form标签和a标签一样,作用都是跳转页面,不同的是a标签发起的是HTTP GET请求,form标签发起的是HTTP POST请求。

<form action="index2.html" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

form 标签的 action属性的作用是指定请求路径,form标签的method属性的作用是指定请求动词。
如果一个form里面只有一个按钮标签<button>,则系统会自动将此按钮升级为提交按钮,点击该按钮,系统提交内容。
如果是input标签,type="button",则不会升级为提交按钮,点击该按钮,系统不会提交内容
一般情况下,有一个form标签,一定要有submit提交按钮。
form中所有标签都要有个name,这样在提交的时候才可以看到该标签的内容
form标签也有target属性,也可以跟-blank , -self , -parent , -top,与a标签作用相同。

<input>

暂时介绍input的两个typecheckboxradiobutton很简单,暂不予介绍。
checkbox   一般用作多选
<input type="checkbox" id="xxx"><label for="xxx">爱我</label>  //点击爱我两个字也可以勾选checkbox
label的for与input的id是相互关联的
也可以用如下方式将它们关联在一起:
<label>爱我<input type="checkbox" name="loveme"></label>
radio   一般用作单选
与checkbox用法差不多
radio用同一个name,则是单选框,只能选一个

<select>

select是下拉框,下面是<option>标签,如果该选项不让选,则写上属性disabled,如果默认选择该选项,则写上属性selected

<select name="group">
    <oprion value="">-</option>
    <oprion value="1">第一组</option>
    <oprion value="2">第二组</option>
    <oprion value="3" disabled>第三组</option>
    <oprion value="4" selected>第四组</option>
</select>

如果想要该下拉框可以多选的话,就可以在select标签中加上属性multiple

<textarea>

表示一个多行纯文本编辑控件。
<textarea style="resize:none; width: 200px; height:100px;" name="habits">爱好</textarea>
textarea是可以随意拉动大小,style中resize:none;是让其固定住,不让它可以随意拉动。

<table>

该标签用于创建一个表格

<table border=1>
    <colgroup>
        <col width=100>
        <col width=200>
        <col width=200>
        <col width=70>
    </colgroup>
    <thead>
        <tr>
            <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th><td>小明</td><td>1</td><td>94</td>
        </tr>
        <tr>
             <th></th><td>小红</td><td>2</td><td>96</td>
        </tr>
        <tr>
            <th>平均分</th><td></td><td></td><td>95</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总分</th><td></td><td></td><td>190</td>
        </tr>
    </tfoot>
</table>

table里面有三个标签,分别是<thead>,< tbody>, <tfoot>
这三个里面分别可以是
<tr>,tr = table row,表示写一行,
<th>,th = table header,是一个表头,
<td>,td = table data,填数据
在table标签中写上border=1,就给表格加了边框
<colgroup>标签中的col是设定列宽的
table的border是可以合并的,在style中写:

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