一、Web开发介绍

我们看到的网页通过代码来实现的 ，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。 这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。

写网页的代码是专门的语言， 主要分为\(Hmtl 、 CSS 和 JavaScript\), 被称为网页开发三剑客，分别作用如下：

Html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

主要负责编写页面架构，有点像建房子时，造的毛坯房。

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等

相当于给你的毛坯房做装修

JavaScript

网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

以上3个 组件 是做网站开发都必须掌握的技能 ，我们接下来依次体验下~吧

二、HTML

2.1 HTML简介

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>路飞学城</title>

  </head>

  <body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

  </body>

</html>
  • <!DOCTYPE html>声明为 HTML5 文档
  • <html>元素是 HTML 页面的根元素
  • <head> 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
  • <meta>元素包含文档的元数据， 如定义网页编码格式为 utf-8、关键词啥的
  • <title>元素里描述了文档的标题
  • <body>元素包含了可见的页面内容
  • <h1>元素定义一个大标题
  • <p>元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

2.2 什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如<b> 和 </b>,标签对中的第一个标签是开始标签，第二个标签是结束标签

2.3 HTML网页结构

下面是一个可视化的HTML页面结构：

注意： 只有 区域 (白色部分) 才会在浏览器中显示。

seo optimiaztion

sem search engine marketing

三、HTML常用元素入门

3.1 HTML标题

3.2 段落

3.3 超链接

<body>

	<a href="https://www.luffycity.com">这是一个链接使用了 href 属性</a>

</body>



<a href="https://www.luffycity.com" target="_blank" >访问路飞学城</a>

target="_blank"会打开一个新窗口

3.4 显示图片

<img src="black_girl.jpg" width="600" height="500" >

3.5 HTML表格

想在页面上显示这种表格怎么做？

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67

先做个最简单的

<table border="1">

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

输出

表格的表头

表格的表头使用 标签进行定义。

<table border="1">

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

大多数浏览器会把表头显示为粗体居中的文本

可以加上边距

<table border="1" cellpadding="10">

3.6 列表

分为有序列表 和 无序列表

有序列表

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

效果

无序列表

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

嵌套列表

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

3.7 div区块元素

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例:

,

,