20250909的学习笔记

HTML 基础笔记

1. HTML 基本格式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>中文测试</title>

</head>

<body>

这里是测试body测试内容。

</body>

</html>

2. HTML 标签

常用标签

  • <h1> 到 <h6>:标题标签,数字越大字体越小。

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

  • <p>:段落标签,自动换行。

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

  • <hr>:水平分割线。

<hr>

  • <!-- -->:注释,不会显示在网页上。

<!-- 这是注释 -->

3. 元素的属性

常用属性

  • align:对齐方式(left、right、center)。

<p align="center">居中对齐</p>

  • bgcolor:背景颜色(已废弃,建议使用 CSS)。

<body bgcolor="#ff1234">

4. 文本元素属性

  • <b>:加粗。

<b>加粗文本</b>

  • <br>:换行。

这是第一行<br>这是第二行

  • <i>:斜体。

<i>斜体文本</i>

  • <del>:删除线。

<del>删除文本</del>

  • <strong>:强调文本,效果类似 <b>。

<strong>强调文本</strong>

  • <u>:下划线。

<u>下划线文本</u>

  • <small>:小字体。

<small>小字体文本</small>

  • <sub>:下标。

H<sub>2</sub>O

  • <sup>:上标。

100m<sup>2</sup>

  • <ruby>:拼音注释(部分浏览器不支持)。

<ruby>二姐<rt>(er) (jie)</rt></ruby>

  • <mark>:黄色背景。

<mark>标记文本</mark>

5.超链接

5.1 超链接形式

  1. 链接外部网站:

<a href="http://www.baidu.com">百度</a>

  1. 链接本地文件:

<a href="1.html">本地文件</a>

  1. 图片链接:

<a href="1.html"><img src="abc.jpg" alt="图片链接"></a>

  1. 电子邮件链接:

<a href="mailto:123@13.com">联系我</a>

  1. 下载文件链接:

<a href="abc.jpg" download>下载图片</a>

5.2 target 属性

  • _self:在当前位置打开(默认值)。

  • _blank:在新窗口中打开。

<a href="http://www.baidu.com" target="_blank">百度</a>

6. 图像标签 <img>

  • src:图像来源。

  • alt:图像无法显示时的替代文本。

  • width 和 height:图像的宽度和高度。

<img src="abc.jpg" alt="美女" width="100" height="200">

<img src="abc.jpg" alt="美女" width="50%" height="200%">

注意:宽度和高度的百分比是相对于父元素的,高度百分比在某些情况下可能无效。

7. 列表

7.1 无序列表 <ul>

  • type:列表项前的符号(disc、circle、square)。

<ul type="disc">

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

</ul>

7.2 有序列表 <ol>

  • type:排序方式(1、A、a、I、i)。

  • start:起始值。

<ol type="1" start="5">

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

</ol>

8. 表格

8.1 表格结构

  • <table>:表格外框。

  • <tr>:行。

  • <td>:单元格。

<table border="1">

<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>

<tr>

<td>3-1</td>

<td>3-2</td>

<td>3-3</td>

</tr>

</table>

8.2 表格属性

  • border:边框粗细。

  • <th>:表头单元格,自动居中加粗。

  • colspan:横向合并单元格。

  • rowspan:纵向合并单元格。

<table border="1">

<tr>

<th colspan="3">表头</th>

</tr>

<tr>

<td rowspan="2">合并列</td>

<td>2-2</td>

<td>2-3</td>

</tr>

<tr>

<td>3-2</td>

<td>3-3</td>

</tr>

</table>

9. HTML 实体

用于输出一些特殊字符,例如:

  • &lt;:小于号 <

  • &gt;:大于号 >

  • &amp;:与号 &

  • &quot;:双引号 "

  • ':单引号 '

10. 表单

10.1 表单结构

<form action="submit.php" method="post">

<input type="text" name="username" placeholder="用户名" required>

<input type="password" name="password" placeholder="密码" required>

<input type="submit" value="提交">

<input type="reset" value="重置">

</form>

10.2 表单属性

  • action:指定表单提交的地址。

  • method:提交方式(get 或 post)。

  • get:数据附加在 URL 后面,适合小量数据。

  • post:数据封装在请求体中,适合大量数据。

10.3 输入框 <input>

  • type:输入框类型(text、password、submit、reset、button、email 等)。

  • name:输入框名称,用于识别提交的数据。

  • value:输入框的初始值。

  • placeholder:提示文本。

  • required:必填字段。

相关推荐
csdn_aspnet6 分钟前
直圆锥(Right Circular Cone)
算法·圆锥
JJJJ_iii14 分钟前
【机器学习07】 激活函数精讲、Softmax多分类与优化器进阶
人工智能·笔记·python·算法·机器学习·分类·线性回归
天若有情6731 小时前
TFword:从字符到片段,解析一个“小而精”的字符串处理工具的设计智慧
java·jvm·算法
DuHz1 小时前
频率分集阵列雷达——论文阅读
论文阅读·算法·汽车·信息与通信·毫米波雷达
机器学习之心1 小时前
198种组合算法+优化RF随机森林+SHAP分析+新数据预测!机器学习可解释分析,强烈安利,粉丝必备!
算法·随机森林·机器学习·shap分析·198种组合算法
jikiecui2 小时前
信奥崔老师:实数型: float、double
c++·算法
知花实央l2 小时前
【数字逻辑】数字逻辑实验实战:74HC151实现逻辑函数+74HC138搭全加器(附接线步骤+避坑指南)
算法·容器·测试用例·逻辑回归
CoovallyAIHub2 小时前
突破性开源模型DepthLM问世:视觉语言模型首次实现精准三维空间理解
深度学习·算法·计算机视觉
WaWaJie_Ngen2 小时前
【OpenGL】模板测试(StencilTest)
c++·算法·游戏·游戏引擎·游戏程序·图形渲染