本文笔记基于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：跳转至该行头部。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><h1>论&nbsp;&nbsp;&nbsp;数学的重要性</h1><i> 2019.10.30</i><hr><p>今天我打电话叫了个12寸的外卖披萨</p><p>告诉我们，<br> <b>数学是多么重要！</b></p>
</body>
</html>

结果显示：

2.新闻列表

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

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>百度新闻列表</title>
</head>
<body><h1>科技&nbsp;<img src="img/1.jpg" alt="" height="20"</h1><hr><ul><li><a href="http://baijiahao.baidu.com/s?id=1636103229447924224"><b>续航更强了？苹果新iPhone电池容量将增加5%</b></a></li><li><a href="http://baijiahao.baidu.com/s?id=1636098962422707095">从中性笔到智能烟灶套装，一起来看琳琅满目的6大米家.</a></li><li><a href="http://baijiahao.baidu.com/s?id=1636099665074643605">iPhone XR 2真香预警！续航更加无敌+后置..</a></li></ul><ol><li><a href="http://baijiahao.baidu.com/s?id=1636103229447924224"><b>续航更强了？苹果新iPhone电池容量将增加5%</b></a></li><li><a href="http://baijiahao.baidu.com/s?id=1636098962422707095">从中性笔到智能烟灶套装，一起来看琳琅满目的6大米家.</a></li><li><a href="http://baijiahao.baidu.com/s?id=1636099665074643605">iPhone XR 2真香预警！续航更加无敌+后置..</a></li></ol></body>
</html>

3.图片的使用

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="imgs/1.jpg" alt=""  width="100px"><img src="imgs/2.jpg" alt=""  width="100px"><img src="imgs/3.jpg" alt=""  width="100px"><img src="imgs/4.jpg" alt=""  width="100px">
</body>
</html>

结果如下：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="imgs/t1.jpg" alt="" width="100%"><img src="imgs/t2.jpg" alt="" width="100%">
</body>
</html>

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

几个知识点：

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

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

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 新窗口打开 --><a href=http://baijiahao.baidu.com/s?id=1636103229447924224">当前窗口打开</a><a href="http://baijiahao.baidu.com/s?id=1636103229447924224" target="_blank">新窗口打开</a><ul><li type="disc"><a href="http://baijiahao.baidu.com/s?id=1636103229447924224"><b>续航更强了？苹果新iPhone电池容量将增加5%</b></a></li><li type="circle"><a href="http://baijiahao.baidu.com/s?id=1636098962422707095">从中性笔到智能烟灶套装，一起来看琳琅满目的6大米家.</a></li><li type="square"><a href="http://baijiahao.baidu.com/s?id=1636099665074643605">iPhone XR 2真香预警！续航更加无敌+后置..</a></li></ul><ol><li type="1"><a href="http://baijiahao.baidu.com/s?id=1636103229447924224"><b>续航更强了？苹果新iPhone电池容量将增加5%</b></a></li><li type="A"><a href="http://baijiahao.baidu.com/s?id=1636098962422707095">从中性笔到智能烟灶套装，一起来看琳琅满目的6大米家.</a></li><li type="I"><a href="http://baijiahao.baidu.com/s?id=1636099665074643605">iPhone XR 2真香预警！续航更加无敌+后置..</a></li></ol><img src="imgs\1.jpg" alt="1" title="1"><img src="imgs\22.jpg" alt="22" title="22"></body>
</html>

5.网盘的制作

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

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

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

文件如下：

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

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="img/baidu.jpg" alt="" width="100%"><p><a href="one/one.html"><img src="img/file.png" alt="" width="60px">one</a><a href="two/two.html"> <img src="img/file.png" alt="" width="60px">two</a>      </p>
</body>
</html>

结果如下：

one.html如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="../img/baidu.jpg" alt="" width="100%"><p><a href="../index.html"><img src="..\img\last.png" alt=""></a>  </p><p><img src="..\img\pdf.png" alt=""></p></body>
</html>

