HTML标签
HTML通过一系列的标签(也成为元素),来定义文本,图像,链接等等,HTML标签是由尖括号包围的关键字。
标签通常成对出现,包括开始标签和结束标签(也成为双标签),内容位于两个标签之间,例如:
<p>这是一个段落</p>
<hl>这是一个标题</hl>
<a href="#">这是一个超链接</a>
除了双标签,也存在单标签,例如:
<input type="text">
<br>
<hr>
区别是:单标签用于没有内容的元素,双标签用于有内容的元素。
HTML的文件结构
<!--这里放置文档的元信息-->
<!DOCTYPE html>
<html>
<head>
<!--这里放置文档的元信息-->
<title>文档标题</title>
<meta charset="UTF-8"> //文件编码的形式
<!--链接外部样式或脚本文件等-->
<link rel="stylesheet" type="text/css" href="styles.css> //外部样式的标签
<script src="script.js"></script>
</head>
<body>
<!--这里放置页面内容--->
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<a href="https://www.example.com">这是一个链接</a>
<!--其他内容-->
</body>
</html>
创建一个文件夹,打开,在文件夹上进入cmd文件,通过code打开当前目录。选择文件,打开文件夹,进行创建html。
直接输入一个!之后,选择一个!按住Tap键,就会出出现基础格式。
标签的形式:有6个标签h1......h6分别表示一级标签到六级标签。输入一个h1,自动有h1标签,按住Tap键tap就有一个标签。
<body>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
</body>
·还有其他的形式:
<p>
<b>字体加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
</p>
还有其他形式的:无序列表:<ul> 和有序列表:<ol>
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
<ol>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
</ol>
标题标签:
<table>
<tr> //行标签
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
<tr>
<td>元素 1</td>
<td>元素 2</td>
<td>元素 3</td>
</tr>
<tr>
<td>元素 21</td>
<td>元素 22</td>
<td>元素 23</td>
</tr>
</table>
可以给表格增加一些边框:<table border="1"> 1,2,3,4都可以。
HTML属性:
属性在html中非常重要的作用,他们用于定义元素的行为和外观,以及与其他元素的关系。
基本语法:
<开始标签 属性名=“属性值”>
每个HTML元素可以具有不同的属性
<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>
s属性名称不区分大小写,属性值对大小写敏感
<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
<!--前两者相同,第三个与前两个不太一样-->
class属性:为HTML元素定义一个或多个类名(类名从样式文件引入)
id属性:定义元素唯一的id
style属性:规定元素的行内样式
例如:
<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>
a标签有一个属性,href属性,定义了链接的目标,可以是其他网页,VRL文件路径,电子邮件
<body>
<a href="https://docs.geeksman.com">这是一个超链接</a>
<a href="https://docs.geeksman.com" target="_blank">这是第二个超链接,</a>
</body>
可以看到a标签中的是一行的,可以对其进行换行
<a> </a>
<br> //换行
<a> </a>
_self :是以默认值,表示链接在当前窗口
-blank: 表示链接在新窗口或者新的标签页打开
-parent: 表示链接在窗口或父框中打开
-top :表示来凝结在顶层窗口或顶层框架中打开
另外还有:
img: 图片标签,
<img src="logo.png" alt="">
可以在网上找照片,把链接复制下来,而且还可以修改图片的大小
<img src="https://img.baidu.com....." alt="" width="200" height="100">