HTML学习笔记

HTML学习笔记

写在前面：

写于2022年上半年，以下学习笔记同时将作为最后的结课作业提交。但是根据实际开发经验，个人认为搜索引擎才是最全面的笔记！因此，这里的内容较少，还请见谅。（更多的内容会在 CSS 和 JS 学习笔记中总结）

1、初识 HTML

HTML 即 HyperText Markup Language，中文译为：超文本标记语言。

2、标签

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。

因此学习 HTML 大部分精力用在学习其标签上了。

2.1、标题

<h1>
  一级标题
</h1>
<h6>
  
</h6>

2.2、段落

<p>这是段落paragraph<p>

2.3、行内文字

<span id="span01" class="myspan">用我可以方便标记样式</span>

注意：

1、span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。

2、span标签本身并没有什么格式表现，不像块级元素（如：div标签、p标签等）哪样有换行的效果，需要对它应用样式才会有视觉上的变化。

2.4、超链接

<a href="https://www.google.com">前往谷歌</a>

2.5、插入图像

<img src="img.jpg" alt="一张图片" width="304" height="228">

什么？你在尝试使用矢量图形？试一试svg标签吧！下面是一个红色的圆！

<svg>
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

2.6、列表

列表有无序的：

<ul>
<li>Link</li>
<li>Zelda</li>
</ul>

也有有序的：

<ol>
<li>Link</li>
<li>Mipha</li>
</ol>

2.7、表单

登录功能是一个网站十分常见的！（坐等PassKey拯救！）

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

当然，一个表单中也可以用便于用户选择的按钮

单选按钮

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框

期末之后：

<form>
<input type="checkbox" name="course" value="DataBase">我重修数据库<br>
<input type="checkbox" name="course" value="Java">我要重修Java
</form>

提交按钮

点击提交表单！

<input type="submit" value="Submit">

3、总结

HTML 肯定远不止这些内容，虽然总结是必要的，但是笔者认为计算机学习应该更加注重于实践！

不如花更多时间动手自己做一个心仪的网站吧！！