开始写网页

第一行代码，hello,world

• 初始

  1	<p>hello,world</p>

  <p>：paragraph，段落
  <h1>：一级标题
  <h2>：二级标题，以此类推至h6

添加样式

• 格式

  1	<p style="width: 20px">文字内容</p>

  <>内加style=“ ”，“ ”内加xxx: xxx

  px：pixel，像素

  1 2 3

  <Orca style="background: powderblue">自定义标签</Orca> # 字多少模块就多大 <Orca style="background: powderblue;display: block;">自定义标签但块</Orca> # block <p style="background: red">默认style标签</p> # 默认block

• 定义模块

  1 2 3 4 5 6 7 8 9 10 11

  <box style=" width: 200px; # 宽度 height: 50px; # 高度 background: powderblue; # 盒子颜色 display: block; # 样式为块 margin: 30px auto; # 边距 上下30 左右自动 border: 5px solid black; # 边框 padding: 20px; # 高度20 "> 盒子 </box>

  margin：外边距，与其他模块之间的距离
  padding：内边距，与内容的距离，防止移动端显示贴边什么的
  border：边框
  align：对齐

• 分区

  1	<div></div>

  <div>：division，分区，无实意

  1 2 3 4 5 6

  <div style=" background-color: powderblue; padding: 10px; text-align: center; font-size: 12px; "></div>

  font：字体

• 插入图片

  1	<img src='url' alt="图片名" width="xxpx" height="xxpx">

  alt：alternative text，替代文本

  本地图片：放同级目录，用文件名

• 插入链接

  1	<a href="url">

目前用到的函数汇总

• <style>

  1 2 3 4 5 6 7 8 9

  width: 10px; height: 10px; max-width: 700px; # 防止占全屏 text-aligh: center; # 文字对齐: 居中 line-height: 1.7; # 行高: 1.7倍 margin: 30px auto; # 外边距: 上下 左右auto(自动两边相等-居中) padding: 15px; # 内边距 border: 5px solid pink # 边框: 参数 样式 颜色 border-radius: 5px; # 边框圆角

  radius：半径

标签

• <meta>：元数据 放head里 整个网页的属性

  1 2 3 4 5 6

  <meta charset="UTF-8" /> # 字符集为UTF-8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> # 兼容老浏览器(可有可无) <meta name="viewport" content="width=device-width, initial-scale=1.0" /> # 显示宽度为设备宽度 初始比例1.0 <title>Document</title>

• <div>：division 可包含任意种类标签 因此用的最多

  问题

• 问题：固定在底部的div遮挡其他元素

  方案：为body设置margin-bottom值为置底<div>的height

快捷键

Ctrl + D 选下一个相同字符
Alt + 左键 添加光标，同时编辑多处地方
Shift + Alt + ↑/↓ 复制到上/下一行

HTML & CSS & JavaScript

• HTML (HyperText Markup Language)：是什么

  相当于房子的结构，定义网页的内容和结构，如标题、段落、图像、列表等。

• CSS (Cascading Style Sheets)：看起来

  相当于房子的装修，定义网页的样式布局，例如颜色、字体、间距、背景等。

• JavaScript：做什么

  相当于房子的电器和各种互动装置，为网页添加交互性和动态行为。 JavaScript 可以响应用户操作，修改网页内容，与服务器通信，以及实现各种复杂的动画和特效。