HtmlFoundation

一. h1-h6 标题

• <!-- 独占一行, 自带上下间距, 字体加粗 -->
  <h1 align="center">文档标题1</h1>
  <h2 align="right">文档标题2</h2>
  <h3>文档标题3</h3>
  <h4>文档标题4</h4>
  <h5>文档标题5</h5>
  1
  2
  3
  4
  5
  6

二. br 换行

• 换行

  <!-- 换行 -->
  <h1 align="center">文档标题1</h1>
  <br>
  <h2 align="right">文档标题2</h2>
  1
  2
  3
  4

三. p 段落

• 独占一行, 自带上下间距

  <p>段落标签1</p>
  <p>段落标签2</p>
  <p>段落标签3</p>
  1
  2
  3

四. hr 水平分隔符

• <p>段落标签1</p>
  <hr>
  <p>段落标签3</p>
  1
  2
  3

五. b 加粗

• <b>加粗</b>
  1

六. i 斜体

• <i>斜体</i>
  1

七. u 下划线

• <u>下划线</u>
  1

八. s 删除线

• <s>删除线</s>
  1

九. ul 无序列表

• ui 无序列表 li 列元素

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
  1
  2
  3
  4
  5

• 列表嵌套

  <ul>
      <li>凉菜
          <ul>
              <li>白菜</li>
              <li>黄瓜</li>
          </ul>
      </li>
      <li>热菜
         <ol>
             <li>黄瓜</li>
             <li>白菜</li>
         </ol>
      </li>
  </ul>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

十. ol 有序列表

• ui 无序列表 li 列元素

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
  1
  2
  3
  4
  5

10.1 练习

• <h1 align="center">个人简历</h1>
  <hr>
  <h2>基本信息</h2>
  姓名: <b>苍老师</b>
  性别: 男
  爱好: 摄影
  <h2>个人经历</h2>
  <ul>
      <li>小学9年</li>
      <li>中学6年</li>
      <li>高中12年</li>
  </ul>
  <h2>获得荣誉</h2>
  <ol>
      <li>知名度最高奖</li>
      <li>体重达人</li>
  </ol>
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

十一. img 图片

• src: 资源路径
• alt: 当图片不能正常显示时显示的文本
• title:图片标题 当鼠标悬停时显示的文本
• width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比

11.1 相对路径

•     <img src="1.webp" alt="图片1" title="我是标题" width="80%" height="80%">
  1

11.2 绝对路径

• <img src="https://lmg.jj20.com/u1200.jpg" alt="图片1" title="我是标题" width="800" height="500">
  1

十二. a 超链接

12.1 页内跳转

• href填入要跳转的id

  <p id="top1"></p>
  <br>
  <br>
  .
  .
  .
  <br>
  <br>
  <a href="#top1">跳转到1</a>
  1
  2
  3
  4
  5
  6
  7
  8
  9

12.2 页外跳转

• 点击文字跳转

  <a href="https://www.baidu.com">超链接1</a>
  <a href="02简历练习.html">超链接2</a>
  <a href="1.webp">超链接3</a>
  1
  2
  3

• 点击图片跳转

  <a href="https://www.baidu.com">
      <img src="1.webp" alt="未找到">
  </a>
  1
  2
  3

十三. table 表格

• 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
• 相关属性:border 边框 colspan跨列 rowspan跨行

13.1 table 表格

• 表格例子

    <table border="1">
      <caption>购物车</caption>
      <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
      </tr>
      <tr>
          <td>01</td>
          <td>康师傅</td>
          <td>3元</td>
      </tr>
      <tr>
          <td>02</td>
          <td>怡宝</td>
          <td>2元</td>
      </tr>
  </table>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

• 合并单元格

   <table border="1">
      <tr>
          <td colspan="2">1-1</td>
          <td rowspan="2">1-2</td>
          <td rowspan="3">1-3</td>
      </tr>
      <tr>
          <td>2-1</td>
          <td>2-3</td>
      </tr>
      <tr>
          <td colspan="3">3-1</td>
      </tr>
  </table>
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

