HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签-优快云博客

文章目录

HTML

HTML

概念:是最基础的网页开发语言

Hyper text markup language 超文本标记语言

超文本：超文本是用超链接的方法，将各种空间的文字信息组织在一起的网状文本

标记语言：

有标签构成的语言。<标签名称> 如html,xml
标记语言不是编程语言

快速入门

html文档后缀名.html 或者.htm
标签分为

围堵标签：有开始的标签和结束标签，如,

自闭和标签：开始标签和结束标签在一起，如

标签可以嵌套

需要正确嵌套，不能你中有我，我中有你

错误:
正确：
4. 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可）硬起来
5. html的标签不区分大小写，但是建议使用小写

标签学习：
- 文件标签：构成html最基本的标签

html:html文档的根标签
head：头标签，用于指定html文档的一些属性，引入外部资源
title：标题标签
body：体标签
<！DOCTYPE Html>：html中定义该文档是html文档

- 文本标签：和文本有关的标签

注释：
。
to
：标题标签
h1 - h6 ：字体逐渐减小
:段落标签
:换行标签
:展示一条水平线：属性：
color:样式

width:宽度

size:高度

align:对齐方式：center:居中，left:左对齐，right：右对齐
：字体加粗
字体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>Title</title>
</head>
<body>
<h1><font color="red">
    励志语句
    </font >
</h1>
<hr color="red" width="100%" size="6">
<p>
   1.你不是要做一个单纯优秀的人，而是要做一个不可替代的人。
</p>
　　2.生活不易，全靠演技。把角色演成自己，把自己演到失忆。
<p>
　　3.现在事，现在心，随缘即可;未来事，未来心，何须劳心。
</p>
　　4.关于怎样生活，从来就没有使用说明书。
<p>
　　5.美是一种态度，与年龄无关。
</p>
<hr color="red" width="100%" size="6">
<center><font color="gray" size="2">加油&nbsp哈哈<br>
    pofenx_max_puls_pro_+&copy;,pofenx</font></center>
</body>
</html>

<!DOCTYPE HTML>
<html lang  ="ch">
<head><meta charset=" GBK">
<title>hello</title>
</head>
<body>
世人笑吾太疯癫，<br/>
我笑世人看不穿。<br>
铁马冰河入梦来<br>
<!-- 标题标签 h1 - h6 -->
<h1>铁马冰河入梦来</h1>
<h2>铁马冰河入梦来</h2>
<h3>铁马冰河入梦来</h3>
<h4>铁马冰河入梦来</h4>
<h5>铁马冰河入梦来</h5>
<h6>铁马冰河入梦来</h6>

<p>床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
    床前明月光床前明月光床前明月光</p>
    <p>床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光</p>
    <p>床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光</p>
    <p>床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光</p>
    <p>床前明月光床前明月光床前明月光vvv床前明月光床前明月光床前明月光</p>

<!--hr显示一条水平线 -->
<hr color = "red"width ="200" size = "10" align="left"/>
<!-- 加粗 -->
白日依山尽<br>
<b>白日依山尽</b>>
<!-- 斜体 -->
白日依山尽<br>
<i>白日依山尽</i>
<!--字体标签 font -->
<hr>
<font color="red" size="6" face="楷体">白日依山尽</font>
<font color="#3626F1" size="5" face="楷体">白日依山尽</font>
<hr color="red" width ="50%" size="10" face="楷体">白日依山尽</font>
<hr color ="red" width="50%" size="10" align="legt"/>
<center><font  color="red" size = "5" face="楷体">白日依山尽</font><br></center>
<br>
<br>
<br>
<br>
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="bgk">
    <title>图片标签</title>
</head>
<body>
<img src="image/a.png"  alt="分析" width="300" height="300"/>
<!-- 相对路径，
以.开头
./代表当前目录：./image/a.png
../:代表上一级目录
-->
<img src="./image/a.png">
<img src="../image/a.png">
</body>
</html>

列表标签

有序列表

ol：

li:
无序列表

ul：

li:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>Title</title>
</head>
<body>
<!-- 有序列表 ol -->
早上起床干的事情
<ol type="A" start="5">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ol>
<ul type="disc">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
<ul type="square">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
<ul type="circle">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>

</body>
</html>

链接标签

a:定义一个超链接

属性：

href:指定访问资源的URL（统一资源定位符）

target:指定打开资源方式

_self:默认值，在当前页面打开

_blank:在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连接标签</title>
</head>
<body>
<!-- 超链接 -->
<a href="https://www.baidu.com">点我</a>
<br>
<a href = ”https://www.baidu.com“ target="_self">点我</a>
<br>
<a href = ”https://www.baidu.com“ target="_blank">点我</a>
<br>
<a href = ”/Demo3.html“ target="_blank">点我</a>
<br>
<a href = ”https://www.baidu.com“ target="_blank"><img src ="image/a.png"></a>
</body>
</html>

div span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- div：每一个div占满一行，块级标签
    span：文本信息在一行展示。行标签类，内年标签
<span>pofenx</span>
<span>pofenx——max——pro</span>
<hr>
<div>pofenx——max——pro</div>
<div>pofenx——max——pro</div>
</body>
</html>

语义化标签

html5中为了提高程序的可读性，提供了一些标签
1. -
2. -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>Title</title>
</head>
<body>
<header>
</div>
<h1><font color="red">
    励志语句
    </font >

    </div >
</header>
</h1>
<hr color="red" width="100%" size="6">
<p>
   1.你不是要做一个单纯优秀的人，而是要做一个不可替代的人。
</p>
　　2.生活不易，全靠演技。把角色演成自己，把自己演到失忆。
<p>
　　3.现在事，现在心，随缘即可;未来事，未来心，何须劳心。
</p>
　　4.关于怎样生活，从来就没有使用说明书。
<p>
　　5.美是一种态度，与年龄无关。
</p>
<footer>
<div id ="footer">
<hr color="red" width="100%" size="6">
<center><font color="gray" size="2">加油&nbsp哈哈<br>
    pofenx_max_puls_pro_+&copy;,pofenx</font></center>
</div>
</footer>
</body>
</html>

表格标签

table：定义表格
width：定义宽度
border:边框
cellpadding:定义内容和单元格之间的距离
cellspacing:定义单元格之间的距离，如果指定为0，则单元格的线会合为一条
bgcolor
tr：定义行

bgcolor:背景色

align:对齐方式

td:定义单元格

colspan:合并列

rowspan:合并行

:表格标题
：表示表格的头部分
:表示表格的体部分
：表示表格的脚部分
th：定义单元格表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table  border="1" cellpadding="0" cellspacing="0">
    <tr>

        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>

    </tr>
    <tr>
    <td>1</td>
    <td>pofen</td>
    <td>100</td>
    </tr>
    <tr>
        </th>
        <td>2</td>
        <td>pofe2</td>
        <td>10000</td>
    </tr>
    <tr>
        </th>
        <td>3</td>
        <td>pofen3</td>
        <td>1000</td>
    </tr>
</table>
</body>
</html>