浅谈HTML常用标签

HTML常用标签有:a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg等等。

组成文档结构的标签

主要用来构成整个文档大概的框架:<head>、<title>、<body>、<h1>、<p>、<ul>、<ol>、<li>、<div>、<span>等等。

  • <head><body>标签
    组成整个页面的头和身体,大部分内容放在<body>中,<head>中有一般只有一个标题<title>
  • <h1>标题标签,
    一共有6个从<h1>~<h6>,对应着6级标题,反正够你用了。
    其中<h1>~<h3>对浏览器友好,意思就是这三个标题能够更容易被浏览器搜索到。
  • <p>段落标签(paragraph)
    用来标识一段段落的。
  • <div>盒标签(盒模型)
    我们常说的盒模型就指的<div>,主要作用就是把页面划分成一块一块,就像一个盒子般,里面嵌套其它内容。
  • <span>块标签
    作用类似于<div>,但是<span>是把一行里面的内容分块。
  • <ul><ol><li>列表标签
    <ul><ol>包含几个<li>组成一个列表。
    <ul>(unordered list)无序列表,展现的列表是无序的,<li>前面一般是一个标志。而<ol>(ordered list)是有序列表,<li>前面会自动排序。

多媒体嵌入

主要用来插入一些多媒体内容:<img><video><audio><ifram><svg>

  • <img>插入图片
    src图片的来源。
    alt图片无法正常加载时显示的内容。
    title鼠标悬停在图片上显示的内容。
  • <video>插入视屏、<audio>插入音频
    src视屏来源
  • <ifram>插入网页(少用)
  • <svg>插入画板

文本内容修饰的标签

主要用来修饰文本内容:<a>、<small>、<strong>、<em>等等

  • <a>(anchor锚点)超链接标签(使用GET方法跳转页面)
    可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
    • href属性:
      a. 如果指向域名则跳转对应的域名(http://qq.com) ,如果指向文件(http中存在Content-Type:application)则下载文件。(不支持file协议)。
      b. #锚点,页面跳转后不发起请求,跳转到顶部。
      c. 伪协议:后接一段JavaScript代码,直接实现代码。javascript: alert('1')弹出对话框1,javascript: ;点击后什么都不做。
    • target属性:
      a. "_blank" 在新页面打开
      b. "_self" 在当前页面打开
      c. "_parent" 当存在<ifram>时会在父页面打开
      d. "_top"当存在多个<ifram>(≥3)时,会在最外层页面打开
    • download属性:表示a标签不再跳转链接,而是强制下载文件,href是域名则下载网页。
  • <strong>加粗标签
    表示文本十分重要,一般用粗体显示。不同于<b>标签(同样加粗文本),<strong>强调内容与形式,内容很重要,而<b>强调形式。
  • <small>缩小标签
    使文本的字体变小一号,一般被定义为表示边注释和附属细则。
  • <em>斜体标签
    使文本内容变成斜体,标记出需要用户着重阅读的内容。与<strong>类似,<em>也有一个<i>标签表示斜体。同样的,<em>强调内容与形式,内容很重要,而<i>强调形式。

HTML表单

常用来提交内容:<form><input><button><label>

  • <form>主要用来提交内容(使用POST方法跳转页面,提交的内容放在请求的第四部分)
    1. action属性:发起请求后跳转的页面。
    2. method="post"(默认为GET)使用POST发起请求。
    3. target<a>标签
  • <input>标签
    1. type="submit":提交按钮(如果<form>没有submit则无法提交)
      如果一个只有一个按钮<button>,会自动升级为提交按钮。
      如果该标签明确定义type=“button”,则不会升级,依然为按钮。
    2. type="checkbox"多选框<type=“radio”>单选框
      a. 两者均必须使用 value 属性定义此控件被提交时的值,使用 checked 属性指示控件是否被选择。
      b. <label>标签:通常将按钮囊括在里面,点击囊括在内的任何区域都视为被选择。
      <label><input type="checkbox">爱我</label>当点击爱我时,没有点击按钮,也会被视为被选中了。
      也可以把<label>放在里面将内容囊括起来,利用for属性与id属性达到同样的效果.
      <input type="checkbox" id="xxxx"><label for="xxx">爱我</label>
    3. type="select"下拉菜单选择
      a. <option>标签下拉菜单的选项,selected属性表示默认选择,disabled表示不可选中。
      b. mutiple属性表示多选
    4. type="textarea"输入文本框
      a. resize:none文本框默认宽高不固定,该属性表示固定宽高。一般利用css固定宽高。
      b. height: 100; width: 200;设定文本框宽高,一般利用css固定宽高。
      c. rows:10文本框输入的内容设定的行数。

HTML表格

常用来表示数据(少用):<table>标签里只能有以下标签

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

推荐阅读更多精彩内容