web前端开发HTML4基础教程

零点浮生

已于 2024-10-06 10:48:33 修改

阅读量1.2k

点赞数 32

文章标签：前端 html visual studio code

于 2024-10-06 10:47:02 首次发布

本文链接：https://blog.csdn.net/weixin_48242946/article/details/142723839

版权

1. 前置知识

两位先驱:

图灵：人工智能之父
冯诺依曼：现代计算机之父

2. HTML文档声明

<!DOCTYPE html>
//默认是HTML5
//"DOCTYPE"是document和type的结合

3. HTML标签属性

可以写在起始标签或者单标签中，如：<标签名属性名=“属性值”>

<input type="text" type="password">
//属性一样的话，先写的为主，后写的失效

4. HTML基本结构

4.1

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

4.2 网页的基本结构

<html>
    <head>
    <title>...</title>
    </head>
    <body>
    ...
    </body>
</html>

4.3 HTML之间的关系

父元素、子元素、祖先元素、后代元素、兄弟元素

5. HTML字符编码

计算机对数据的操作：

存储时，对数据进行编码
读取时，对数据进行解码

编码、解码，会遵循一定的规范————字符集
平时编写代码时，统一使用UTF-8编码（最稳妥）

<head>
    <meta charset="UTF-8"/>
</head>

6. HTMl设置语言

主要作用

让浏览器显示对应的翻译提示
有利于搜素引擎优化

具体写法：

<html lang="zh-CN">
...
</html>

常用写法：

zh-CN:中文-中国大陆（中文简体）
zh-TW:中文-中国台湾（繁体中文）
zh：中文
en-US:英文-美国
en-GB:英文-英国

7. 开发者文档

W3C官网：www.w3c.org
W3School:www.w3school.com.cn
MDN:developer.mozila.org————平时用的多

8. HTML排版标签

标签名	标签含义	单/双标签
h1~h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局（生活中的包装袋）	双

注意：

h1最好写一个，h2~h6能适当多写
h1~h6不能相互嵌套；
p标签很特殊！它里面不能有：h1~h6、p、div标签

9. HTML语义化标签

语义化：标签默认的效果不重要，语义最重要！
作用：

代码的可读性更强，更清晰
有利于SEO（搜索引擎优化）
方便设备解析（屏幕阅读器、盲人阅读器）

10. 块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）
行内元素：不独占一行
使用规则

3.1 块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）
3.2 行内元素中能写行内元素，但不能写块级元素
3.3 一些特殊的规则：
- h1~h6不能互相嵌套
- p中不要写块级元素

11. 文本标签

用于包裹：词汇、短语等
通常写在排版标签里面
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
文本标签通常都是行内标签

常用的：

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

生活中的例子：div是大包装袋，span是小包装袋

不常用：

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

备注：

这些不常用的标签，编码时不用过于纠结
blockquote与address是快级元素，其他的文本标签，都是行内元素
有些语义感不强的标签，我们很少使用，例如：
small、b、u、q、blockquote
HTML标签太多了，记住那些重要的即可，例如：h1~h6、p、div、em、strong、span

12. 图片标签

标签名	标签语义	常用属性	单/双标签
img	图片	src:图片路径 alt:图片描述 width:图片宽度 heigth:图片高度	单

总结：

像素（px）是一种单位
alt属性的作用：
- 搜索引擎通过alt属性，得知图片的内容。——最主要的作用
- 当照片无法展示时候，有些浏览器会显示alt属性的值
- 盲人阅读器会朗读alt属性的值

13. 路径的分类

相对路劲：以当前位置作为参考点，去建立路径
绝对路径：以根位置作为参考点，去建立路径
绝对路径分为本地绝对路径和网络绝对路径

注意点：

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败

14. 常见图片格式

jpg格式

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

png格式

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

bmp格式

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

gif格式

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

webp格式

概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片；
主要特点：具备上述几种格式的优点
使用场景：网页中的各种图片

base64格式

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

15. 超链接

15.1 跳转页面

主要作用：从当前页面进行跳转

标签名	标签语义	常用属性	单/双标签
a	超链接	href:要跳转的具体位置。 target:跳转时如何打开页面，常用值如下： _self:在本页签中打开 _blank:在新页签中打开	双

<!--跳转到其他页面-->
<a href="https://www.jd.com/" target="_blank">去京东</a>

<!--跳转本地网页-->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

15.2 跳转到文件

<!--浏览器能直接打开的文件-->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.jpg">看小电影</a>

<!--浏览器不能打开的文件，会自动触发下载-->
<a href="./resource/内部资源.zip">内部资源</a>

<!--强制触发下载-->
<a href="./resource/小电影.jpg" download="电影片段.mp4">看小电影</a>

注意1：若浏览器无法打开文件，则会引导用户下载
注意2：若想强制触发下载，请使用download属性，属性值即为下载文件的名称

