高山流水觅土豆
所有文章 标签 分类 关于 友链
高山流水觅土豆

目录

前端三板斧的学习（二）

 收录于 IT相关学习
   约 3897 字   预计阅读 8 分钟   次阅读

依旧参考系列视频如上.

相关系列学习博客

前端三板斧的学习（一）

Html 的学习 (26p-56p)

相关概念简述

  • 图片标签: 插入格式为 <img width="" height="" src="" alt=""> 其中:

    1. width 与 height 属性并非必要, 不加则会以原始大小插入, 仅设置单个值则按照图片原始比例进行缩放.
    2. src 为图片路径, alt 为图片内容(或名称,注释等).
    3. <img...> 标签为行内标签.
      https://pub-99c785ad059849549a571cce9d506af0.r2.dev/PicGo/20240919140628.png
      图片标签

  • 相对路径与绝对路径:

    1. 相对路径:从html文件所在位置出发到图片文件为止。
    2. 绝对路径:分为本地绝对路径与网络绝对路径。本地绝对路径从盘符出发，到文件为止。网络绝对路径为一个网址，当目标图片采用防盗链技术时无法引入使用。

  • 超链接:从当前页面进行跳转的可交互文字。标准写法为 <a> ... </a>

    https://pub-99c785ad059849549a571cce9d506af0.r2.dev/PicGo/%E8%B6%85%E9%93%BE%E6%8E%A5.png
    超链接

    1. 超链接跳转页面: 在 herf 属性中键入地址即可 (可以输入网页地址也可以为本地地址)
    2. 超链接跳转文件: 在 herf 属性中键入地址即可，浏览器可直接打开 pdf、jpg、gif、mp4 格式，其余格式会触发下载
    3. 超链接跳转锚点: 可以使用 name 属性或者 id 属性来设置锚点, 在 herf 属性中输入 # 加锚点名称即可
    4. 超链接唤起应用: 在 herf 属性中键入以下即可.

    https://pub-99c785ad059849549a571cce9d506af0.r2.dev/PicGo/linkchoices.png
    超链接唤起应用

  • 列表:

    1. 有序列表: 有顺序或侧重顺序的列表 <ol> <li> ... </li> </ol>
    2. 无序列表: 无顺序或不侧重顺序的列表 <ul> <li> ... </li> </ul>
    3. 定义列表: 所谓定义列表，就是一个包含术语名称以及术语描述的列表, 举例说明
1
2
3
4

	<dl>    <!--定义列表-->
		<dt>做好笔记</dt>    <!--术语标题-->
		<dd>笔记可以日后复习使用</dd>    <!--术语描述-->
    </dl>

  • 表格:

    1. 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成
    2. 表格涉及到的标签有：
      • table ：表格
      • caption ：表格标题
      • thead ：表格头部
      • tbody ：表格主体
      • tfoot ：表格注脚
      • tr ：每一行
      • th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
    3. 表格相关属性见附表

  • 常用标签的补充：<br> 表示换行，<hr> 表示分隔，为单标签。<pre> 表示按原文显示，为双标签。

  • 表单:

    1. 概念：一个包含交互的区域，用于收集用户所提供的数据。
    2. 相关标签附于附表
    3. 表单由于属性与内容过多，此处采取一个实例来进行记录。

  • 框架标签：<iframe>，为双标签，语义为框架，一般用于嵌入其他文件使用。表单的实例就是以此方式嵌入。常用属性有 name（和 target 属性配合）、height、width、frameborder（取 0 时为无边框，1 为有边框）

  • HTML 实体：

    1. 概念：在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
    2. 字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ; 。
    3. 完整实体列表在此参考

  • HTML 全局属性：一般来说可用于全部标签的属性。完整列表在此参考。

  • Meta 元信息：

    1. 配置字符编码：<meta charset="utf-8">

    2. 针对 IE 浏览器的兼容性配置: <meta http-equiv="X-UA-Compatible" content="IE=edge">

    3. 针对移动端配置：<meta name="viewport" content="width=device-width, initial-scale=1.0">

    4. 配置网页关键字：<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

    5. 配置网页描述信息：<meta name="description" content="80字以内的一段话，与网站内容相关">

    6. 针对搜索引擎爬虫配置：<meta name="robots" content="此处可选值见下表">

      https://pub-99c785ad059849549a571cce9d506af0.r2.dev/PicGo/meta1.png
      配置可选值

    7. 配置网页作者：<meta name="author" content="tony">

    8. 配置网页生成工具：<meta name="generator" content="Hugo">

    9. 配置定义网页版权信息：<meta name="copyright" content="2023-2027©版权所有">

    10. 配置网页自动刷新：<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
      更多元信息可参考这里进行查看

笔记/细节/心得

  1. 访问相对路径时，使用/访问下一级目录，使用.访问上一级目录。 例如:
1
2
3

	./  <!--这是当前路径-->
	./下级路径/下级路径/  <!--这是下两级路径访问方式-->
	../../  <!--这是上两级路径-->
  1. 常见图片格式:最后附表，与 html 相关性较小。
  2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！
  3. 若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称
  4. 跳转锚点可有以下妙用:
    https://pub-99c785ad059849549a571cce9d506af0.r2.dev/PicGo/turnto.png
    跳转锚点
  5. li 标签最好写在 ul 或 ol 中，不要单独使用。
  6. <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格 边框的宽度，只能控制表格最外侧边框的宽度。

tips:按住Alt再用鼠标点击可以使光标跨行

表单实例

此处实现效果如下：


