1|the summary of web study

it2023-10-04 73

1.网页为什么叫html？

工具

写一篇博客

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>blog</title> </head> <body> <h1>轮  数  学  的重要性</h1> 2020.10.20 <hr > 今天我打电话叫了一个12寸的外卖披萨 服务员告诉我 12存的没有了，叫我换两个6寸的行不行 我想了想，说可以 这个故事告诉我们一个道理， 数学是多么的重要啊！！！ </body> </html>

百度新闻列表https://news.baidu.com/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>002新闻列表</title> </head> <body> <h1>科技 <img src=""></h1> <hr > <ul> <li> <a href="http://baijiahao.baidu.com/s?id=1681079253971353678" >小米高管解释小米 10T 为何选择 LCD 屏：宁..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1681075638828601161" >iPhone12蓝色开箱被吐槽：跟中毒了一样</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1680980385028841138" >房子大还在为信号不良而苦恼？这款360路由器可以解..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1680811043852513253" >ASML宣布好消息后，美国突然颁布新规！这结果中科..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1681077771242554592" >华为Mate40系列参数和价格基本确认，这次或要豪..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1681076000790278074" >消息称猿辅导、作业帮即将完成新一轮融资</a></li> </ul> <ol> <li> <a href="http://baijiahao.baidu.com/s?id=1681079253971353678" >小米高管解释小米 10T 为何选择 LCD 屏：宁..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1681075638828601161" >iPhone12蓝色开箱被吐槽：跟中毒了一样</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1680980385028841138" >房子大还在为信号不良而苦恼？这款360路由器可以解..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1680811043852513253" >ASML宣布好消息后，美国突然颁布新规！这结果中科..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1681077771242554592" >华为Mate40系列参数和价格基本确认，这次或要豪..</a></li> <li> <a href="http://baijiahao.baidu.com/s?id=1681076000790278074" >消息称猿辅导、作业帮即将完成新一轮融资</a></li> </ol> </body> </html>

我没有找到那个图片，就没写小箭头的图片地址了

图片的使用

如果只设置width或者height，那么没有设置的会等比例缩放如果你同时设置宽高，那么一定要调好宽比，不然图片可能会变形

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>003图片的使用</title> </head> <body> <img src="image/share_moment.png" width="100px"/> <img src="image/share_qq.png" width="100px"/> <img src="image/share_qqzone.png" width="100px" > <img src="image/share_wechat.png" width="100px"> </body> </html>

width:100%

如何下载图片和切图

知识点补充

target="_blank"

ul 的type ：circle /disc /square

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com">点击[当前页面跳转]</a> <a href="http://www.baidu.com" target="_blank">点击[新页面跳转]</a> <ul type="disc"> <li>没有能力</li> <li>没有天赋</li> <li>没有金钱</li> </ul> <ul type="circle"> <li>没有能力</li> <li>没有天赋</li> <li>没有金钱</li> </ul> <ul type="square"> <li>没有能力</li> <li>没有天赋</li> <li>没有金钱</li> </ul> <ol type="1"> <li>长沙</li> <li>株洲</li> <li>湘潭</li> </ol> <ol type="a"> <li>长沙</li> <li>株洲</li> <li>湘潭</li> </ol> <ol type="A"> <li>长沙</li> <li>株洲</li> <li>湘潭</li> </ol> <ol type="i"> <li>长沙</li> <li>株洲</li> <li>湘潭</li> </ol> <ol type="I"> <li>长沙</li> <li>株洲</li> <li>湘潭</li> </ol> <img src="ooo.png" title="鼠标划上去的提示" alt="图片加载失败后的文字" > <del>得不到的永远在骚动</del> 102 下划线u <center>当中心</center> </body> </html>

百度网盘制作

demo.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/baidu.png"/> <a href="one/one.html"> <img src="img/file.png" width="60px" />one </a> <a href="two/two.html"> <img src="img/file.png" width="60px"/>two </a> </body> </html>

one.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="../img/baidu.png" /> <a href="../demo.html"> <img src="../img/return.png" height="25px" /> </a> <img src="../img/doc.png" width="60px" /> <img src="../img/doc.png" width="60px" /> <img src="../img/doc.png" width="60px" /> <img src="../img/doc.png" width="60px" /> </body> </html>

two.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="../img/baidu.png" /> <a href="../demo.html"> <img src="../img/return.png" height="25px" /> </a> <a href="three/three.html"> <img src="../img/file.png" height="60px" />three </a> <img src="../img/doc.png" width="60px" /> <img src="../img/doc.png" width="60px" /> <img src="../img/doc.png" width="60px" /> <img src="../img/doc.png" width="60px" /> </body> </html>

three.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="../../img/baidu.png" /> <a href="../two.html"> <img src="../../img/return.png" height="25px" /> </a> <img src="../../img/doc.png" width="60px" /> <img src="../../img/doc.png" width="60px" /> <img src="../../img/doc.png" width="60px" /> <img src="../../img/doc.png" width="60px" /> </body> </html>

简单表格制作

效果图：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <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> <tr align="center"> <td>用户B</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr align="center"> <td>用户C</td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

最新回复(0)