1200字范文 > 日常更新《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.23

日常更新《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.23

时间：2023-10-31 03:46:47

一篇文章让你从HTML零基础入门前端开发

前言：
此文为玄子，复习ACCP-S1课程后，整理的文章，文中对知识点的解释仅为个人理解，源码均可直接复制运行
配套PPT，站点源码，等学习资料请加文章封面联系方式

一、了解 HTML5

1.1 HTML 简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析

1.2 HTML 发展史

1.2.1 HTML1.0

超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）

1.2.2 HTML 2.0

1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

1.2.3 HTML 3.2

1997年1月14日，W3C推荐标准

1.2.4 HTML 4.0

1997年12月18日，W3C推荐标准

1.2.5 HTML 5.0

10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

1.3 HTML5 的优势

解决了跨浏览器问题

化繁为简

简化的DOCTYPE

强大的HTML5 API

以浏览器原生能力替代复杂的JavaScript代码

跨平台

支持多种类型设备的跨平台适用性，减少了开发人员的工作量

功能强大，新增特性

支持本地存储、离线缓存、地理位置等

新增实用标签

支持绘制图形

支持播放视频和音频

1.4 W3C 标准

W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C官网

W3C中文官网

W3C标准包括

结构化标准语言（XHTML 、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript ）

1.5 常见 HTML 编辑器

记事本DreamweaverWebStorm WebStorm 是 Jetbrains (捷克)公司旗下一款 JavaScript 开发工具。被广大中国 JS 开发者誉为“Web前端开发神器” VSCode

1.6 安装 WebStorm

WebStorm 是最专业的的前端开发工具，但是由于版权原因这里不过多介绍

WebStorm 官网

详细安装教程请加文章封面联系方式

二、HTML 基础

2.1 网页基本标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>网页基本标签</title></head><body>Change The Word!</body></html>

2.1.1 基本标签语义

2.1.2 标签关系

包含关系

<head><title></title></head>

并列关系

<head></head><body> </body>

HTML文档中的标签通常是成对出现，以<>开始，</>结束，也有部分标签不是成对出现，如<br>、<img>等等

2.2 基础标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>基础标签</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><hr><p>山园小梅·其一[ 宋 ] 林逋原文译文对照众芳摇落独暄妍，占尽风情向小园。疏影横斜水清浅，暗香浮动月黄昏。霜禽欲下先偷眼，粉蝶如知合断魂。幸有微吟可相狎，不须檀板共金尊。</p><hr><p>山园小梅·其一 <br>[ 宋 ] 林逋<br>原文译文对照<br>众芳摇落独暄妍，占尽风情向小园。<br>疏影横斜水清浅，暗香浮动月黄昏。<br>霜禽欲下先偷眼，粉蝶如知合断魂。<br>幸有微吟可相狎，不须檀板共金尊。</p><hr><p>山园小梅·其一</p><p> [ 宋 ] 林逋</p><p> 原文译文对照</p><p> 众芳摇落独暄妍，占尽风情向小园。</p><p> 疏影横斜水清浅，暗香浮动月黄昏。</p><p> 霜禽欲下先偷眼，粉蝶如知合断魂。</p><p> 幸有微吟可相狎，不须檀板共金尊。</p><hr><strong>粗体</strong><br><em>斜体</em><br><strong><em>加粗斜体</em></strong><hr><p>空格</p><p>空            格</p><p>大于号：> ></p><p>小于号：< <</p><p>分号："" ""</p><p>版权符号：©</p></body></html>

2.2.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即：<h1>到<h6>

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

单词 head 的缩写，意为：头部、标题
一个标签独占一行
标签语义：作为标题使用，并且依据重要性递减

2.2.2 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签</p>

单词 paragraph 的缩写，意为：段落
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙
标签语义：可以把 HTML 文档分割为若干段落

2.2.3 换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br>

<br>

单词 break 的缩写，意为：打断、换行
<br>是个单标签
<br>标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距
标签语义：强制换行

2.2.4 分割线标签

<hr>

2.2.5 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示

<strong>粗体</strong><br><em>斜体</em><br><strong><em>加粗斜体</em></strong>

标签语义：突出重要性，比普通文字更重要

2.2.6 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签

HTML 中的注释以：结尾

注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的

2.2.7 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqtuwit0-1671796233880)(./assets/2.2.7.png)]

2.3 图像标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图像标签</title></head><body><img alt="替换文本" height="500px" src="../../resources/image/玄子头像.png" title="标题" width="500px"><img alt="替换文本" height="500" src="../resources/玄子头像.png" title="标题" width="500"></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1JajJs2-1671796233880)(./assets/2.3.png)]

2.3.1 图像标签属性

在 HTML 标签中，<img>标签用于定义 HTML 页面中的图像

<img alt="替换文本" height="图像尺寸" src="图像URL" title="标题" width="500px">

单词 image 的缩写，意为图像

