HTML常用标签

标签这一波我学了三天,把记得笔记整理一下。

一、HTML的版本

  • HTML 4.01
  • XHTML
  • HTML 5
  • HTML 5.1

他们规定的区别主要在于:

  1. 文档的开头声明不一样,HTML的比较简单好记。
    <!DOCTYPE html>
    <html>
     <head></head>
     <body></body>
    </html>
    
  2. 规定的标签不一样,有些继承下来了,有一些被淘汰掉了。

HTML只是写出页面的内容,只是内容,页面的样式由css决定。但要注意标签的语义化。
如果想查询html的标签,可以去MDN官方网站查询(需要FQ)
中国的W3school也不错

二、常用标签

标签元素分为 块级元素(block-level element) and 内联元素(inline element) 强制切换 display:block/inline

<a> 跳转链接
<img> 图片标签 <img src="URL.png" alt="图片"> alt表示在图片 加载失败 后显示的文字
<hr>水平分割线
<br>强行分行
<dl>描述列表

<dl>    描述列表
 <dt>名字</dt>   <dd>定义</dd>
 <dt>名字</dt>   <dd>定义</dd>
</dl>

<title>网页的标题
<nav>导航条/栏
<ul> / <ol>无序列表 / 有序列表 元素中每一项用<li>来表示
<div>划分区域的元素;无意义;用的时候最好用class属性来标注;块级元素
<main>网页独一无二的主体部分;
<footer>页脚;也可用于<div>中,称之为“div脚”
<strong>文档中重要的部分
<bold>简单的加粗,无语义上的意思
<input>可交互控件
<iframe>内联框架元素
< !-- 注释 -->注释
<section>章节
<select> 下拉列表

<select name="group">   / 列表起名字
  <option value=""> </option>        / 空的列表
  <option value="1">列表一</option>     / 命名是1
  <option value="2">列表二</option>     /  命名是2
  <option value="3" disabled>列表三</option>      / disabled表示不许选择
  <option value="4" selected>列表四</option>      / selected 默认选择这个

三、<a>、<form>、<input>的用法

  • <a>标签的用法

    1. <a href="URL">xxx</a>常规用法 点击xxx跳转到URL
    2. <a href="//qq.com">QQ</a>无协议写法,浏览器自动补全。
    3. <a href="/xxx.html">xxx</a>跳转路径
    4. <a href="#top">跳转顶部</a> 跳转到页面顶部
    5. <a href="JS代码"></a> 点击直接执行js代码
      <a href="jacascript:;"</a> 点击后什么都不做)
  • <form>标签

表示了文档中 的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

如果<form>标签中没有<input> submit按钮/<button>,就无法提交。

<form action="" method="get">     / get类型,提交数据
  <input type="text" name="username">       /控件类型是文本,名字是用户名
  <input type="password" name="password">        /控件类型是密码,名字是密码
  <input type="submit" value="提交">           /控件类型是submit按钮,点击时,表单提交。
</form>

form表单 提交的时候也有 target属性 ,效果和<a>中是一样的。

  • <input>标签

空元素;可交互控件;

  • checkbox 多选框
  • radio 单选框
  • submit 提交按钮
  • button 单纯的按钮
  • text 文本框
  • password 密码框

在选择的时候点击文字进行选择 <label><input type=checkbox>选项文字</label>

*如果想要提交数据,必须用form表单提交 动词:post *

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

推荐阅读更多精彩内容

  • HTML 常用标签 Iframe标签 HTML内联框架元素 表示嵌套的浏览上下文, 有效地将另一个HTML页面嵌入...
    YjjTT阅读 427评论 0 0
  • 一、常用标签 1. iframe 标签 嵌套页面。需要新开一个窗口,速度比较慢。 iframe 直接使用 直接打开...
    养乐多__阅读 601评论 0 5
  • 这篇文章将简单介绍几个在HTML常用的标签:iframe标签、a标签、form标签、input标签、button标...
    宣泽彬阅读 356评论 0 0
  • 学习目标: 了解html的基本结构 掌握标题标签: 掌握段落标签: 掌握通用块标签: 掌握图片标签: 掌握超链接标...
    husky_1阅读 2,526评论 0 12
  • 空标签 含义:标签里面不能有内容。在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。HTML中有以下空标...
    邹沁龙阅读 3,029评论 0 0