基础班前端学习之路-Day2 | 青训营

Simple_WH
165 阅读7分钟

1.8 图像标签

作用：在网页中插入图片

基本使用

 <img src="图片的URL">

src用于指定图像的位置和名称，是<img>的必须属性（单标签），不会换行

属性

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字，没有单位
height图片的高度值为数字，没有单位

一般图片的宽度和高度由CSS确定，不直接由HTML写出

 <img src="./test1.jpg" alt="测试样例1">
 <!-- 图片加载不出来的时候的提示 -->
 <img src="./test2.jpg" title="测试样例2">
 <img src="./test3.jpg" width="100">
 <img src="./test3.jpg" height="600">
 <!-- 浏览器缩放图片时，默认是等比缩放 -->

属性名="属性值"

属性写在<>中，标签名之后，标签名和属性之间用空格隔开，不区分先后顺序

1.9 超链接标签

作用：点击跳转到其他页面

 <a href="https://www.baidu.com">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性

target="_blank"是用于在新窗口打开超链接的属性

在开发初期，不确定跳转地址时将herf属性值写成"#"，即表示为一个空链接

1.10 多媒体标签

音频标签

 <audio src="音频的URL"></audio>

常见属性

属性作用特殊说明
src（必须属性）音频URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板✕
loop循环播放✕
autoplay自动播放为了提升用户体验，浏览器一般会禁用自动播放功能

controls，loop等没有属性值，是因为在HTML5中，如果属性名和属性值一样，就可以简写为一个单词

 <body>
     <audio src="音频的URL" controls loop></audio>
 </body>

视频标签

 <video src="视频的URL"></video>

常见属性

属性作用特殊说明
src（必须属性）视频URL支持格式：MP4、WebM、Ogg
controls显示视频控制面板✕
loop循环播放✕
muted静音播放✕
autoplay自动播放为了提升用户体验，浏览器支持在静音状态下自动播放
 <body>
     <video src="视频的URL" controls loop muted autoplay></audio>
     <!-- 在静音状态下自动播放且循环 -->
 </body>

杂项

网页制作思路：

  1. 从上到下，先整体再局部
  2. 先标签，再CSS美化

注释

Ctrl + /可以快捷生成注释和删除

是注释格式

路径

路径指的是查找文件时，从起点到终点经历的路线

  • 相对路径：从当前文件位置出发查找目标文件

  • 绝对路径：从盘符出发查找目标文件

    • Windows系统从盘符出发
    • Mac系统从根目录出发

Windows系统的文件夹结构默认是``，而其他系统则默认是/，统一都写为/

绝对路径一般用于提供友情链接

二、列表，表格及表单

2.1 列表标签

作用：布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表

无序列表

无序列表：布局排列整齐的不需要规定顺序的区域

  • 标签：ul嵌套li，ul是无序列表，li是列表条目
 <ul>
     <li>第一项</li>
     <li>第二项</li>
     <li>第三项</li>
     ......
 </ul>
  • ul标签里面只能包裹li标签，且显示时独占一行
  • li标签里面可以包裹任何内容

有序列表

有序列表：布局排列整齐的需要规定顺序的区域

  • 标签：ol嵌套li，ol是有序列表，li是列表条目
 <ol>
     <li>第一项</li>
     <li>第二项</li>
     <li>第三项</li>
     ......
 </ol>
  • ol标签里面只能包裹li标签，且显示时独占一行
  • li标签里面可以包裹任何内容

定义列表

定义列表：一个标题对应多个内容的区域，一般用在网页底部

  • 标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述或详情
 <dl>
     <dt>列表标题</dt>
     <dd>列表描述或详情</dd>
     ......
 </dl>
  • dl里面只能包含dt和dd
  • dt和dd里面可以包含任何内容

2.2 表格标签

基本用法

网页中的表格与Excel表格相类似，用来展示数据

标签：table嵌套tr，tr嵌套td或th

标签名说明
table表格
tr行
th表头单元格（感觉类似于列？）
td内容单元格

在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线

表格的内容会自动适应文字内容

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

标签名含义特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息

步骤：

  1. 明确合并目标

  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

    • 跨行合并：保留最上单元格，在单元格标签中添加属性rowspan
    • 跨行合并：保留最左单元格，在单元格标签中添加属性colspan

  3. 删除其他单元格

合并单元格时不能跨结构合并单元格

2.3 表单标签

作用：收集用户信息

使用场景：登录页面、注册页面、搜索区域等

写表单时需要使用form标签包裹表单区域的代码，form标签中的action属性值是发送数据到的地址

input标签

基本使用

input标签的type属性值不同，则功能不同

 <input type="...">
type属性值说明
text文本框，用于输入单行文本
password密码框，输入的密码都是······
radio单选框
checkbox多选框
file上传文件

占位文本

占位文本用于提示信息

 <input type="..." placeholder="提示信息">

文本框和密码框都可以使用

单选框radio

常用属性：

属性名作用特殊说明
name控件名称控件分组，同组只能选中一个（单选功能）
checked默认选中属性名和属性值相同，简写为一个单词
 <input type="radio" name="gender" checked>男
 <input type="radio" name="gender">女

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

 <input type="file" multiple>

多选框checkbox

多选框也叫复选框

 兴趣爱好：
 <input type="checkbox" checked>打胶
 <input type="checkbox">唱
 <input type="checkbox">跳
 <input type="checkbox">rap
 <input type="checkbox">篮球

下拉菜单

使用场景：多个内容需要用户选择且不方便都展示在网页中，希望节省页面空间时

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项，selected是默认选中属性

 <select>
     <option>A</option>
     <option>B</option>
     <option>C</option>
     <option>D</option>
 </select>

文本域

作用：多行输入文本的表单控件

标签：textarea，双标签

 <textarea>默认提示文字</textarea>

属性：name，id用于发送数据时使用，cols，rows设置文本域尺寸，但一般不使用HTML设置文本域尺寸，一般使用CSS设置

文本域自带右下角拖拽功能，但一般会禁用掉

label标签

作用：网页中某个标签的说明文本

用label标签绑定文字和表单控件的关系，增大表单控件的点击范围

  • 写法一：

    • label标签只包裹内容，不包裹表单控件
    • 设置label标签的for属性值和表单控件的id属性值相同
     <input type="radio" id="man">
 <label for="man">男</label>

  • 写法二：

    使用label标签包裹文字和表单控件，不需要属性

     <label><input type="radio">性别</label>

支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等

按钮

button标签的type属性值不同，则功能不同

 <button type="">
     按钮
 </button>
属性值说明
submit提交按钮，点击后可以提交数据到后台（默认功能）
reset重置按钮，点击后将表单控件恢复成默认值
button普通按钮，默认没有功能，一般配合JavaScript使用

即使省略type属性值也是会具有提交功能的

如果按钮标签没有处于form标签中，则无法发挥作用

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

标签：

  • div（大盒子）：独占一行

  • span（小盒子）：不换行

     <div>
     div标签，独占一行
 </div>
 <span>
     span标签，不换行
 </span>

字符实体

作用：在网页中预留字符

常用的字符实体

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
大于号&gt;

特点：&开头，;结尾，中间是英文字母

浏览器会将代码中的多个空格识别为一个

avatar
文章
阅读
粉丝