图像标签可以同时拥有多个属性（其它标签同理）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签同理）属性均采取键值对的格式，即：key="value"格式，属性="属性值"设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

2.3.2 相对路径

以引用文件所在位置为参考基础，而建立出目录路径

2.3.3 绝对路径

指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径

Windows 系统的绝对路径：F:\html\img\logo.png
网络地址：/

相对路径为/（正斜杆），绝对路径为\（反斜杆）实际开发中建议使用相对路径或网络地址（都是/正斜杆）

2.4 超链接标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接标签</title></head><body><a href="" name="xz">顶部</a><br><a href="03_图像标签.html" target="_blank" title="标题">点击在新窗口打开03</a><br><a href="03_图像标签.html" target="_self" title="标题">点击在本窗口打开03</a><hr><a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a><br><a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a><br><a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a><br><hr><a href="#xz">点击跳转到顶部</a><br><a href="mailto:y766706944@">点击邮箱联系</a></body></html>

2.4.1 超链接标签属性

在 HTML 标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面

<a href="跳转目标" target="新窗口跳转方式">内容</a>

单词 anchor 的缩写，意为：锚

2.4.2 链接分类

**外部链接：**例如：<a href="/">奇迹秀</a>**内部链接：**网站内部页面之间相互链接，直接链接内部页面名称即可，例如：<a href="index.html">首页</a>**空链接：**如果当时没有确定链接目标时写，<a href="#">首页</a>"，当用户点击链接时，网页不会任何效果**下载链接：**如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip等），便会下载这个文件**网页元素链接：**在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接**锚点链接：**点击链接，可以快速定位到某页面中的某个位置需要一个标记点和跳转点标记点声明：name 属性并赋值<a href="" name="xz">顶部</a>跳转点：href 属性跳转 name 声明的标记点，name 值前面要加上 #<a href="#xz">点击跳转到顶部</a>**功能链接：**可以调用一些功能性的操作<a href="mailto:3336392096@">点击邮箱联系</a>直接打开本地默认邮箱软件

2.5 行内元素&块元素

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>行内元素&块元素</title></head><body><a href="#">a标签</a><a href="#">a标签</a><img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px"><img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px"><hr><h3>标题标签</h3><h4>标题标签</h4><p>p标签</p><p>p标签</p></body></html>

块元素

无论内容多少，该元素独占一行<p>、<h1>-<h6>…

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行<a>、<strong>、<em>…

2.6 列表标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表标签</title></head><body><ol><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li></ol><hr><ul><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li></ul><hr><dl><dt>开发</dt><dd>JAVA</dd><dd>HTML</dd><dd>CSS</dd><dd>SQL</dd></dl></body></html>

列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便。在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局

2.6.1 使用场景

2.6.2 无序列表

<ul>标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义（开发中经常使用）

<ul><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li></ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在li中<li>与</li>之间相当于一个容器，可以容纳所有的元素无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置

附：去除 li 前符号的方法：style="list-style: none;"

2.6.3 有序列表

有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义（开发中不太常用）

在 HTML 标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

<ol><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li></ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的<li>与</li>之间相当于一个容器，可以容纳所有的元素有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置

附：去除 li 前符号的方法：style="list-style: none;"

2.6.4 自定义列表

自定义列表常用于对术语或名词进行解释、描述和展开，定义列表的列表项前没有任何项目符号（开发中常用）

在 HTML 标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

<dl><dt>开发</dt><dd>JAVA</dd><dd>HTML</dd><dd>CSS</dd><dd>SQL</dd></dl>

<dl></dl>里面只包含<dt>、<dd><dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

2.7 表格标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格标签</title></head><body><table border="1px"><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table><hr><table border="1px"><tr><td colspan="3">学生成绩</td></tr><tr><td rowspan="2">玄子</td><td>JAVA</td><td>100</td></tr><tr><td>HTML</td><td>99</td></tr><tr><td rowspan="2">玉玉诏</td><td>JAVA</td><td>90</td></tr><tr><td>HTML</td><td>80</td></tr></table></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pLv3XDPC-1671796233881)(./assets/image-161018164.png)]

2.7.1 表格的主要作用

为什么使用表格

简单通用

结构稳定

基本结构

行

列

单元格

表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的 “布局”

2.7.2 表格的基本语法

<table><tr><td>单元格</td></tr></table>

<table></table>是用于定义表格的标签<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中字母 td 指表格数据table data即数据单元格的内容单元格 td 里面可以放任何的元素

2.7.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示

<th>标签表示 HTML 表格的表头部分table head的缩写

<table><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></table>

2.7.4 表格属性

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240"></table>

2.7.5 表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成：表格头部和表格主体两大部分。

在表格标签中，分别用：<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域，这样可以更好的分清表格结构。

<thead></thead>：用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行，且一般<tr>标签中推荐放置<th>标签<tbody></tbody>：用于定义表格的主体，主要用于放数据本体以上标签都是放在<table></table>标签中

