HTML_笔记：

基础格式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>_名称_</title>
    </head>
    <body>
    </body>
</html>

基本要素：

综合

1. 在html中想表示<head/html/body/......>就用&lt;(<)和&gt;(>)
2. 在html中想表示空格就用&nbsp;
3. 每个<......>_内容_后面都要跟一个</......>

IN <body> 里常用的标签

1. <h1> ~ <h6> 标题标签，数字越大字越小
2. <p>_内容_</p>段落标签，每写一段就用一个，段落之间会自动空一行
3. <em>或<i>斜体
   例如：<i>你好</i> 输出 你好
4. <strong>或<b>粗体
   例如：<b>你好</b> 输出 你好
5. <ol>有序列表（带数字序号的）：

   <ol>
     <li>第一项</li>
     <li>第二项</li>
   </ol>

   效果：
   1. 第一项
   2. 第二项
6. <ul>无序列表（带圆点的）：

   <ul>
     <li>第一项</li>
     <li>第二项</li>
   </ul>

   效果：
   • 第一项
   • 第二项
7. <br />换行（就是回车换行，不需要闭合标签）
8. <hr />画一条水平线
9. ^上标
   例如：2² 输出 2²
10. _下标
    例如：H₂O 输出 H₂O
11. <mark>高亮</mark>
    例如：今天<mark>天气很好</mark> 输出 今天天气很好
12. <del>删除线</del>
    例如：原价<del>100元</del> 输出 原价100元
13. <ins>下划线</ins>
    例如：<ins>新增内容</ins> 输出 新增内容
14. <q>文字</q>给文字加双引号
    例如：他说<q>你好</q> 输出 他说你好
15. <blockquote>一大段引用的文字</blockquote>会自动缩进，适合引用长段落
    效果：

    这是一段引用的内容，会自动缩进显示。

16. <code>代码</code>显示一行代码，用等宽字体
    例如：输入<code>alert("hi")</code> 显示 输入alert("hi")
17. <pre>一大段代码</pre>保留空格和换行，适合贴整段代码
    效果：

    function sayHi() {
        console.log("你好");
    }

18. <abbr title="全称">缩写</abbr>鼠标放在缩写上会显示全称
    例如：<abbr title="World Wide Web">WWW</abbr> 输出 WWW（鼠标放上去试试）
19. <address>联系信息</address>通常显示为斜体
    例如
    北京市海淀区
20. <bdo dir="rtl">文字</bdo>把文字方向反过来
    例如：<bdo dir="rtl">你好世界</bdo> 输出 你好世界

超链接 <a>

1. 基本写法：<a href="网址">显示的文字</a>
   例如：<a href="https://www.baidu.com">点我去百度</a> 输出 点我去百度
2. 想在新标签页打开，加 target="_blank"：
   <a href="网址" target="_blank">文字</a>
3. 想跳到本页某个位置，用 #加id名：
   <a href="#底部">跳到页面底部</a>，然后在目标位置写 <p id="底部">我在底部</p>
4. 想让人点了就发邮件：<a href="mailto:xxx@qq.com">发邮件给我</a>

图片 <img />

1. 基本写法：<img src="图片地址" alt="图片说明" />
2. src 是图片的地址（可以是网上的网址，也可以是本地文件夹里的图片路径）
3. alt 是图片加载不出来时显示的文字，一定要写，比如：alt="一只猫"
4. 可以加 width 和 height 改大小：<img src="cat.jpg" width="200" />（单位是像素px，只写width的话高度会自动等比例缩放）
5. 可以加 title="鼠标提示"，鼠标放在图片上会显示提示文字
6. 想让图片可以点击跳转，就用<a>把<img>包起来：
   <a href="网址"><img src="图片地址" /></a>

盒子：<div> 和 <span>

1. <div> 就是一个"大盒子"，独占一行，用来把一堆东西包在一起方便排版
   例如：<div>这是一个盒子</div>
2. <span> 是"小盒子"，不会换行，用来给一小段文字单独加样式
   例如：我喜欢<span style="color:red">红色</span> 两个字 输出 我喜欢红色两个字
3. 记住：div 是块级（占一整行），span 是行内（跟文字走，不换行）

表格 <table>

1. 表格就像Excel一样，由一行一行组成，每行里面又有一格一格的单元格
2. 完整结构长这样：

   <table border="1">
     <tr>
       <th>姓名</th>
       <th>年龄</th>
     </tr>
     <tr>
       <td>小明</td>
       <td>12</td>
     </tr>
   </table>

3. <table> 整个表格
4. <tr> 一行（table row）
5. <th> 表头格子（默认粗体居中）
6. <td> 普通格子（table data）
7. border="1" 是给表格加边框，不加的话默认没有线
8. 想合并单元格：colspan="数字" 横向合并几列，rowspan="数字" 纵向合并几行

表单 <form>（就是输入框、按钮那些）

1. <input type="text"> 单行输入框
   效果：
2. <input type="password"> 密码框，输入的东西会变成圆点
   效果：
3. <input type="radio"> 单选圆圈（比如选性别）
   效果： 男 女
   注意：同一个选项组里 radio 的 name 必须一样，不然可以同时选多个
4. <input type="checkbox"> 多选方框
   效果： 吃饭 睡觉 打游戏
5. <input type="submit" value="按钮文字"> 提交按钮
   效果：
6. <input type="reset" value="重置"> 重置按钮，点了把表单清空
   效果：
