自学内容网 自学内容网

HTML学习

一、HTML的基本构成

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>星星(xingxing.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>

<a href="https://www.runoob.com">这是一个链接</a>

<img src="/images/logo.png" width="258" height="39" />
 
<body>
</html>
  1. 声明是HTML5的文档
  2. 和是整个网页内容根元素、,也就是网站的开始和结束
  3. 和是头部的元素,代表头部的开始和结束
  4. 也就代表网站的编码类型是utf-8类型
  5. 星星(xingxing.com)就是网站的URL,你的域名
  6. 网站内容的开始和结束
  7. 内容的第一个标题
  8. 网站内容的段落
  9. HTML网站链接
  10. 网站的图像用img定义

提示:使用小写标签

HTML 标签对大小写不敏感:

等同于

。许多网站都使用大写的 HTML 标签。

因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

二、HTML元素

开始标签 *元素内容结束标签 *
<p>这是一个段落</p>
<a href=“default.htm”>这是一个链接</a>
<br>换行</br>

所有标签都是HTML元素

三、HTML属性

HTML 属性

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

属性实例

<a href="http://www.runoob.com">这是一个链接</a>

href属性附加了网站的连接 ,又赋值给了这是一个链接的文字上面,从而用户点击这个文字就会跳转到这个网站的链接上面

四、HTML标题

HTML 水平线


标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML 注释

用于HTML代码的注释,并不会在实际页面显示出来。这样可以提高其可读性,使代码更易被人理解。

<!-- 这是一个注释 -->
<!-- hello -->

五、HTML段落

标签描述
<p>定义一个段落
<br>插入单个折行(换行)

不要忘记结束标签

即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:

HTML 折行


标签:自动跳转到下一行

<p>这个<br>段落<br>演示了分行的效果</p>


元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

六、HTML文本格式化

HTML 格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML “计算机输出” 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

七、HTML链接

HTML 链接语法

文本链接:最常见的链接类型是文本链接,它使用 元素将一段文本转化为可点击的链接,例如:

<a href="https://www.example.com">访问示例网站</a>

图像链接:您还可以使用图像作为链接。在这种情况下, 元素包围着 元素。例如:

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

锚点链接:除了链接到其他网页外,您还可以在同一页面内创建内部链接,这称为锚点链接。要创建锚点链接,需要在目标位置使用 元素定义一个标记,并使用#符号引用该标记。例如:

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

下载链接:如果您希望链接用于下载文件而不是导航到另一个网页,可以使用 download 属性。例如:

<a href="document.pdf" download>下载文档</a>

原文地址:https://blog.csdn.net/dingxingaq/article/details/143749393

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!