00-基础入门

image-20251125100829463

1. 行业介绍

美工（切图仔） → 网页制作 → web前端你开发 → 全栈开发 → 大前端。

大前端应用：

  • 网站
  • 管理系统
  • APP
  • 小程序
  • 数据可视化
  • 智能电视
  • 桌面应用
  • 网页游戏
  • 工具和后端

2. 网页web

2.1 w3c标准

蒂姆·伯纳斯·李 → W3C 标准。

  • 网页通过浏览器才能访问阅读
  • 网页是网站中的一页
  • 文件扩展名 .html

HTML: 超文本标记语言，HyperText Markup Language。

eg：

1
2
3
<center>
    hello, html.
</center>

如果使用ie8浏览器则不支持 center 标签，此类情况可以通过网站 https://caniuse.com/

去查询html标签在各大浏览器的兼容性问题。

image-20251125102313062

如图所示，IE在11版本之后才支持。

  • 常见浏览器：Opra欧朋、Firefox火狐、IE/Edge微软、Safari苹果、Chrome谷歌、QQ浏览器、360浏览器

QQ浏览器的特殊性：微信的所有页面均由其提供内核技术，兼容性要倾向于它即可。

为了html标签在不同浏览器与解决兼容显示的问题，蒂姆·伯纳斯·李成立了W3C万维网联盟，官网 https://w3.org/

特殊情况：ie在早期的ie6版本没有遵循w3c标准，导致很多标签不兼容问题，现阶段不是主流可以选择放弃。

2.2 web组成

  • HTML结构：W3C制定了结构HTML的语法和标准
  • CSS表现：W3C制定了表现CSS的语法和标准
  • JS行为：W3C、ECMA制定了行为标准（W3C DOM, ECMAScript）

3. 第一个网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--
 * @作者：Jerry
 * @时间：2017-04-28 10:43:04
-->
<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <center>
            键盘一响，<br/>黄金万两。
        </center>
    </body>
</html>

3.1 HTML语法

image-20251125104505129

4. 开发工具VSCode

4.1 VSCode安装

常见的有：

安装流程参考：https://blog.csdn.net/m0_52861000/article/details/127874437

下载、安装后，设置中文包。

image-20251125105928574

搜索 chinese，第一个下载量高的安装。

如果遇到如下报错：

image-20251125110040780

方法有2：

  1. 手动安装，安装方法：https://www.cnblogs.com/gppblog/p/14370826.html
  2. 使用steam的加速工具Watt Toolkit进行网络加速即可安装上想装的插件。

PS：如果安装了没有生效，则按快捷键 Ctrl + Shift + P 然后搜索 Configure Display Language，回车，选择 中文简体即可。

4.2 VSCode使用

使用攻略参考：https://www.cnblogs.com/xiecoding/articles/19254201

  • Ctrl + 键盘+号键 或 键盘-号键：可以对界面和字体快速放大缩小
  • .html 文件中输入 ! 号，回车，可以快速创建html基本页面结构内容，html、head、title、body等
  • Ctrl + Alt + L，与IDEA一样也是自动对齐代码
  • lorem, 编辑器内输入时，可以快速生成一段英文字符作为内容填充

4.3 VSCode 插件

首次安装好后安装的插件如下：

  • chinese：中文插件，重启后默认生效（不生效的话，按 Ctrl+Shift+A 输入命令 configura display language 改中文）
  • auto rename tag：自动成对修改标签插件，默认生效，不需要额外操作
  • view-in-browser：快速预览页面的插件
  • live-server：实时预览服务，通过右键 open in live server 打开默认端口号5500的服务页面，结合 Auto Save 自动保存会非常好用。快捷键是 Alt+L, Alt+O 顺序按
  • htmltagwrap：html标签快速手动包裹插件，快捷键 Alt+W 后默认是 p 标签包裹，可以直接快速键入新标签
  • Comment Translate： 自动翻译 MDN reference 提示信息，最好设置一下源语种和目标语种

5. 文档声明与字符编码

5.1 文档声明

1
<!DOCTYPE ***>
1
<!DOCTYPE html>

默认都会生成，即 声明文本内容为 html 文档。

1
<html lang="en">

lang 为 language 的缩写，即 声明高速浏览器为 en英文 或者 zh-CN中文 或者 ja-jp日文。

搜索引擎优化和浏览器友好，会匹配系统的语种，提示出来是否要翻译的提示。

5.2 字符集

1
<meta charset="***">

声明页面的字符集，使浏览器可以按照对应的字符集来进行字符解码。

如：ASCII - 美国信息交换标准代码、GB2312 - 汉字编码字符集、UTF-8 - Unicode 万国码字符集 等

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端需要使用的 viewport 内容。

6. 常用标签

6.1 基础标签

h1文本标签

1
2
3
4
5
6
<h1>一级标题</h1>   <!-- 一个页面建议只有一个，才对爬虫友好，权重最大 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

说明：自带加粗，独立大小，独占一行，默认间距。

p段落标签

1
<p>这是一段内容</p>