7. <input type="date"> 选日期的
   效果：
8. <input type="color"> 选颜色的
   效果：
9. <textarea rows="4" cols="30">默认文字</textarea> 多行输入框（可以输入好几行）
   效果：
10. 下拉菜单用 <select> 和 <option>：

    <select>
      <option>苹果</option>
      <option>香蕉</option>
    </select>

    效果： 苹果香蕉
11. <button>点我</button> 按钮，比 input 按钮更好用
    效果：点我
12. <label for="输入框id">名字：</label> 给输入框加个说明文字，点文字也能聚焦到输入框

多媒体（音频、视频、嵌入网页）

1. <audio src="音乐.mp3" controls></audio> 放音乐，controls 是显示播放暂停那些按钮
2. <video src="电影.mp4" controls width="400"></video> 放视频，可以用width设置宽度
3. <iframe src="https://www.baidu.com" width="600" height="400"></iframe> 在你的网页里嵌入另一个网页

三、CSS 样式（就是给网页化妆用的）

HTML 是骨架，CSS 就是衣服和妆容——改颜色、改大小、改位置、加圆角边框这些都是 CSS 干的。

CSS 写在哪里？三种写法

• 第一种：行内样式，直接写在标签的 style 属性里，只对这一个标签生效：
  <p style="color:red">这段文字是红色的</p>
  效果：

  这段文字是红色的

• 第二种：内部样式表，写在 <head> 里的 <style> 标签中，整个网页都能用：

  <head>
    <style>
      p { color: red; }
    </style>
  </head>

  上面这段的意思是：把网页里所有的 <p> 标签都变成红色。
• 第三种：外部样式表，把样式单独存成一个 .css 文件，然后在 HTML 里引入：
  <link rel="stylesheet" href="style.css" />
  网站大了以后都用这种方法，好管理。

CSS 基本格式

每条 CSS 都是这样写的：

选择器 {
    属性1: 值1;
    属性2: 值2;
}

意思是：选中某些元素，给它们设置这些样式。大括号里面一条一条的，每条结尾必须写分号 ;

三种选择器（怎么选中要改样式的元素）

1. 标签选择器：直接写标签名，选中网页里所有这种标签。
   例如：h2 { color: blue; } 就是把所有 h2 标题都变成蓝色。
2. class 选择器：class 就是给元素起个小组名，CSS 里用 . 开头来找。
   HTML 里写：<p class="important">重要内容</p>
   CSS 里写：.important { color: red; font-weight: bold; }
   效果：

   重要内容（class="important"）

   
   一个 class 可以给很多标签用，一个标签也可以同时有好几个 class，用空格隔开。
3. id 选择器：id 是给元素起的唯一名字，整个网页不能重复，CSS 里用 # 开头。
   HTML 里写：<p id="title">我的标题</p>
   CSS 里写：#title { font-size: 30px; }

常用 CSS 属性（重点！）

1. color —— 文字颜色
   color: red; 红色，color: #ff0000; 十六进制，color: rgb(255,0,0); RGB写法
   效果：

   红色文字

   蓝色文字

   橙色文字

2. background-color —— 背景颜色
   background-color: yellow;
   效果：黄底黑字
3. font-size —— 字体大小
   font-size: 20px; 20像素，font-size: 30px; 30像素
   效果：

   14px 的字

   24px 的字

   36px 的字

4. font-weight —— 字体粗细
   font-weight: bold; 粗体，font-weight: normal; 正常
   效果： 正常 粗体bold
5. text-align —— 文字对齐方式
   text-align: center; 居中，text-align: left; 左对齐，text-align: right; 右对齐
   效果：

   左对齐 left

   居中 center

   右对齐 right

6. text-decoration —— 文字装饰线
   text-decoration: underline; 下划线，text-decoration: line-through; 删除线，text-decoration: none; 去掉线（常用于去掉链接默认的下划线）
7. width 和 height —— 盒子的宽度和高度
   width: 200px; height: 100px;
   效果：
   宽200 高60
8. border —— 边框
   写法：border: 宽度 样式 颜色;
   例如：border: 2px solid black; 就是 2像素 实线 黑色
   效果：
   2px solid black
   2px dashed red（虚线）
   2px dotted blue（点线）
9. border-radius —— 圆角
   border-radius: 10px; 圆角大小，写50%就是圆形
   效果：
   10px圆角
   圆形
10. padding —— 内边距（盒子边框里面，内容和边框之间的距离）
    padding: 10px; 四周都留10px
    效果对比：
    padding:2px
    padding:20px
11. margin —— 外边距（盒子外面，和其他元素之间的距离）
    margin: 20px; 四周都留20px空白
    注意：padding 是"内部填充"，margin 是"外部留白"，别搞混了
12. display —— 元素的显示方式
    display: block; 块级（独占一行）
    display: inline; 行内（不换行）
    display: none; 隐藏不显示
    display: flex; 弹性布局，做横向排列特别好用

head 里其他常用标签

1. <meta charset="utf-8"> 设置网页编码（必写，不然中文会乱码）
2. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 手机上打开不会缩放错位
3. <title>网页标题</title> 浏览器标签页上显示的名字
4. <link rel="icon" href="图标.ico" /> 设置浏览器标签页前面的小图标
5. <script src="脚本.js"></script> 引入 JavaScript 文件（写交互逻辑用的）

About Us