网页中使用的语言

HTML, CSS, JavaScript

网页相当于图形化界面的有点：

  1. 不需要安装
  2. 不需要更新安装
  3. 跨平台

历史上第一个网站（1991.8.6）欧洲核子研究中心
http://info.cern.ch/hypertext/WWW/TheProject.html

浏览器的作用是将网页渲染并呈现

网页的内容

结构：HTML，内容

表现：CSS 用于控制页面中元素的样式，皮肤

行为：JavaScript用于响应用户操作，反馈

HTML

Hypertext Markup Language

标签

标记文本，告诉浏览器这一个文本怎么显示

<标签名> 内容 </标签名>

里面是不会显示的，告诉浏览器的一些设置 里面是会显示的 ```html 
  1. <body>
  3.     <h1>The Love Song of J. Alfred Prufrock</h1>
  4.     <h2>By T.S. Eliot</h2>
  6.     <p>S’io credesse che mia risposta fosse</p>
  7.     <p>A persona che mai tornasse al mondo,</p>
  8.     <p>Questa fiamma staria senza piu scosse.</p>
  9.     <p>Ma percioche giammai di questo fondo</p>
  10.     <p>Non torno vivo alcun, s’i’odo il vero,</p>
  11.     <p>Senza tema d’infamia ti rispondo.</p>
  13. </body>

  2. <a name="J0561"></a>
  3. ## 自结束标签
  4. <img><br /><input><br />        <!-- HTML 注释 -->
  5. ```html
  6. <html> 
  7.     <head>
  8.         <title>A Poem</title>
  10.     </head>
  12.     <body>
  13.         <!--HTML 注释-->
  14.         <img src=""> <!--这种是自结束标签，不需要成对出现-->
  15.         <input type="" name=""> <!--这种是自结束标签，不需要成对出现-->
  17.         <h1>The Love Song of J. Alfred Prufrock</h1>
  18.         <h2>By T.S. Eliot</h2>
  20.         <p>S’io credesse che mia risposta fosse</p>
  21.         <p>A persona che mai tornasse al mondo,</p>
  22.         <p>Questa fiamma staria senza piu scosse.</p>
  23.         <p>Ma percioche giammai di questo fondo</p>
  24.         <p>Non torno vivo alcun, s’i’odo il vero,</p>
  25.         <p>Senza tema d’infamia ti rispondo.</p>
  27.     </body>
  28. </html>

文本属性：颜色，加粗

  1. <html> 
  2.     <head>
  3.         <title>A Poem</title> <!--网页题目-->
  5.     </head>
  7.     <body>
  8.         <!--HTML 注释-->
  9.         <img src=""> 
  10.         <!--这种是自结束标签，不需要成对出现-->
  13.         <input type="" name=""> 
  15.         <h1>The <font color = "red" size = "10">Love</font> Song of J. Alfred Prufrock</h1> 
  16.         <!--这里通过标签属性，设置了LOVE是红色的,并放大-->
  18.         <h2>By T.S. Eliot</h2>
  20.         <p>S’io credesse che mia risposta fosse</p>
  21.         <p>A persona che mai tornasse al mondo,</p>
  22.         <p>Questa fiamma staria senza piu scosse.</p>
  23.         <p>Ma percioche giammai di questo fondo</p>
  24.         <p>Non torno vivo alcun, s’i’odo il vero,</p>
  25.         <p>Senza tema d’infamia ti rispondo.</p>
  29.     </body>
  30. </html>

文档声明

  1. <!doctype html>  <!--文档声明 HTML5-->
  3. <html> 
  4.     <head>
  6.     <!--为了以防万一，可以在这个标签里设置字符集，避免乱码-->
  7.     <meta charset="uft-8">
  9.         <title>A Poem</title> <!--网页题目-->
  11.     </head>
  13.     <body>
  14.         <!--HTML 注释-->
  15.         <img src=""> 
  16.         <!--这种是自结束标签，不需要成对出现-->
  19.         <input type="" name=""> 
  21.         <h1>The <font color = "red" size = "10">Love</font> Song of J. Alfred Prufrock</h1> 
  22.         <!--这里通过标签属性，设置了LOVE是红色的,并放大-->
  24.         <h2>By T.S. Eliot</h2>
  26.         <p>S’io credesse che mia risposta fosse</p>
  27.         <p>A persona che mai tornasse al mondo,</p>
  28.         <p>Questa fiamma staria senza piu scosse.</p>
  29.         <p>Ma percioche giammai di questo fondo</p>
  30.         <p>Non torno vivo alcun, s’i’odo il vero,</p>
  31.         <p>Senza tema d’infamia ti rispondo.</p>
  35.     </body>
  36. </html>

总结HTML网页基本结构

  1. <!--文档声明 HTML5-->
  2. <!doctype html> 
  5.  <!--这是HTML 注释方法-->
  6.  <!--根标签，所有的内容都要在这个根标签里面-->
  7. <html> 
  8.      <!--网页的头部，与body并列，不会被浏览器展示，但是帮助浏览器和搜索引擎解析网页-->
  9.     <head>
  11.         <!--元数据，为了以防万一，可以在这个标签里设置字符集，避免乱码-->
  12.         <meta charset="uft-8">
  14.          <!--网页的题目-->
  15.         <title>A Poem</title> <!--网页题目-->
  16.     </head>
  18.     <!--网页的主体，展示的内容要写在这里面-->
  19.     <body>
  22.         <!--这种是自结束标签，不需要成对出现-->
  23.         <img src=""> 
  25.         <input type="" name=""> 
  27.         <!--标题，heading, h1, h2, h3...-->
  28.         <!--这里通过标签属性，设置了LOVE是红色的,并放大-->
  29.         <h1>The <font color = "red" size = "10">Love</font> Song of J. Alfred Prufrock</h1> 
  30.         <!--标题，heading, h1, h2, h3...-->
  31.         <h2>By T.S. Eliot</h2>
  34.         <!--段落，paragraph...-->
  35.         <p>S’io credesse che mia risposta fosse</p>
  36.         <p>A persona che mai tornasse al mondo,</p>
  37.         <p>Questa fiamma staria senza piu scosse.</p>
  38.         <p>Ma percioche giammai di questo fondo</p>
  39.         <p>Non torno vivo alcun, s’i’odo il vero,</p>
  40.         <p>Senza tema d’infamia ti rispondo.</p>
  44.     </body>
  45. </html>

文档是什么

文档就是说明书，不会就查

VS Code 操作

输入！ 直接新建一个网页基本框架

ctrl + / 新建html注释
直接输入标签名字，不用打<，会自动补全

有用的插件：
live server —-发布网页到服务器地址，不用刷新页面了
中文包
ayu 主题

有用的设置
每10秒自动刷新

字符处理

考虑多空格，实体：
 

&开头， ;结尾

  1. &gt; 大于号

标签

行内元素

strong
em
a 超链接

块（行外）

结构化语义标签（布局用）

相对路径超链接

./
../

Base64编码图片

CSS

盒子模型