【前端开发笔记】尚硅谷-html

原创已于 2025-01-16 18:12:34 修改 · 1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #html #前端

于 2024-11-02 14:46:26 首次发布

一、基础知识

1.计算机基础知识

计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。
计算积由硬件 + 软件构成：
- 硬件：看得见摸得着的物理部件。
- 软件：可以指挥硬件工作的指令。
软件的分类
- 系统软件：Windows、Linux、Android、Harmony等。
- 应用软件：微信、QQ、王者荣耀、PhotoShop等。
图示如下

2. 浏览器的相关知识

浏览器是网页运行的平台，常见的浏览器有：谷歌（chrome）、safari、IE、火狐（Firefox）、*欧朋（opera）*等

3.网页的相关概念

网址：我们在浏览器中输入的地址。
网页：浏览器所呈现的每一个页面。
网站：多个网页构成了一个网站。
网页标准：

二、HTML简介

1.什么是HTML？

全称：HyperTextMarkupLanguage（超文本标记语言）。

超文本：暂且简单理解为“超级的文本”，和普通文本比，内容更丰富。
标记：文本要变成超文本，就需要用到各种标记符号。
语言：每一个标记的写法、读音、使用规则，组成了一个标记语言。

2.相关国际组织

（相关的知识可以去官网查）

IETF 官网

 全称：InternetEngineeringTaskForce（国际互联网工程任务组），
 成立于1985年底，是一个权威的互联网技术标准化组织，
 主要负责互联网相关技术规范的研发和制定，
 当前绝大多数国际互联网技术标准均出自IETF。

W3C 官网

全称：WorldWideWebConsortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。共计发布了200多项技术标准和实施指南，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

3.WHATWF 官网

全称：WebHypertextApplicationTechnologyWorkingGroup（网页超文本应用技术工作小组）成立于2004年，是一个以推动网络HTML5标准为目的而成立的组织。由Opera、Mozilla基金会、苹果，等这些浏览器厂商组成。

三、HTML入门

1.HTML标签

标签又称为元素，是HTML的基本单位。
标签分为：双标签与单标签（大多数都是双标签）
标签名推荐小写，小写更规范
双标签：
5.单标签：

2.HTML标签属性

用于给标签提供附加信息。
可以写在：起始标签或单标签中，形式如下：
有些特殊的属性，没有属性名，只有属性值，例如：

<input disabled>

注意点：

属性名、属性值不能乱写，都是W3C规定好的。
属性名、属性值，都不区分大小写，但推荐小写。
双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password>

3.HTML基本结构

在网页中可以点击鼠标右键，选择“检查”。
【检查】和【查看网页源代码】的区别

【查看网页源代码】看到的是：程序员编写的源代码。
【检查】看到的是：经过浏览器 “处理” 后的源代码。
备注：日常开发中，【检查】用的最多

网页的基本结构如下
代码:

<html>
   <head>
      <title>网页标题</title>
   </head>
   <body>
       .....
  </body>
</html>

4.HTML注释

对于代码进行解释说明
写法
PS:注释不可以嵌套

5.HTML 字符编码

计算机对数据的操作
- 存储时，对数据进行编码。
- 读取时，对数据进行解码。
编码、解码，会遵循一定的规范----字符集。
注意

存储时务必采取合适的字符编码。否则会无法存储，数据丢失！
存储时采用哪种方式编码，读取时就用哪种方式解码。否则数据错乱（乱码）

平常写代码：统一采用UTF-8编码。

6.HTML标准结构

html标准结构如下

< !DOCTYPE html>
< html lang="zh-CN">
    < head>
         <meta charset="UTF-8">
         <title>我是一个标题</title>
    < /head>
      <body>
      
     </body>
< /html>

四、HTML基础

1.排版标签

标签名	标签含义	标签类型
h1~h6	标题	双
p	段落	双
div	没有任何意义，用于整体布局	双

h1最好写一个，h2~h6可以适当多写
h2~h6不能嵌套

2.块级元素与行内元素

块级元素独占一行(排版标签都是块级元素)。
行内元素不独占一行
注意：块级元素中能写行内元素和块级元素

3.文本标签（常用的）

用于包裹：词汇，短语等。
通常写在排版标签里面。
排版标签更宏伟，文本标签更微观。
文本标签都是行内元素

标签名	标签语义	标签类型
em	着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的通用容器	双

4.文本标签（不常用）

标签名	标签语义	单 / 双标签
cite	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）	双
dfn	特殊术语，或专属名词	双
del 与 ins	删除的文本【与】插入的文本	双
sub 与 sup	下标文字【与】上标文字	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来，例如：标识设备输出	双
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
abbr	缩写，最好配合上 title 属性	双
bdo	更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、rtl	双
var	标记变量，可以与 code 标签一起使用	双
small	附属细则，例如：包括版权、法律文本。—— 很少使用	双
b	摘要中的关键字、评论中的产品名称。—— 很少使用	双
i	本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）	双
u	与正常内容有反差文本，例如：错的单词、不合适的描述等。——很少使用	双
q	短引用 —— 很少使用	双
blockquote	长引用 —— 很少使用	双
address	地址信息	双

PS：blockquote与address是块级元素，其他的都是行内元素

5.图片标签

1.基本使用

在这里插入图片描述

2.路径的分类

1.相对路径：以当前位置作为参考点，去建立路径
在这里插入图片描述
2.绝对路径：以根位置作为参考点，去建立路径
1.本地绝对路径（很少使用）
2. 网络绝对路径（点击网页图片查看即可）

3.常见的图片格式

jpg格式：

概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节
丢弃了）。
主要特点：支持的颜色丰富、占用空间较小、不~~支持透明背景~~ 、~~不支持动态图~~ 。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。—— 该格式网
页中很常见

