当前位置：首页 > 技术分享 > 正文内容

HTML01

冰凉2022-09-28 14:00技术分享2

1.基本的HTML标签

1.1 html标题

HTML的标题是通过<h1>-<h6>等标签定义的

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

注释：从<h1>最大到 <h6>最小

1.2 html段落

html的段落标签是通过<p>标签来定义的

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

1.3 html超链接

html超链接是通过<a>标签来定义的

<a href="http://www.azplstudio.top">点我跳转</a>

注释：在href属性后指定链接地址。

1.4 html的图像标签

html的图像是通过<img>来定义的

<img src="azpllogo.jpg" width="104" height="142" />

注释：图像的名称和尺寸是以属性的形式提供的。

2.HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
<p>	hello world！	</p>
<a href="http://www.azplstudio.top">	点我跳转	</a>

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

2.1HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
2.2 HTML 的嵌套元素
HTML文档
```
<html>

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

</html>
```
上面的例子包含了三个HTML元素

2.3HTML 实例解释

<p> 元素

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

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：这是一个段落。

<body>元素

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

<body> 元素定义了 HTML文档的主体。

它有开始标签<body>,和一个结束标签</body>。

元素内容是另外一个元素<p>.

<html> 元素

<html>

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

</html>

<html> 标签定义了这个是html类型文档

这个标签也有一个开始标签 <html> 和结束标签</html>

上面的例子包含了另外一个标签<body>

注释：不要忘记了结束标签就算没有写结束标签浏览器也会显示出来，但是会产生不可预料的错误

2.4 使用小写标签

虽然HTML 标签对大小写不敏感，<P> = <P> 当然更推荐你使用小写标签。

3 HTML标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

应该将h1 用做主标题（重要的），其后是h2 (次重要的)，再其次就是h3,以此类推

3.1 HTML 水平线

<hr>标签在html 页面中可以创建一个水平线

hr标签可用于分割内容

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

3.2 HTML注释

可以将注释插入HTML代码中，这样可以提高可读性

<!-- 我被注释掉了 -->

合理地使用注释可以对未来的代码编辑工作产生帮助。

标签	描述
<html>	定义HTML 文档
<body>	定义文档主体
<h1> - <h6>	定义标题
<hr>	定义水平线
<!--...-->	定义注释

3.HTML 属性

HTML 标签可以拥有属性。属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性实例

<a href="http://www.azplstudio.top">这是一个例子</a>

上面的例子中<a>标签定义链接的地址在href属性中指定

属性例子1:

<h1>定义标题的开始

<h1>附加了一个对齐的方式属性。

属性例子2:

<boby>定义HTML文档的主体。

<body bgcolor="yellow">此属性更改了背景颜色。

属性例子3:

<table>定义HTML 表格

<table boder="1">此属性给表格添加了边框

属性值要加引号如果在某种情况下比如属性本身就含有双引号，那么必须使用单引号

属性	值	描述
class	classneme	规定元素的类名
id	id	规定元素的唯一id
style	style_definition	规定元素的行内样式
title	text	规定元素的额外信息

3.1HTML样式

style

style属性用于改变html元素的样式

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">1111111</h2>
<p style="background-color:green">11111111</p>
</body>

</html>