HTML基本骨架
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>我是标题</title>
</head>
<body>
文本内容
</body>
</html>
HTML排版标签
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<p>我很爱吃螺蛳粉哦!!!!</p>记得加上炸蛋
HTML图片标签
<img src="图片地址" width=“图片宽度” height=“图片高度” alt=“图片命名”>
HTML相对路径和绝对路径
绝对路径:只要src路径上带有 c盘或者其他盘就是绝对路径
优点:解决网址规范化问题,包含完整的URL
缺点:绝对路径比较复杂,不易于维护和修改
<img width="300px" src="C:\Users\Administrator\Desktop\蟑螂男孩.png" alt="新西兰可爱到爆炸的男孩之蟑螂在耳朵安家" >
相对路径:src路径上不带盘符,只有.\的属于相对路径
优点:相对路径比较简单,易于维护和修改
缺点:会导致网址规范化问题、不包含完整的URL
<img width="300px" src="...\蟑螂男孩.png" alt="新西兰可爱到爆炸的男孩之蟑螂在耳朵安家" >
HTML链接
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像
在标签 <a> 中使用了 href 属性来描述链接的地址
<a href="url地址">链接文本</a>
文本链接:最常见的链接类型是文本链接
<a href="https://www.baidu.com">访问示例网站百度</a>
图像链接:您还可以使用图像作为链接。在这种情况下,<a> 元素包围着 <img> 元素。
<a href="https://www.baidu.com">
<img src="01.jpg" alt="示例图片">
</a>
打开窗口的方式:target用于指定打开窗口的方式,将target的属性设置为"_blank",就是新建窗口打开
<a href="https://www.baidu.com/" target="_blank" >访问百度!</a>
链接分为:外部链接和内部链接但他们有什么不同呢?
内部链接是链接到本地计算机中的文件
外部链接是连接到本地站点以外任何一个站点中的文件
HTML表格
HTML 表格由 <table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格可以包含标题行(<th>)用于定义列的标题。
tr:表示表格的一行。
td:t表示表格的数据单元格。
th:表示表格的表头单元格。
实例:
<table>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>行1,列1</td>
<td>行1,列2</td>
<td>行1,列3</td>
</tr>
<tr>
<td>行2,列1</td>
<td>行2,列2</td>
<td>行2,列3</td>
</tr>
</table>
HTML表格常用属性
bgcolor:背景颜色
background:背景图像
width:宽度
heigth:高度
align:left(左对齐)、center(居中对齐)、right(右对齐)
border:边框宽度
rowspan:跨行合并
colspan:跨列合并
cellpadding:单元格边距
cellspacing:单元格间距
HTML表单
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
<form>
元素用于创建表单,action
属性定义了表单数据提交的目标 URL,method
属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。
<input>
元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type
属性定义了输入框的类型,name
属性用于标识表单字段。
<select>
元素用于创建下拉列表,而 <option>
元素用于定义下拉列表中的选项。