png格式

概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、~~不支持动态图~~ 。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如：公司logo图、重要配
图等。

bmp格式

概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动
态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使
用）

gif格式

概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。

webp格式

概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。

base64格式

本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行 base64 编码，形成一串文本。
如何生成：靠一些工具或网站。
如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。

4.超链接

主要作用：从当前页面进行跳转
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

标签名	常用属性
a	href ：指定要跳转到的具体目标。target ：控制跳转时如何打开页面，常用值如下:`_self` ：在本窗口打开。`_blank` ：在新窗口打开。id ：元素的唯一标识，可用于设置锚点。name ：元素的名字，写在 a 标签中，也能设置锚点。

1.跳转到页面

<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

2.跳转到文件

<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

3.跳转到锚点

锚点就是网页中的一个标记点
具体方式：

第一步：设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>

第二步：跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

4.唤起指定引用

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

5.列表

1.有序列表：有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>

2.无序列表：无顺序或不侧重顺序的列表。

<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>

3.列表镶嵌

<h2>我想去的几个城市</h2>
<ul>
     <li>成都</li>
     <li>
         <span>上海</span>
         <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li>
               <a href="https://www.opg.cn/">东方明珠</a>
            </li>
            <li>迪士尼乐园</li>
         </ul>
      </li>
       <li>西安</li>
       <li>武汉</li>
</ul>

4.自定义列表：一个包含术语名称以及术语描述的列表。
一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述

<h2>如何高效的学习？</h2>
<dl>
	<dt>做好笔记</dt>
	<dd>笔记是我们以后复习的一个抓手</dd>
	<dd>笔记可以是电子版，也可以是纸质版</dd>
	<dt>多加练习</dt>
	<dd>只有敲出来的代码，才是自己的</dd>
	<dt>别怕出错</dt>
	<dd>错很正常，改正后并记住，就是经验</dd>
</dl>

6.表格

1.基本结构

有表格标题，表格头部，表格主体，表格脚注，四部分组成。
表格涉及的标签：
table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格注脚
tr：每一行
th td：每一个单元格（备注：表格头部中用th,表格主体、表格脚注中用：td）

在这里插入图片描述

3.具体编码

<table border="1">
	<!-- 表格标题 -->
	<caption>学生信息</caption>
	<!-- 表格头部 -->
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>民族</th>
			<th>政治面貌</th>
		</tr>
</thead>
<!-- 表格主体 -->
<tbody>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>18</td>
		<td>汉族</td>
		<td>团员</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>女</td>
		<td>20</td>
		<td>满族</td>
		<td>群众</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>男</td>
		<td>20</td>
		<td>回族</td>
		<td>党员</td>
	</tr>
	<tr>
		<td>赵六</td>
		<td>女</td>
		<td>21</td>
		<td>壮族</td>
		<td>团员</td>
	</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td>共计：4人</td>
	</tr>
</tfoot>
</table>

快速制表格的方法

html table>tr*3>th*3 在编译器中书写如上代码然后将鼠标光标放在文段最后按下tab键

在这里插入图片描述
注意点：

table 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的度，
只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。
默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了

补充

br表示换行单标签
hr表示分割单标签
pre表示按原文显示（一般用于在页面中嵌入大段代码）双标签

7.表单

概念：一个包含交互的区域，用于收集用户提供的数据。
在这里插入图片描述
例如：

<form action="https://www.baidu.com/s"target="_blank" method="get">
	<input type="text" name="wd">
	<button>去百度搜索</button>
</form>

2.常用表单控件
一. 文本输入框

<input type="text" >

常用属性：
name属性：数据的名称
value属性：输入框的默认输入值
maxlength属性：输入框最大可输入的长度

二.密码输入框

<input type="password">

常用属性：
name属性：数据的名称
value属性：输入框的默认输入值(一般不用，无意义)
maxlength属性：输入框最大可输入的长度

三.单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。

四.复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性如下：：
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。

五.隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。

六.提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

七.重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意点：
1 button 不要指定 name 属性
2input 标签编写的按钮，使用 value 属性指定按钮文字

八.普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意：普通按钮的type值为buttom，若不写type的值是submit会引起表单的提交。

九.文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性如下：

rows 属性：指定默认显示的行数，会影响文本域的高度。
cols 属性：指定默认显示的列数，会影响文本域的宽度。
不能编写 type 属性，其他属性，与普通文本输入框一致

十.下拉框

<select name="from">
	<option value="黑">黑龙江</option>
	<option value="辽">辽宁</option>
	<option value="吉">吉林</option>
	<option value="粤" selected>广东</option>
</select>

常用属性及注意事项：

name 属性：指定数据的名称。
option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文
字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
option 标签设置了 selected 属性，表示默认选中。

1.给表单控件的标签设置设置disabled既可禁用表单。

label标签
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：

让label标签的for属性的值等于表单控的id。
把表单控件套在label标签里面。
例如1.

 <label for="zhanghu">账户：</label>
      <input id="zhanghu"    type="text" name="account"   maxlength="10"><br>

例如2.

<label><input type="radio" name="gender" value="female" >女<br></label><br>

在这里插入图片描述

有用的标签

<input type="datetime-local" name="date-time">

呈现的样式为在这里插入图片描述

如何点击图片跳转页面：

  <a href="https://baidu.com" target="_blank">
            <img src="/tiger1.jpg" title="这是一张图片" >
        </a>

将图片嵌入在网站代码里面即可完成，且title的目的能让鼠标在图片上是出现title里面的文字

框架标签

标签名	功能和语义	属性	标签种类
`iframe`	框架(在网页中嵌入其他的文件)	`name` 框架名字，可以与`target`属性配合。`width`：框架的宽。`height`:框架的高度 `frameborder`：是否显示边框，值：0或者1	双