十四. form 表单

• type 控件类型
• name 提交的数据标识符
• maxlength 设置最大长度
• value 设置默认值
• readonly 设置为只读
• placeholder 占位文本
• checked 默认被选中
• disabled 按钮禁用

14.0 form

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并 通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理

• action uil地址
• method 规定以什么方式提交表单 get/post
• enctype 发送数据之前如何进行编码
• target 规定在何处打开url

14.1 text 文本框

• 用户名: <input type="text" name="wd" maxlength="5" value="tom"
          readonly placeholder="请输入用户名"> <br>
  1
  2

14.2 password 密码框

• 密码: <input type="password" name="password"  placeholder="请输入密码">
  1

14.3 submit 提交

• 用于提交所有数据

   <input type="submit" value="注册">
  1

14.4 radio 单选

• 单选

  性别: 
  <input type="radio" name="gender" value="m"> 男
  <input type="radio" name="gender" value="w" checked>  女
  1
  2
  3

14.5 checkbox 多选

• 多选

          <input type="checkbox" name="hobby" checked value="cy"> 抽烟
          <input type="checkbox" name="hobby" checked value="hj"> 喝酒
          <input type="checkbox" name="hobby" checked value="tt"> 烫头
          <br>
  
  1
  2
  3
  4
  5

14.6 date 日期

• 日期

              生日: <input type="date" name="birthday" ><br>
  1

14.7 file 提取文件

• file

              照片: <input type="file" name="pic"><br>
  1

14.8 select 下拉框

• value 设置提交的内容,如果不写则提交标签体的内容
• selected 设置默认选中

          <select name="city" id="">
              <option value="bj">北京</option>
              <option value="sh" selected>上海</option>
              <option value="gz">广州</option>
          </select> <br>
  
  1
  2
  3
  4
  5
  6

14.9 reset 重置按钮

• reset

  <input type="reset" value="重置按钮">
  1

• button 也可实现同样效果

  <button type="reset">重置按钮</button>
  1

14.10 button 按钮

• <button type="button">自定义按钮</button>
  1

14.11 新增表单

14.12 新增属性

十五. 分区标签

15.1 作用

• 可以理解为一个容器,对多个有相关性的标签进行统一管理

15.2 常见的分区标签

• div 独占一行
• span 共占一行
• ↓ HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的
• header 头
• main 主体
• footer 脚
• section 区域
• nav 导航

十六. 音视频

16.1 video 视频

• css

  <video src="url" controls="controls"></video>
  1

• 常见属性

  属性	值	说明
  autoplay	autoplay	视频自动播放（chorme需要添加muted属性才可以自动播放）
  controls	controls	向用户展示视频控件
  width	像素	设置播放器宽度
  height	像素	设置播放器高度
  loop	loop	是否循环播放视频
  preload	auto(预先加载视频)；none(不预加载视频)	规定是否预加载视频（若设置了autoplay属性则会忽略）
  src	视频路径	视频url
  poster	图片路径	加载等待时显示的图片
  muted	muted	静音播放

16.1.1 video 举例

• html

  <video poster="https://ys.mihoyo.com/main/_nuxt/img/47f71d4.jpg"
         loop="loop"
         muted="muted"
         autoplay="autoplay"
         controls
         style="width: 1665.78px; height: 937px;">
      <source src="https://ys.mihoyo.com/main/_nuxt/videos/3e78e80.mp4" type="audio/mp4">
      不支持
  </video>
  1
  2
  3
  4
  5
  6
  7
  8
  9

16.2 audio 音频

• css

  <audio src="url" controls="controls"></audio>
  1

• 常见属性

  属性	值	说明
  autoplay	autoplay	音频就绪后自动播放
  controls	controls	向用户展示音频控件
  loop	loop	音频循环播放
  src	url	要播放音频的url