说明：标识段落，段落间距。

br换行标签

1
<br> 或 <br/>

说明：空标记，换行

hr水平线

1
<hr> 或 <hr/>

说明：空标记，水平线

加粗有两个，推荐strong

1
2
<b>加粗内容</b>      只是显示加粗
<strong>强调的内容</strong>    突出的文本

倾斜有两个，推荐em

1
2
<em>强调文本</em>
<i>倾斜文本</i>

删除线有两个，推荐del

1
2
<s>文本</s>    删除线
<del>文本</del>      删除线

其他标签

1
2
3
<u>下划线</u>
<sub>下标</sub>
<sup>上标</sup>

6.2 hr标签

示例：hr 这个水平线可以带有一些属性，举例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hr标签</title>
</head>
<body>
    <hr color="green">
    <hr color="yellow">
    <hr color="red">

    <hr color="green" width="400">
    <hr color="green" width="800">
    <!-- 宽800，靠左 或 靠右 -->
    <hr color="red" width="800" align="left">
    <hr color="red" width="800" align="right">

    <!-- hr 默认会印象，因此是黑灰色，无阴影属性如下 -->
    <hr noshade>
</body>
</html>

6.3 特殊符号

image-20251125164213548

  • 小于号 < : &lt;
  • 大于号 > : &gt;
  • 空格：&nbsp; 或 &emsp;
  • 版权 ©：&copy;
  • 商标 ™：&trade; 或 商标 ® &reg;
  • 特殊表情：&#128512 或 &#128513

6.4 div和span

  • div

div 标签，没有具体含义，用来划分页面的区域，独占一行。

VSCode中快捷键入方式：

  1. div 回车，Ctrl + D 快速复制当前行
  2. div*3 回车，可以快速键入3行的div标签
  3. div{内容} 回车，可以快速键入div并包括内容
  • span

span 标签，没有实际意义，主要应用在对于文本独立修饰的时候。内容有多宽就占用多宽的空间距离。

6.5 列表

image-20251125170439313

  • 无序列表
1
2
3
4
5
6
7
8
9
10
11
<p>无序列表</p>
<!-- 
    1. ul里面只能放li，li里面可以放其他标签
    2. 默认的序号是黑色的实心圆
    3. type: disc-黑色实心圆, circle-黑色空心圆, square-黑色实心方, none-取消序号显示(用的多)
-->
<ul type="none">
    <li>蒸羊羔</li>
    <li>蒸熊掌</li>
    <li>烧花鸭</li>
</ul>

小技巧：输入 ul>li{内容}*3 会创键入ul包含3个li的无序列表，列表内容均为内容二字。

ol与ul 快速键入同理。

  • 有序列表
1
2
3
4
5
6
7
8
9
10
11
<!-- 
    1. ol里面只能放li，li里面可以放其他标签
    2. 序号数字是自动生成的。 
    3. type: 1,a,A,i,I
       start: 取值只能是一个数字，如果字母26个，取值27时，则会变成两个字母如aa,ab,ac...
-->
<ol type="a" start="4">
    <li>把冰箱打开</li>
    <li>把大象装进去</li>
    <li>把冰箱关上</li>
</ol>
  • 自定义列表
1
2
3
4
5
6
7
8
9
10
11
12
<p>自定义列表</p>
<!-- 
    1. 多个元素每次dl复制一份去使用，控制不同元素的样式
-->
<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>
<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>

小技巧: dl>dt{图片}+dd{内容}

6.6 图片

img

img 标签可以控制图片展示，注意src的绝对路径和相对路径。

1
2
3
4
5
6
7
8
<!-- 
    1. 同级目录: 1.png 或 ./1.png 或 .\1.png
    2. 子级目录: ./img/1.png 或 .\img\1.png
    3. 上级目录: ../img/1.png 或 ..\img\1.png
-->
<img src="1.png">
<img src="./img/1.png">
<img src=".\img\1.png">

img 标签的属性：

  • src： 路径
  • title：标题
  • width： 宽度
  • height：高度
1
<img src="图片路径" title="鼠标悬停提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px">

宽度和高度只设置一个时，对应到的高度和宽度会自动缩放。

6.7 超链接

a

a 标签，能够实现不同页面的跳转。

1
<a href="路径" title="鼠标悬停提示信息" target="规定在何处打开文档">内容</a>

target :

  • _self： 默认值，当前窗口打开
  • _blank: 新窗口打开
1
2
3
4
5
6
7
<a href="https://www.baidu.com/" target="_blank">百度</a>

<a href="12-test.html" target="_blank">成绩查询</a>
<br>
<a href="12-test.html" title="成绩查询">
    <img src="./img/1.png">
</a>

6.8 表格

table

table 标签，数据表格的创建。

1
2
3
4
5
6
7
8
9
10
<table>   <!-- 创建表格 -->
    <tr>    <!-- tr 表示行 -->
        <td>行1列1</td>    <!-- td 表示单元格 -->
        <td>行1列2</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
    </tr>
</table>

小技巧：快速创建 table>tr*2>td*2