<table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>玄子</td><td>男</td><td>16</td></tr></tbody></table>

2.7.6 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合并单元格即可。

合并单元格的方式：

跨行合并（上下合并）：rowspan="合并单元格的个数"跨列合并（左右合并）：colspan="合并单元格的个数"

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"></td>删除多余单元格

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>合并单元格</title></head><body><table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1S9lYl2N-1671796233882)(./assets/2.7.6.png)]

2.7.7 综合案例

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>综合案例</title></head><body><table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5"><thead><tr><th>one</th><th>two</th><th>three</th><th>four</th></tr></thead><tbody><tr><td rowspan="3">1</td><td colspan="3">234</td></tr><tr><td>2</td><td>3</td><td>4</td></tr><tr><td>2</td><td>3</td><td>4</td></tr></tbody></table></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nGM7jXlS-1671796233882)(./assets/2.7.7.png)]

2.8 音视频标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>音视频标签</title></head><body><video autoplay controls src="../../resources/video/G.E.M.邓紫棋-GLORIA.mp4"></video><audio autoplay controls src="../../resources/audio/G.E.M.邓紫棋-天空没有极限.flac"></audio></body></html>

2.9 网页结构分类

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>网页结构分类</title></head><body><header><h1>网页头部</h1></header><section><h1>网页主体</h1></section><footer><h1>网页底部</h1></footer></body></html>

2.10 内联标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>内联标签</title></head><body><iframe frameborder="1" height="500px" name="xz" src="01_网页基本标签.html" width="500px"></iframe><br><a href="02_基础标签.html" target="xz">点击跳转02</a><br><a href="03_图像标签.html" target="xz">点击跳转03</a></body></html>

2.11 表单标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="11_表单标签.html" method="get"><p>用户名：<input name="admin" type="text"></p><p>密  码：<input name="pwd" type="password"></p><p>按钮：<input type="button" value="按钮"><input height="40px" name="img" src="../../resources/image/玄子头像.png" type="image" width="40px"><input type="submit"><input type="reset"></p><p>性别：<input checked id="1" name="sex" type="radio" value="boy">男<label for="0"><input id="0" name="sex" type="radio" value="girl">女</label></p><p>爱好：<input name="hobby" type="checkbox" value="Java">Java<input checked name="hobby" type="checkbox" value="HTMl">HTMl<input name="hobby" type="checkbox" value="CSS">CSS<input name="hobby" type="checkbox" value="SQL">SQL</p><p>提交文件：<input name="fill" type="file"></p><p>邮箱：<input name="email" type="email"></p><p>URL：<input name="url" type="url"></p><p>数字：<input max="100" min="0" name="num" step="5" type="number" value="0"></p><p>滑块：<input max="100" min="0" name="range" step="10" type="range" value="50"></p><p>搜索：<input name="search" type="search"></p><p>地区：<select name="select"><option value="hn">河南</option><option value="hb">河北</option><option selected value="hn">湖南</option><option value="hb">湖北</option></select></p><p>反馈：<textarea cols="20" name="txt" rows="4"></textarea></p><hr><p>表单应用</p><p>只读：<input name="readonly" readonly type="text" value="你好！"></p><p>禁用：<input disabled name="disabled" type="reset" value="按钮"></p><p>隐藏：<input hidden name="hidden" type="text" value="你好！"></p><hr><p>表单初级验证</p><p>必填：<input name="required" required type="text"></p><p>提示：<input name="placeholder" placeholder="请输入账号！" type="text"></p><p>正则：<input name="pattern" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/" type="text"></p></form></body></html>

2.12 HTML总结

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML总结</title></head><body><a href="">点击跳转CSDN博客</a></body></html>

三、CSS 基础

3.1 链接 CSS 的三种方式

h2 {color: green;/*样式名称*/ /*值*/}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS基础</title><style>h1 {color: red;}</style><link rel="stylesheet" href="../css/01_Style.css"></head><body><h1>一级标签</h1><h2>二级标签</h2><h3 style="color:yellow;">三级标签</h3></body></html>

3.2 基本选择器

/*标签选择器*//*语法：直接写想要生效的标签名称就会对页面中所有的对应标签生效*/h1 {color: red;}/*类选择器*//*语法：以英文字符 . 点开头后面写名称可以自定义*/.xz{color:green;}/*ID选择器*//*语法：以 # 符号开头，后面写名称可以自定义*/#yz{color:yellow;}/*---------------------------------------------*/h3{color:pink;}#zz{color:blue;}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>基本选择器</title><link rel="stylesheet" href="../css/02_Style.css"></head><body><h1>一级标签</h1><h1>一级标签</h1><h2 id="yz">二级标签</h2><h2 class="xz">二级标签</h2><h2>二级标签</h2><hr><h3>三级标签</h3><h3 class="xz">三级标签</h3><h3 id="zz" class="xz">三级标签</h3></body></html>

玄子12月23日

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。