所用的代码如下: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="https://search.jd.com/search" target="_blank">
    <label>
        账户: <input type="text" name="account" value="输入账户名" maxlength="20">
    </label><br>
    <label>
        密码: <input type="password" name="pwd" value="" maxlength="18">
    </label><br>
    <span>
        性别:
    </span>
    <label>
        <input type="radio" name="gender" value="male" checked>男
    </label>
   <label>
        <input type="radio" name="gender" value="female">女<br>
   </label>
   <span>
        爱好:
   </span>
   <label>
     <input type="checkbox" name="hobby" value="sing">唱
   </label>
   <label>
     <input type="checkbox" name="hobby" value="dance">跳
   </label>
   <label>
     <input type="checkbox" name="hobby" value="rap">Rap
   </label>
   <label>
     <input type="checkbox" name="hobby" value="basketball" checked>篮球
   </label><br>
   <span>
        籍贯:
   </span>
   <select name="place">
    <option value="黑">黑龙江</option>
    <option value="吉" selected>吉林</option>
    <option value="辽">辽宁</option>
    <option value="else">其他</option>
   </select><br>
   <input type="hidden" name="from" value="blog">
    <label for="qita">其他:</label>
    <textarea cols="23" rows="3" id="qita" name="other"></textarea><br>
   <button>确认</button>
   <!-- <input type="submit" value="提交"> -->

   <button type="reset">重置</button>
   <!-- <input type="reset" value="重置"> -->

   <button type="button">这是一个可点击按钮</button><br>
   <button type="button" disabled>这个按钮不能点</button>
    </form>

    若点击确认,以上表单内容将提交至京东

</body>
</html>

附录

图片格式

格式 概述 特点 使用场景 备注
jpg 扩展名为 .jpg 或 .jpeg，是一种有损的压缩格式 支持颜色丰富，占用空间较小 对图片细节没有极高要求的场景
png 扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图 支持的颜色丰富、支持透明背景 ①想让图片有透明背景；②想更高质量的呈现图片
bmp 扩展名为 .bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。 支持的颜色丰富、保留的细节更多 对图片细节要求极高的场景
gif 扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。 支持的颜色较少、支持简单透明背景、支持动态图。 网页中的动态图片。
webp 扩展名为 .webp，谷歌推出的一种格式，专门用来在网页中呈现图片。 具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。 网页中的各种图片。 一般使用 js 解决
base64 一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。需要把图片进行 base64 编码，形成一串文本。 直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。 一些较小的图片，或者需要和网页一起加载的图片。 靠一些工具或网站生成。

表格相关

标签名 标签语义 常用属性 单/双标签
table 表格 width ：设置表格宽度。
height ：设置表格最小高度，表格最终高度可能比设置的值大。
border ：设置表格边框宽度。
cellspacing ： 设置单元格之间的间距。		 双标签
thead 表格头部 height ：设置表格头部高度。
align ： 设置单元格的水平对齐方式，可选值如下：
1. Left ：左对齐 2. Center ：中间对齐 3. Right ：右对齐
valign ：设置单元格的垂直对齐方式，可选值如下：
1. top ：顶部对齐 2. middle ：中间对齐 3. bottom ：底部对齐		 双标签
tbody 表格主体 同上 双标签
tr 行 同上 双标签
tfoot 表格脚注 同上 双标签
td 普通单元格 width ：设置单元格的宽度，同列所有单元格全都受影响。
heigth ：设置单元格的高度，同行所有单元格全都受影响。
align ：设置单元格的水平对齐方式。
valign ：设置单元格的垂直对齐方式。
rowspan ：指定要跨的行数。
colspan ：指定要跨的列数。		 双标签
th 表头的单元格 常用属性同上 双标签

表单相关

标签名 标签语义 属性值 单/双标签
form 表单 action 属性： 表单要提交的地址。
target 属性： 要跳转的新地址打开位置; 值: _self 、 _blank
method 属性： 请求方式，值： get 、 post		 双标签
input 多种形式的表单控件 type 属性： 指定表单控件的类型。
name 属性： 指定数据名称
value 属性：对于输入框：指定默认输入的值；
对于单选和复选框：实际提交的数据；
对于按钮：显示按钮文字。
disabled 属性： 设置表单控件不可用。
maxlength 属性： 用于输入框，设置最大可输入长度。
checked 属性： 用于单选按钮和复选框，默认选中		 单标签
textarea 文本域 name 属性： 指定数据名称
rows 属性： 指定默认显示的行数，影响文本域的高度。
cols 属性： 指定默认显示的列数，影响文本域的宽度。
disabled 属性： 设置表单控件不可用。		 双标签
select 下拉框 name 属性： 指定数据名称
disabled 属性： 设置整个下拉框不可用。		 双标签
option 下拉框中的选项 disabled 属性： 设置拉下选项不可用。
value 属性： 该选项事件提交的数据 （不指定 value，会把标签中的内容作为提交数据）
selected 属性： 默认选中。		 双标签
button 按钮 disabled 属性： 设置按钮不可用。
type 属性： 设置按钮的类型，值： submit （默认）、 reset 、 button		 双标签
label 与表单控件关联 for 属性： 值与要关联的表单控件的 ID 值相同 双标签
fieldset 表单边框

博客中所有图片均来源于参考视频，一切图片版权归尚硅谷所有。

警告
本文最后更新于 April 26, 2024，文中内容可能已过时，请谨慎使用。
更新于 2024-04-26
 Html, 技术学习
返回 | 主页