15.3 跳转到锚点

具体使用方法：

第一步：设置锚点

<!-- 第一种方法：a标签配合name属性-->
<a name="test1"></a>

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

注意点：

具有href属性的a标签是超链接，具有name属性的a标签是锚点
name和id都是区分大小写的，且id最好不要数字开头

第二步：跳转锚点

<!--跳转到test锚点-->
<a href="#test">去test锚点</a>

<!--跳转到本页面顶部-->
<a href="#">回到顶部</a>

<!--跳转到其他页面锚点-->
<a href="demo.html#test">去deml.test页面的test锚点</a>

<!--刷新本页面-->
<a href="">刷新本页面</a>

<!--执行一段js，如果还不知道执行什么，可以留空，javascript：；-->
<a href="javascript:alert(1);">点我弹窗</a>

15.3 唤起指定应用

通过a标签，可以唤起设备应用程序

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

16. 列表

有序列表
概念：有顺序或侧重顺序的列表

<h2>把大象放冰箱里有几步</h2>
<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱关上</li>
</ol>

无序列表
概念：无顺序或不侧重顺序的列表

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

列表嵌套
概念：列表中的某项内容，又包含一个列表（注意：嵌套时，务必把结构写完整

<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>

注意：li标签最好写在ul或ol中，不要单独使用

自定义列表
概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表
一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）

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

17. 表格

1. 基础结构

1.1 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成

1.2 表格涉及到的标签

table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格脚注
tr：每一行
th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td）

<table>
    <!--表格标题-->
    <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>19</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>20</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
    </tbody>
    <!--表格脚注-->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>共计：三人</td>
        </tr>
    </tfoot>
</table>

2. 常用属性

width:设置单元格宽度
height:设置单元格高度
align:设置单元格水平对齐方式，有left、center、right
valign:设置单元格的垂直对齐方式，由top、middle、bottom
rowspan:指定要跨的行数
colspan:指定要跨的列数

注意点：
table元素的border属性只能控制最外侧边框的宽度

18. 常用标签补充

标签名	标签含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示（一般用在页面中嵌入大段代码）	双

19. 表单基本结构

1. 各种标签

标签名	标签语义	标签含义	单/双标签
form	表单	action:用于指定表单的提交地址 target:用于控制表单提交后，如何打开页面，有_self和_blank method:用于控制表单的提交方式	双
input	输入框	type:设置输入框的类型,目前用到的值是text,表示普通文本 name:用于指定提交数据名字	单
button	按钮	略	双

示例代码：

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

2. 常用表单控件

2.1 文本输入框

<input type="text" name="xxxx" value="xxxxx"  maxlenrth="10">

2.2 密码输入框

<input type="password" name="xxx" value="xxx" maxlength="6">

2.3 单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male" checked>男
checked属性：选框初始默认选中

2.4 复选框

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

2.5 隐藏域

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

2.6 提交按钮

<!--写法一-->
<input type="submit" value="点我提交表单">
<!--写法二-->
<button>点我提交表单</button>

2.7 重置按钮

<!--写法一-->
<input type="reset" value="点我重置">
<!--写法二-->
<button type="reset">点我重置</button>

2.8 普通按钮

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

2.9 文本域

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

rows属性：指定默认显示的行数，会影响文本域的高度。
cols属性：指定默认显示的列数，会影响文本域的宽度；

2.10 下拉框

<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
    <!--select:初始默认选中-->
</select>

2.11 禁用表单控件

input、textarea、button、select、option都可以设置disabled属性。

2.12 label标签
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种label使用方式：

让label标签的for属性的值等于表单控件的id

<label for="shili">示例：</label>
<textarea id="shili" name="xxx"></textarea>

把表单控件套在label标签的里面

<label>
    <input type="checkbox" name="xxx">示例
</label>

2.13 fieldset与legend的使用（了解）
fieldset可以为表单控件分组、legend标签是分组的标题
示例：

<fieldset>
    <legend>主要信息</legend>
    <!--写一些表单组件-->
</fieldset>

3. 框架标签

标签名	标签语义	标签含义	单/双标签
iframe	框架（在网页中嵌入其他文件）	name：框架名字，可以与target属性配合 width:框架的宽 height：框架的高度是否显示边框，值：0或1	双

iframe标签的实际应用：

在网页中嵌入广告。
与超链接或表单的target配合，展示不同的内容

20. HTML字符实体

常用字符实体：

空格：&nbsp
小于号<：&lt
大于号>：&gt
和号&：&amp
元￥：&yen
乘号：&time
除号：&divide

21. HTML全局属性

常用的全局属性

属性名	含义
id	给标签指定唯一的标识
class	给标签指定类名，随后通过css就可以给标签设置样式
style	给标签设置css样式
dir	内容的方向，值：ltr、rtl
title	给标签设置一个文字提示，一般超链接和图片用得比较多
lang	给标签指定语言