结果如下：

two.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="../img/baidu.jpg" alt="" width="100%"><p><a href="../index.html"><img src="..\img\last.png" alt=""></a>  </p><p><img src="..\img\pdf.png" alt=""><a href="three/three.html"><img src="../img/file.png" alt="">three</a>     </p></body>
</html>

结果如下：

three.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="../../img/baidu.jpg" alt="" width="100%"><p><a href="../two.html"><img src="..\..\img\last.png" alt=""></a>  </p><p><img src="..\..\img\pdf.png" alt=""></p></body>
</html>

结果如下：

6.简单表格的制作

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

<table border="1px" cellspacing="0">设置无间距的表格边框；

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h3>前端技术阶段划分标准</h3><table border="1px" cellspacing="0"><tr><td width="200" align="center"></td><td width="200" align="center">初级</td><td width="200" align="center">中级</td><td width="200" align="center">高级</td><td width="200" align="center">专家</td></tr><tr><td width="200" align="center">标准</td><td width="200" align="center">被产品怼得说不上话</td><td width="200" align="center">跟产品怼不相上下</td><td width="200" align="center">怼得产品没话说</td><td width="200" align="center"> 直接将其怼辞职</td></tr><tr><td width="200" align="center">用户A</td><td width="200" align="center"></td><td width="200" align="center"></td><td width="200" align="center"></td><td width="200" align="center"></td></tr></table></body>
</html>

结果：

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h3>前端技术阶段划分标准</h3><table border="1px" cellspacing="0"><col width="200px"><col width="200px"><col width="200px"><col width="200px"><col width="200px"><tr align="center"><td></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr align="center"><td>标准</td><td>被产品怼得说不上话</td><td>跟产品怼不相上下</td><td>怼得产品没话说</td><td>直接将其怼辞职</td></tr><tr align="center"><td>用户A</td><td></td><td></td><td></td><td></td></tr></table>
</body>
</html>

7.个人简历

目的是合并单元格。

合并7列：<td colspan="7">个人简历</td>

合并4行：<td rowspan="4">照片</td>

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

代码如下：

 <!-- 6行7列快捷键：tr*6>td*7按tab建补全 ；合并单元格--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><table border="1px" cellspacing="0"><col width="100px"><col  width="100px"><col  width="100px"><col  width="100px"><col  width="100px"><col  width="100px"><col width="200px"><tr height="40" align="center"><td colspan="7">个人简历</td>   </tr><tr height="40" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40" align="center"><td>求职意向</td><td colspan="6"></td></tr></table></body></html>

结果如下：

8.个人简历补充

简化2个标签：

1.<colgroup span="6" width="100"></colgroup>设置列宽度一样，代替

2.th 表格加粗居中，代替<td align="center">

代码：

 <!-- 6行7列快捷键：tr*6>td*7按tab建补全 ；合并单元格--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><table border="1px" cellspacing="0"><col width="100px"><col  width="100px"><col  width="100px"><col  width="100px"><col  width="100px"><col  width="100px"><col width="200px"><tr height="40" align="center"><td colspan="7">个人简历</td>   </tr><tr height="40" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40" align="center"><td>求职意向</td><td colspan="6"></td></tr></table></body></html>

结果：

9.登录表单

input常用类型：

input type;

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><form action="https://www.iqiyi.com/v_19rroca84g.html"><table width="600" border="1" cellspacing="0"><tbody><tr height="40"><td rowspan="4" align="center">总体信息</td><td colspan="2"></td></tr><tr height="40"><td align="right">用户名：</td><td> <input type="text" name="loginname"></td></tr><tr height="40"><td align="right">密码：</td><td><input type="password" name="pwd"></td></tr><tr><td colspan="2" align="center" ><input type="submit" value="提交"><input type="reset" value="重置"></td></td></tr></tbody>  </table>
</form>
</body>
</html>

