html基本元素

比较好的学习链接

比较好的学习链接
这个总结的更加全面

块级元素和行内元素

1.行内元素
详细解释

一个行内元素只占据它对应标签的边框所包含的空间。
示例
<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>

这里的span就是行内元素,他不会另起一行,
2.块级元素

块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”
示例
<p>This is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>

说明:
格式
默认情况下,块级元素会新起一行,而行内元素不会新起一行。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
一般情况下,行内元素只能包含数据和其他行内元素。

这里的p就是块级元素
块级元素只能出现在(<body>)中,不像行内元素可以出现在<head>等当中

基本元素介绍

1.基础元素:无论在什么 HTML document 里,基础元素都是其骨干。文档的根(root),其余都是这元素的后代
2.文档元素:源数据,文档的编码等内容,说明性的东西

<base>    HTML中的Base元素(<base>)指定文档里所有相对URL地址的基础URL。一份文档最多一个<base>元素。
<head>    HTML Head 元素 (<head>) 规定文档相关的通用信息(元数据),包括文档标题、样式或脚本的链接或定义。
<link>    HTML 中<link>元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
<meta>    HTML Meta 元素 (<meta>) 用来表达任何其他 HTML 元相关元素 (<base>, <link>, <script>, <style> 或者 <title>) 等无法表达的信息。
<style>    HTML的<style>元素包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内,通常是CSS的格式。
<title>    HTML <title> 元素 定义文档的标题,显示在浏览器的标题栏或标签页上。它只可以包含文本,若是包含有标签,则包含的任何标签都不会被解释。

3.内容分区

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>    标题(Heading)元素有六个不同的级别,<h1> 是最高级的,而 <h6> 则是最低的。 一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用,例如,自动构造某个文档中的内容表(就

4.文本内容


<div>    HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)
<dd>   用来指明一个描述列表  (<dl>) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个 <dt> 元素。
<dl>    描述列表元素  是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。
<dt>    用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素, 然而,多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。

<ol>  或者 HTML 有序列表 Element  表示多个有序列表项。
<li>    HTML 列表条目元素   用于表示列表里的条目。它必须被包含在一个父元素里:一个有顺序的列表(<ol>),一个无顺序的列表(<ul>)

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

5.脚本和图片以及超链接

<script  src="脚本文件名"> <script src="jquery.js">  引入脚本文件
<script type="text/javascript">  自定义脚本文件
<image src = ""> html 中的图片
<a href="https://developer.mozilla.org">MDN</a> 通过href 属性定义了一个超链接,点击会进行跳转

6.表单
表单元素有

  • <form> 表示了文档中的一个区域,这个区域中包含有交互控制元件,用来像web服务器提交信息
  • <input>输入文本框,根据其特性,也可能是按钮型显示
  • <button>按钮
  • <lable>定义一个标记
  • <option>:定义下拉悬着
    -<select>:下拉框悬着性的东西
    -<textarea>:文本区,文字是可以换行的,相对input可以展示的东西更多
<!-- 一个简单的表单,这个表单会发送一个 GET 请求 -->
<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>
 
<!-- 一个简单的表单,发送 POST 请求 -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>
 
<!-- 使用 fieldset, legend, and label 的表单 -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

效果:

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

效果:

更多表单的实例

  1. 单选按钮
  2. 复选框
  3. 简单的下拉列表
  4. 预选下拉列表
  5. 文本域
  6. 创建按钮

7.表格

<table>表格最外层
<thead><td></td><td></td></thead>表头
<tbody>表格体,不定义的话浏览器会默认加上
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>

8.框架元素
框架元素有ifame ,在页面中嵌入其他页面

<body>

<iframe src="http://www.runoob.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

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

推荐阅读更多精彩内容