web前端学习之路-一周总结

ingingingingjingbu

已于 2023-07-01 21:38:36 修改

阅读量63

点赞数

文章标签：学习前端 web

于 2023-07-01 21:35:38 首次发布

本文链接：https://blog.csdn.net/2201_75303761/article/details/131494346

版权

一.制作网站前需要掌握的基础知识

（1）网站由多个网页（html文件）、图片（.jpg）、视频等组成

（2）网站的制作需要遵循一定的标准：

a.实现网页中各种元素的排篇布局的代码需要合乎html标准

b.设计网页上各种元素（比如图片、视频等）的外观样式的代码需要合乎css标准

c.实现用户和网页的互动的代码需要合乎javascript标准

（3）制作网站使用的工具：vs code，新安装的vs code 需要下载需要用到的扩展并熟悉一些快捷键，这些都可以通过百度查到。

二.写一个网站中的网页需要掌握的知识

1.一个网页的基本骨架以及一些基本标签

<!DOCTYPE html>
<html>

<!-- <html></html>--表示网页的开始和结束的一对双标签 -->
<html lang="en">
<!-- <html lang="en">--这是语言标签,表示language=English的意思,指明了该网页所使用的语言,但网页中也可以显示出其他的语言,这个设定只会影响浏览器的翻译功能 -->

<head>

     <!-- <head></head>--这是有头部之义的一对双标签,对该网页进行一些宏观设定 -->
     <meta charset="UTF-8">
     <!-- <meta charset="UTF-8">--表示character(字符)的规范格式set(设置为)"UTF-8"(万国码)格式,这个格式可以保证代码中的字符在不同浏览器中显示都是一样的 -->
</head>

<body>

     <!-- <body></body>--这是包括网页所有内容的一对双标签,网页的内容都写在这里 -->
     <h1>大熊猫萌兰</h1>
     <!-- <h1></h1>以及<h2></h2> <h3></h3>等等,作用都是让里面的文字成为标题（加粗并独占一行,加粗效果随1,2,3序号递减) -->

     <p>萌兰是北京动物园的一只熊猫</p>
     <!-- <p></p>--这是段落标签,作用是让里面的文字单独成段,与前后文字相隔一个大空行 -->

     它的妈妈是<br />
     <!-- <br />--注意,这是单标签,文字遇到它就会换行 -->
     萌萌<br />

     <!-- 下面讲图片的插入 -->

     下面是萌兰小时候的图片<br />
     <img src="萌兰.jpg" alt="can not found this picture" title="这是萌兰" width="500像素" height="500像素" border="5像素" />
     <!-- <img src="萌兰.jpg" alt="can not found this picture" title="这是萌兰" width="500像素" height="500像素"border="5像素" />--这个是插入图片的方式image里面的属性必须有src="这里面是图片的地址（若和此网页文件在电脑中同一级目录下写名字即可,否则用/（去下一级）../(去上一级)的方式写地址）" -->
     <!-- title="这里面是光标移到图片上图片会显示的提示文字",alt="这里面是浏览器找不到图片会显示的文字",width、height、border分别表示宽度高度边界的大小。 -->


     <!-- 下面是超链接的使用：即让网页之间相互关联,网页内的元素相互关联 -->

     <!-- 下面用起点连一根线到终点的方式来讲 -->
     <!-- <a href="这里面写终点(即要去的网页的地址或者网页中元素的地址)" -->
     <!-- target="写_blank或者_self(这是打开终点的两种方式,_blank是另起一个窗口打开,_self是在当前这个窗口打开)">这里面写起点（点击它就开始跳转）</a> -->

     <!-- 实现网页之间的关联示例： -->

     <br />下面是萌兰的爸爸美兰的图片：<br />
     <a href="https://baike.baidu.com/item/%E5%A4%A7%E7%86%8A%E7%8C%AB%E7%BE%8E%E5%85%B0/879530?fr=ge_ala"
          target="_blank">点我看美兰的图片</a>

     <!-- 要实现网页内元素的关联,还需要在要去的元素那里标上一个终终点可以这么标 -->
     <a href="#baba">点我看看萌兰爸爸的简介</a>

     <!-- 这里顺便讲下表格 -->
     <!-- 这下面最外面的<table></table>表示有了框框还没在里面用线划分区域的表格 -->
     <!-- 里面的<th></th>表示表头也就是表格的第一行，这里面的文字都会被加粗显示 -->
     <!-- <tr></tr>表示表格中的普通一行，里面的文字不会加粗 -->
     <!-- 最里面的<td>这里面写单元格里的内容</td>表示单元格 -->
     <!-- &nbsp;是空格符，一个&nbsp;只能加一个空格 -->
     <table>
          <th>
          <td>性别</td>&nbsp;<td>年龄</td>&nbsp;<td>居住地</td>
          </th>
          <tr>
               <td>男</td>&nbsp;<td>5</td>&nbsp;<td>北京动物园</td>
          </tr>
     </table>

     <h2 id="baba">萌兰的爸爸</h2>
     <p>美兰于2006年9月6日出生在美国亚特兰大动物园,是旅美大熊猫“伦伦”和“洋洋”的第一个宝宝,出生时被判定为雌性</p>
</body>

</html>

下面是这段代码的效果图：