开始学习html-CSDN博客

本文链接：https://blog.csdn.net/Sthduck/article/details/139962687

今天是2024年6月25日。我要开始学习前端编程了，先从HTML开始学起：

HTML是一个标记语言而不是编程语言，我将其理解为它只在页面上画画而不是用逻辑推理得出结论。

编写软件用很多，例如vs code 、Hbuilder ，我选择用web storm，（我们项目小组要求我们使用这个，而且毕竟是jet brain的全家桶，搭配着idea用起来很习惯）

HTML的四大基础：

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

链接：<a href="https://www.baidu.com">点击打开百度</a>

图片：<img src="/images/logo.png" width="258" height="39" />

标题：<h1>这是一个标题</h1>

接下来学习元素：

<br>-->它的作用是换行

<hr> --->在 HTML 页面中创建水平线。

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

什么是属性？

我的理解是在标签后面加的东西，说明了这个标签是特殊的，而加的这个东西代表了它特殊在哪儿

例如<a href="https://www.baidu.com">中的href

class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

头部的标签就这几个。

其实呢，我觉得HTML就像是签字笔，仅用来写，起不到很美观的效果，到底还是得要用css来美化，可以把css看作美术笔，给写好的字加以位置和颜色使其变得很好看。

这里说css，他可以直接用style标签在HTML代码中编写，也可单独写出去，这样就是一个后缀为.css的文件了，在HTML文件中可以直接用link来导入进来。

当然，人们给css的这两种方式取了名字，内联型，外联型，顾名思义....(理解就行)

html中一大功能就是图片，这很简单：举例说明哈：

src就是引用，alt就是如果图片加载不出来就会出现一个东西代替，在后面就是长宽的尺寸

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以建议是：慎用图片。

HTML绘制表格也是一个很重要的功能，也就是<tr><td>的相互对应，当需要合并单元格的时候，就要用到colspan=与 rowspan=

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

接下来是列表，同样的简单，一个例子看懂

<h4>大写字母列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

结果是