table 标签的属性：

  • 宽度 width: 不写单位，或 单位px，或 百分比(相对于父元素的百分比)
  • 高度 height: 不写单位，或 单位px，或 百分比(相对于父元素的百分比，需要父元素有高度值)
  • 外边框粗细 border: 数字
  • 边框颜色 bordercolor: 边框颜色值
  • 背景颜色 bgcolor: 表格的背景颜色值
  • 水平对齐 align=”left 或 right 或 center”: 相对于父级元素的对齐位置
  • cellspacing=”单元格与单元格之间的间距”: 可以调没，也可以调大些
  • cellpadding=”单元格与内容之间的空隙”: 默认是左边距为0，也可以调大些
  • style=”color:red” 设置表格中的字体颜色，比如 red 红色
1
2
<table border="1" width="50%" height="500" align="center" bordercolor="blue" bgcolor="yellow" cellspacing="0" cellpadding="50">   <!-- 创建表格 -->
</table>

tr 标签的属性：

  • 高度 height: 大于table时会撑开，且宽度设置不生效
  • 背景颜色 bgcolor
  • 文字水平对齐 align=”left 或 right 或 center”
  • 文字水质对齐 valign=”top 或 middle 或 bottom”
1
2
3
4
<table border="1" width="300" height="300" bgcolor="yellow">
    <tr bgcolor="orange" height="100" align="center" valign="middle">
    </tr>
</table>

td 标签的属性：

  • 宽度 width：可以设置宽度，如果设置了宽度，则影响的是整列
  • 高度 height：如果设置了高度，影响的是整行
  • 背景颜色 bgcolor：
  • 文字水平对齐 align=”left 或 right 或 center”
  • 文字水质对齐 valign=”top 或 middle 或 bottom”
1
2
3
4
5
6
7
8
9
10
<table border="1" width="300" height="300" bgcolor="yellow">
    <tr bgcolor="orange" height="100" align="center" valign="middle">
        <td width="200">1</td>
        <td height="200">2</td>
    </tr>
    <tr>
        <td bgcolor="red">3</td>
        <td align="right" valign="top">4</td>
    </tr>
</table>

6.9 表格合并

  • colspan=”所要合并的单元格的列数“，必须给td。
  • rowspan=”所要合并的单元格的行数“，必须给td。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1" width="300" height="300">
    <tr>
        <td>不毛</td>
        <td colspan="2" rowspan="2">魏国</td>
        <!-- <td>辽东</td> -->
    </tr>
    <tr>
        <td rowspan="2">蜀国</td>
        <!-- <td colspan="2">西凉</td> -->
        <!-- <td>幽州</td> -->
    </tr>
    <tr>
        <!-- <td>南中</td> -->
        <td colspan="2">吴国</td>
        <!-- <td>荆州</td> -->
    </tr>
</table>

image-20251125184651363

合并后：

image-20251125184721546

案例：信息卡片

image-20251125184735619

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="1" bordercolor="red" cellspacing="0" width="800" height="320" style="color:red">
    <tr height="80" align="center">
        <td width="200">会员姓名</td>
        <td width="200"></td>
        <td width="200">出生日期</td>
        <td width="200"></td>
    </tr>
    <tr height="80" align="center">
        <td>身份证号</td>
        <td colspan="3"></td>
    </tr>
    <tr height="80" align="center">
        <td>通信地址</td>
        <td colspan="3"></td>
    </tr>
    <tr height="80" align="center">
        <td>联系电话</td>
        <td colspan="3"></td>
    </tr>
    <tr height="80" align="center">
        <td>会员卡号</td>
        <td colspan="3"></td>
    </tr>
</table>

6.10 表单标签

表单的作用：收集用户的信息。

1
2
3
4
5
6
7
8
9
10
11
<form method="get或post" action="向何处发送表单数据">
    <input />
    A. 属性 type 定义输入框的类型
        a）文本框 type="text", 密码框 type="password"
        b）提交框 type="submit", 和<button>提交按钮</button> 一样
        c）按钮框 type="button", 单纯的按钮
        d）重置框 type="reset", 清空的效果
    B. 属性 placeholder 描述输入字段预期值的简短的提示信息，兼容到IE8以上
    C. 属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器端
    D. 属性 value
</form>

image-20251126093318688

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="https://www.baidu.com/" method="POST">
    用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写" name="username">
    <br>
    密码：<input type="password" placeholder="请输入你的密码" name="passowrd">
    <br>
    <!-- 提交信息到 action 指定的api地址 -->
    <!-- <input type="submit" value="登陆"> -->
    <button type="submit">登陆</button>
    <!-- <input type="reset" value="重置"> -->
    <button type="reset">重置</button>
    <!-- intpu:button 后期很有用，可以做校验 -->
    <input type="button" value="按钮">
</form>
04_大前端 > 01_HTML
#HTML #标签 #基础
00-基础入门
https://janycode.github.io/2017/04/28/04_大前端/01_HTML/00-基础入门/
作者
Jerry(姜源)
发布于
2017年4月28日
许可协议