html入门笔记,HTML入门笔记（附完整代码）

本文笔记基于B站资源：千峰教育

目录

1.写博客

2.新闻列表

3.图片的使用

4.超链接与图片的知识补充

5.网盘的制作

6.简单表格的制作

7.个人简历

8.个人简历补充

9.登录表单

10.get获取和post提交

1.写博客

初识HTML,了解一些常用的标签：

h1:标题；

p:段落；

i：斜体；

b：加粗；

br：换行；

hr：水平线；

&nbsp：空格；

编辑器建议VS code，常用快捷键：

Alt+b：调试；

Alt+shift+b：选择浏览器调试；

ctrl+/：注释；

ctrl+enter：换行；

end：跳转该行末尾；

home：跳转至该行头部。

代码如下：

论   数学的重要性

2019.10.30

今天我打电话叫了个12寸的外卖披萨

告诉我们，

数学是多么重要！

结果显示：

2.新闻列表

目的是学习超链接、图片和列表的使用，另外，vs code编辑器使用代码补全功能，输入关键的标签，按下tab键即可，如：

超链接：a；图片：img；列表：ul、ol、li；然后按下tab键，其中列表可以ul*1>li*5然后tab键就可以列出5个无序列表：

代码如下：

3.图片的使用

图片的使用比较简单，设置的属性常用有宽度width，高度height，多图并排时建议使用其中一个，保持宽度或高度一样，代码如下：

Document

结果如下：

除了像素px单位以外，还有%的单位，即相对于浏览器的比例，若想要铺满整个浏览器则使用100%，代码如下：

Document

4.超链接与图片的知识补充

几个知识点：

1.超链接默认是当前窗口打开的，若想要在新窗口打开，则加上属性：target="_blank"

2.列表的形状是可以设置的，如无序列表中默认实心圆；空心圆：type="circle"；实心方块：type="square"。有序列表更加简单，罗马数字I,数字1，字母A,a;

3.图片属性：alt：图片无法加载时显示的文字，title：鼠标悬停时显示的文字。

代码如下：

5.网盘的制作

目的是为了搞清楚绝对路径和相对路径，绝对路径没啥好说的，就是具体的路径，而相对路径简而言之：

1.与当前html同文件夹则直接调用文件；

2.在当前html文件的上一个文件夹内，则在调用文件前加../，依次类推，上上级文件夹内则加../../,斜杠无所谓，\也可以，值得注意的是，若被调用的文件被一个文件夹包裹，还需要添上文件夹的名字，则../文件夹名/文件。不管怎样，../都在最前面。

文件如下：

如图，文件夹img、one、two和文件index.html并列，其中img中载有图片，one中载有one.html,two中有文件夹three和two.html;而three中有three.html。

index.html:

Document

结果如下：

one.html如下：

Document

结果如下：

two.html:

Document

结果如下：

three.html:

Document

结果如下：

6.简单表格的制作

表格的标签为table，tr是行，td是单元格，若想设置5行6列的表格，则table>tr*5>tr*6再按tab键补全。

设置无间距的表格边框；

align="center"设置居中显示。

代码如下：

Document

前端技术阶段划分标准

初级

中级

高级

专家

标准

被产品怼得说不上话

跟产品怼不相上下

怼得产品没话说

直接将其怼辞职

用户A

结果：

不过这个代码未免繁琐，每列的宽度若要设置一样可以

有几列就写几个，写在table标签后。居中显示也不必写在td后，而是写在tr后。此外，th表示tr居中且加粗。代码如下：

Document

前端技术阶段划分标准

初级

中级

高级

专家

标准

被产品怼得说不上话

跟产品怼不相上下

怼得产品没话说

直接将其怼辞职

用户A

7.个人简历

目的是合并单元格。

合并7列：个人简历

合并4行：照片

并删除对应的其他行列的单元格。

代码如下：

Document

个人简历

姓名

性别

年龄

照片

学历

籍贯

电话

政治面貌

毕业院校

求职意向

结果如下：

8.个人简历补充

简化2个标签：

1.设置列宽度一样，代替

2.th 表格加粗居中，代替代码：

Document

个人简历

姓名

性别

年龄

照片

学历

籍贯

电话

政治面貌

毕业院校

求职意向

结果：

9.登录表单

input常用类型：

input type;

1.form action="",表示提交地址；

2.所有提交的数据，input必须有name属性；

3.input按钮的文字使用value属性表示；

4.input必须在form内才能提交。

Document

总体信息

用户名：

密码：

结果：

10.get获取和post提交

Document

版权所有 IT知识库 CopyRight © 2000-2050 IT知识库 IT610.com , All Rights Reserved.

京ICP备09083238号