结果：

10.get获取和post提交

<!-- 地址栏上显示用户密码等数据，就是get请求 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><form action="http://www.baidu.com" method="GET"><p><input type="text" name="login"></p><p><input type="password" name="pwd"></p><p><input type="submit"></p>
</form>
</body>
</html>

HTML入门笔记（附完整代码）相关推荐

单选按钮_PerlTk教程之按钮Button、复选按钮Checkbutton、单选按钮Radiobutton（附完整代码）...
<Perl-Tk教程之按钮Button.复选按钮Checkbutton.单选按钮Radiobutton>Perl-Tk中有三种不同形式的按钮组件可供选择,它们分别是按钮(Button), ...
c++ 三次多项式拟合_线性回归进阶版，多项式线性回归讲解与实现（附完整代码）...
每天给小编五分钟,小编用自己的代码,带你轻松学习深度学习!本文将会带你做完一个深度学习进阶版的线性回归---多项式线性回归,带你进一步掌握线性回归这一深度学习经典模型,然后在此基础上,小编将在下篇文章 ...
对“科大讯飞2021丨广告点击率预估挑战赛 Top1方案(附完整代码)_Jack_Yang的博客-CSDN博客”的补充。
这篇文章的初衷是针对科大讯飞2021丨广告点击率预估挑战赛 Top1方案(附完整代码)_Jack_Yang的博客-CSDN博客进行补充. 博客的信息量很少,对任务背景的介绍也不太对,说实话令人费解.我 ...
喷管流动的守恒型CFD解法及激波捕捉（附完整代码）
入门CFD,主要参考书目<计算流体力学基础及其应用>(John D.Anderson 著,吴颂平等译) 实现了第 7.6 节激波捕捉的代码,采用的是 MacCormack 方法, ...
php 3d animation,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
Py之pygame：有趣好玩—利用pygame库实现鱼儿自动实时目标跟踪(附完整代码)
Py之pygame:有趣好玩-利用pygame库实现鱼儿自动实时目标跟踪(附完整代码) 目录输出结果实现代码输出结果实现代码 #Py之pygame:利用pygame库实现鱼儿自动实时目标跟踪i ...
c++代码好玩_Py之pygame：有趣好玩—利用pygame库实现鱼儿自动实时目标跟踪(附完整代码)...
Py之pygame:有趣好玩-利用pygame库实现鱼儿自动实时目标跟踪(附完整代码) 目录输出结果实现代码输出结果实现代码 #Py之pygame:利用pygame库实现鱼儿自动实时目标跟 ...
OpenCV基本线性变换轨迹栏的实例(附完整代码)
OpenCV基本线性变换轨迹栏的实例 OpenCV基本线性变换轨迹栏的实例 OpenCV基本线性变换轨迹栏的实例 OpenCV基本线性变换轨迹栏的实例(附完整代码) #include "op ...
OpenCV差分二值化的实时场景文本检测的实例(附完整代码)
OpenCV差分二值化的实时场景文本检测的实例 OpenCV差分二值化的实时场景文本检测的实例 OpenCV差分二值化的实时场景文本检测的实例 OpenCV差分二值化的实时场景文本检测的实例(附完整代 ...
python代码手机壁纸_Python制作微信好友背景墙教程（附完整代码）
引言前段时间,微信朋友圈开始出现了一种晒照片新形式,微信好友墙,即在一张大图片中展示出自己的所有微信好友的头像. 效果如下图,出于隐私考虑,这里作了模糊处理. 是不是很炫,而且这还是独一无二的,毕竟 ...

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

1.写博客

2.新闻列表

3.图片的使用

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

5.网盘的制作

6.简单表格的制作

7.个人简历

8.个人简历补充

9.登录表单

10.get获取和post提交

HTML入门笔记（附完整代码）相关推荐

最新文章

热门文章