HTML标签学习

HTML基础学习(新收获)

通过再一次学习HTML的知识,有了更多的收获,发现了更多之前没有注意到的知识点,在学习HTML5中通过使用标签将代码封装起来使结构更加清晰

  • HTML Section学习

- <hgroup></hgroup> 封装h标签
  - <header></header> 包含任何内容,通常修饰文档或文章的标题
  - <footer> 标签通常包含文档的摘要信息部分或者作者,版权信息
  - <section></section> 适用于对文档进行分块,将文档划分为章节,或者对文章分内容块(包含h1~h6中的标题元素,一般不用包含header和footer标签)
  - <article></article> 特殊的section标签,将文档或文章中的内容划分为相对独立的模块(一般包含header标签和footer标签)
  - <nav></nav> 代表一个部分包含链接
  - <detail></detail> 描述某个文档或者部分模块的细节,配合使用<summary> 标签可为details 定义标题,点击标题则显示detail内容
  - <aside></aside> 设置将与文本相关的显示在内容外
  - <figure> 表示网页上一块独立的内容,其中可用figuretion修饰标题,且只能包含一个

  • TEXT 相关标签

- <blockquote></blockquote> 缩进
  - <pre></pre> 按照pre中显示内容,保留空格及换行
  - <abbr></abbr> 包含一段文本的缩写,使用title属性扩展缩写的文本
  - <bdi></bdi> 把包含的内容从周围的文档中隔离出来
  - <bdo></bdo> 覆盖当前文本的方向 以相反的方向展示文本
  - ````<cite></cite>引用的标题,像书、文章或电影,并以斜体的形式展现   -<code></code>定义计算机代码   - <del></del> 将其包含的内容标记为删除,使用cite属性指向另一个文档解释删除原因,datetime属性显示删除时间   - <dfn></dfn> 定义一个词或者短语,并解释意义   -<em></em>强调   - <kdd></kdd> 文本从键盘键入,经常用在与计算机相关的文档或手册中   - <mark> 表示包含的文本被高亮标记   -<q>``` 内容从其他来源,cite属性表明内容来源
  - <ruby> </ruby>包含ruby注释其中rt 标记ruby标签里面内容的注释、rp 定义不支持ruby元素的浏览器所显示的内容
  - <s></s> 标记不再使用或者不再正确的内容
  - <sample></sample> 定义样本文本
  - 定义上标 / 定义下标
  - <time></time> 定义时间

  • 列表

- 普通列表

<dl>
     <dt>
        <dd></dd>
     </dt>
</dl>

- 无序列表

<ul>
        <li></li>
</ul>

- 有序列表

<ol>
        <li></li>
</ol>
  • 表格

<table>
    <theader>定义表格的页头
        <tr>
            <th></th>
        </tr>
    </theader>
    <tbody>定义表格的主体
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>定义表格的页脚
        <td></td>
    </tfoot>
</table>
  • td标签中通过header属性的设置可将单元格与标题关联起来
  • <colgroup> 将列进行组合,在<head></head> 中设置样式
  • <caption> 设置表格的标题
  • 表单

<form method="" action="URL" accept-charset=“ ” autocoplete=“ ” targe = " ">
    name:<input name="name"  type =" "/>
    <button>submit</button>
</form>
  • method:设置如何发送表单数据,分为两种方式"post"(分段传输,安全)和"get"(一次性传输,不安全),默认为"get"方法
  • accept-charset :设置服务器用哪种字符集处理表单数据。常用的字符集为:(UTF-8:Unicode字符编码)、 (ISO-8859-1:拉丁字母表的字符编码)、(gb2312:简体中文字符集)
  • autocomplete :设置是否开启表单自动填写补全功能,默认为"on"
  • target : 设置在何处打开action属性的URL。
        _blank 在新的窗口中打开
        _self 默认。在相同的框架中打开
        _parent 在父框架集中打开
        _top 在整个窗口中打开
        framename 在指定的框架中打开
  • <label> 给表单或者其他元素添加文本属性
  • <FieldSet> 将表单中的相关内容分组,添加disabled属性 设置禁用一组表单,使其不可点击
  • <legend> 给表单中的每个组添加描述信息
  • input属性
  • placeholder: 文字占位符
  • value: 输入框中显示的文字
  • size: 表示输入框可以展示字符的长度
  • maxlength: 表示输入框最大长度
  • disabled、readonly :表示不可编辑的文本输入框
  • autofocus : 自动将光标聚焦在已设置的输入框中
  • password :密码输入框
  • button :按钮类型
  • number:数字输入框,min、max最小值、最大值
  • range :范围输入框 ,min、max最大值和最小值
  • checkbox (radio):选项输入框
  • email :邮箱输入框
  • tel :电话输入框
  • date :日期输入框
  • time :时间输入框
  • color :颜色输入框
  • search :搜索输入框
  • hidden : 隐藏输入框,隐藏需要上传的数据
  • <datalist> 文本框创建展示列表
    <code>
    <form>
    names: <input list="list" />
    </form>
    <datalist id="list">
    <option value="A" />
    <option value="B"></option>
    <option value="C"/>
    </datalist>
    </code>
  • 选择输入框
    <code><select id="char"name="char">
    <option value="A" >A</option>
    <option value="B" >B</option>
    <option value="C" selected >C</option>
    <option value="D" >D</option>
    </select></code>
    <optgroup></optgroup>:把选项相关的组合在一起
  • <textarea></textarea>:创建可以输入多行文本的文本框
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,137评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,824评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,465评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,131评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,140评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,895评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,535评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,435评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,952评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,896评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,552评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2 357

推荐阅读更多精彩内容

  • 序言 整理谷歌的小弟的笔记,版权归原作者所有,本文仅作整理,原文链接:http://blog.csdn.net/l...
    在代码下成长阅读 1,147评论 1 5
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,251评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,675评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 秋去冬雨煮了时光 花亦尽、叶做泥裳 柿子红、挂在高高的树上 染色了故乡 跟着脚步走在田垅旁 雅俗共赏 像春光尾随整...
    冰梦云天阅读 194评论 1 5