HTML入门到放弃

BUG最爱刘士佳

已于 2023-11-29 18:38:42 修改

阅读量423

点赞数 7

文章标签： html 前端

于 2023-11-25 11:07:12 首次发布

本文链接：https://blog.csdn.net/m0_59244333/article/details/134610418

版权

HTML基本骨架

<!DOCTYPE html>
<html>
    <head>
        <meat charset="UTF-8">
        <title>我是标题</title>
    </head>
    <body>
        文本内容
    </body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档

<html> 包裹HTML 页面的根元素

<head> 编码

<title> 文档的标题

<body> 元素包含了可见的页面内容

HTML排版标签

HTML 标题是通过<h1> - <h6> 标签来定义的。大小是由h1 -》h6 依次变小（h1最大）

<h1>我是h1标题</h1>
<h2>我是h2标题</h2>

HTML 段落是通过标签 <p> 来定义的（双标签记得包裹起来）

<p>我很爱吃螺蛳粉哦!!!!</p>记得加上炸蛋

HTML图片标签

图片格式必是：GIF、JPG/JPEG、PNG

width和height两者一般情况下，只使用一个，同时使用宽度和高度要同比例。

src路径不对则不能正确显示图片

<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> 元素用于定义下拉列表中的选项。

BUG最爱刘士佳

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML入门到放弃

HTML 标题是通过 - 标签来定义的。width和height两者一般情况下，只使用一个，同时使用宽度和高度要同比例。HTML 段落是通过标签来定义的（双标签记得包裹起来）包裹HTML 页面的根元素。会导致网址规范化问题、不包含完整的URL。元素包含了可见的页面内容。解决网址规范化问题，包含完整的URL。绝对路径比较复杂，不易于维护和修改。src路径不对则不能正确显示图片。相对路径比较简单，易于维护和修改。文档的标题。
复制链接

扫一扫