html笔记--1

最新推荐文章于 2024-07-09 19:16:57 发布

神经毒素

最新推荐文章于 2024-07-09 19:16:57 发布

阅读量81

点赞数

文章标签： html 笔记前端

本文链接：https://blog.csdn.net/m0_74800552/article/details/131871939

版权

笔记

骨架

HTML：5（快速生成）

<!DOCTYPE html>//文档声明
<html lang="en">//语言
<head>
<meta charset="UTF-8">//字符编码格式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//文章标题
</head>
<body>

</body>
</html>

标题标签

<body>

<h1>我是一个标题</h1>

<h2>我是一个标题</h2>

<h3>我是一个标题</h3>

<h4>我是一个标题</h4>

<h5>我是一个标题</h5>

<h6>我是一个标题</h6>

</body>

段落标签

<body>

<p>有人曾经说过，我们赚得所有钱都比不过我们所拥有的知识。在生活中，如果想成为真正厉害的人，我们必须首先学会观察那些成功者的行为和思维。必须首先了解对方的认知，思考对方的底层思维密码，这是提高我们做事能力的重要途径。

人的一生中，有很多事情是无法改变的。与其自怨自艾，不如学会放手，顺势而为。也许可以得到更好的结果。

真正的厉害从不需要证明和表现，就像一座高山，即使寂静，也会受到无数人的崇拜。因此我们没有必要到处去展示自己，我们只需要保持这三种状态：

</p>

<p>1、顺应时代

真正成功的人首先要明白如何顺应潮流，这是变得杰出的关键。要成为一个有实力的人，不是要证明自己有多能干，而是要理解自己的渺小和时代潮流，这远比个人的努力重要得多。

每个人都逃不过时代对我们的限制，因此生活中，只有了解了什么是时代潮流，才能顺势而为，事半功倍。

</p>

<p>

2、顺应本心

生活中一些人喜欢随遇而安，随大流，不用过多的努力平安生活即可，有些人则认为，要变得强大，成为人上人，要与时间赛跑，要与众不同。你是属于哪一种呢？

就像早睡和熬夜一样，这两种生活习惯并不是绝对的好或坏。也许对大多数人来说，早睡更好，但由于一些努力挣钱的加班族来说，显然熬夜挣钱是更好的选择。但其实最重要的是遵守你的内心选择和习惯。

</p>

</body>

文本格式化标签

原价：<s>999</s>

现价：99

<strong>需要加粗的文段</strong>//加粗
<b>需要加粗的文段</b>//加粗
<em>需要倾斜的文段</em>//倾斜
<i>需要倾斜的文段</i>//倾斜
<del>需要添加删除线的文段</del>//删除线
<s>需要添加删除线的文段</s>//删除线
X<sub>2</sub>//下标

换行标签

<br>

<hr>--换行后加横线

图片标签

src：文件路径。

../:当前文件的上一级文件。

/：文件下一级。

alt：当图片出现错误时，将用文段代替。

width：控制图片宽度

例如：

height：控制高度。

注意：宽度与高度设置其中一个，另一个会自适应。

border：添加图片边框

例如：

<img src="../练习/屏幕截图 2023-07-21 124845.png" alt="心海" title="漂亮" width="100px" border="20

视频标签

<video src="../Html/video.mp4"controls loop autoplay muted></video>

src：视频路径。（必须）

controls：添加控制进度条。（必须）

loop：循环。

autoplay：自动播放。（一些浏览器，比如谷歌规定。若要自动播放，就必须静音。）

muted：静音。

音频标签

<audio src="./music.mp3" controls loop></audio>

src:音频路径。

controls：添加控制进度条。（必须）

loop：循环。

超链接

例如：

<a href="./视频超链接.html" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a>

href:链接地址。可以放现有的，也可以放网络上的。

target：链接的打开方式。

target="_blank"：在新的窗口打开。

target="_self"：默认设置，在当前页面打开。

有序列表

<ol>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ol>

无序列表

<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>

自定义列表
<dl>
<dt>水果：</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dd>葡萄</dd>
<dt>蔬菜：</dt>
<dd>西红柿</dd>
<dd>茄子</dd>
<dd>土豆</dd>
</dl>

dt：组名。

dd：组内元素。

表单

form：表示该表单信息将提交，action后面写提交位置。#表示无。

账户名（文本栏），密码（密码栏），性别（单选框），爱好（多选框）都是使用input标签，通过使用不同的type类型达到不同的效果。具体参考上面的代码。这些都需要设置该表单的名称，用以告诉对方我方提交的数据用于干嘛。因为账户和密码是用户自己输入的，而性别和爱好是锁定的只能在给出的选项中选择，这种就需要使用value来添加值，账户密码也可以使用value添加值，使用后将在网页中默认显示你添加的值（可以修改）。也可以使用disabled（禁止使用，也可以在其他表单使用）锁定，锁定后将不能修改。

checked：默认选中。

籍贯（下拉菜单）使用select标签，也需要设置名称，使用value添加值。用法参考代码。

其他（文本域）使用textarea标签，同样需要设置名称。cols设置列，rows设置行。可以使用maxlength限制最大输入字数。

确认：使用button标签，其表示按钮。<button>确认</button>表示提交按钮。

<input type="reset" />表示重置，即将上面输入的数据回到最初的样子。

上传文件：使用input标签，type="file"，同样需要名称。

注意：上述所有标签都可以添加id。必须要有name属性，其他属性可以去查。

增加鼠标点击选择框的范围（即点击文字也能选择）：

1、使用label标签将整个代码包裹：

<label><input type="radio" name="a" value="男" />男</label>
2、使用label将文字包裹（需要通过id）：

<input type="radio" name="a" value="男" id="x"/><label for="x">男</label>
表格标签
先排出表名和表头：

进行填写第一行：

<body>
<table>
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>表主体
<tr>//行
<td>张三</td>//一个单元格
<td>男</td>
<td>20</td>
<td>汉</td>
<td>群众</td>
</tr>
</tbody>
</table>
</body>