首页 > 编程学习 > HTML学习,常用常记(基础,语法,属性,文本格式化,标签,链接)

基础

  • 标题:<h1>……</h1>        h1-h6;
  • 段落:<p>……</p>;
  • 链接:<a href="http://www.runoob.com">点击此处进入菜鸟教程</a>;
  • 图像:<img src="/images/logo.png" width="258" height="39" />;

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

HTML 空元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  • <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
  • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
  • 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法。
  • 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

HTML标签对大小写不敏感,但应使用小写,未来 (X)HTML 版本中强制使用小写;

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

HTML 属性常用引用属性值

属性值应该始终被包括在引号内

双引号是最常用的,不过使用单引号也没有问题

个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号

HTML 标签参考手册

水平线:<hr>;

注释:<!--……-->;快捷键注释:Ctrl + k + c;

注意标题大小与字体大小的关系:1到6号标题与1到6号字体逆序对应;

换行:<br>;

  • 在 HTML 中,<br> 标签没有结束标签。
  • 在 XHTML 中,<br> 标签必须被正确地关闭,比如这样:<br />。

浏览器会移除源代码中多余空格和空行,所有连续空格或空行都会被算作一个空格;

格式化标签

  • 加粗:<b>……</b>;
  • 斜体:<i>……</i>;
  • 电脑自动输出:<code>……</code>;
  • 上标:<sub>……</sub>;
  • 下标:<sup>……</sup>;
  • 放大:<big>……</big>;
  • 缩小:<small>……</small>;
  • 预格式文本:<pre>……</pre>;    !!!

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而,这些标签的含义是不同的:

  • <b> 与<i> 定义粗体或斜体文本
  • <strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示

“计算机输出”标签(计算机,键盘,打字机,计算机代码,计算机变量);

地址标签(斜体,<address>……</address>);

缩写和首字母缩写;

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  

块引用:<q>……</q>;

删除线:<del>……</del>;

下划线:<ins>……</ins>;

<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a><p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p><p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>在当前页面跳转到指定位置</p><p>
<a href="#C4">查看章节 4</a>
</p><h2>章节 1</h2>
<p>这边显示该章节的内容……</p><h2>章节 2</h2>
<p>这边显示该章节的内容……</p><h2>章节 3</h2>
<p>这边显示该章节的内容……</p><h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p><h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<p>跳出框架</p> 
<a href="http://www.runoob.com/" target="_top">点击这里!</a> 

创建电子邮件链接;创建电子邮件链接2;


本文链接:https://www.ngui.cc/el/2274578.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000