关于前端的学习，这里推荐mdn文档
HTML
1. 初识html
全称是Hyper Text Market Language（超文本标记语言) , 而超文本指的是流媒体、图片、声音、视频等等.
1.1 特殊符号的表达
1
2
3
4
5
6
7
8
|
<br/>
<strong>i love you <strong>
<em>i love you<em>
>
<
|
1.2 行级元素和块级元素
| 类型 |
效果 |
例子 |
| 块级元素(block) |
独占一行 |
div h p ul teble |
| 行级元素(inline) |
只占据内容的大小 |
span td a img |
示例
HTML
HTML
一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构.一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式
1.3 关于图片，视频和音频
1
2
3
4
5
6
7
8
9
10
11
12
|
<img src = "../resources/imge/1.jpg" alt = "chen" title = "悬停文字" width = "100" height = "100">
<img src = "https://s2.loli.net/2022/04/13/qzsEFCRXW89Vc7I.jpg" alt = "chen" title = "悬停文字" width = "200" height = "250">
<video src = "../resources/video/chen.mp4" >
<video src = "../resources/video/chen.mp4" controls>
<video src = "../resources/video/chen.mp4" controls autoplay>
|
示例
1.4 超链接
1
2
3
4
5
6
7
|
<a href = "https://space.bilibili.com/399488488" target = "_blank">点我</a>
|
示例
点我
1.5 锚链接
1
2
3
4
5
6
7
|
<a href = "#" >回到顶部</a>
|
示例
回到顶部
1.6 功能性链接
1
2
3
| <a href="mailto:chenning_william@163.com">点击联系我</a>
<hr/> 此为分割线
|
示例
点击联系我
此为分割线
1.7 列表
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
|
<ol>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>运维</li>
</ol>
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>运维</li>
</ul>
<dl>
<dt>学科</dt>
<dd>c/c++</dd>
<dd>java</dd>
<dt>位置</dt>
<dd>成都</dd>
<dd>西安</dd>
</dl>
|
效果展示
- java
- python
- c/c++
- 运维
- 学科
- c/c++
- java
- 位置
- 成都
- 西安
1.8 表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <table>
<caption>表格标题</caption>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
|
效果展示
表格标题
| 1-1 |
1-2 |
1-3 |
1-4 |
| 2-1 |
2-2 |
2-3 |
2-4 |
| 3-1 |
3-2 |
3-3 |
3-4 |
colspan 跨列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <table>
<tbody border = "1px">
<tr>
<td colspan = "4"> 1-1 </td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</tbody>
</table>
|
| 1-1 |
| 2-1 |
2-2 |
2-3 |
2-4 |
| 3-1 |
3-2 |
3-3 |
3-4 |
rowspan 跨行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <table>
<tbody border = "1px">
<tr>
<td colspan = "4"> 1-1 </td>
</tr>
<tr>
<td rowspan = "2"> 2-1 </td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</tbody>
</table>
|
| 1-1 |
| 2-1 |
2-2 |
2-3 |
2-4 |
| 3-2 |
3-3 |
3-4 |
2. 页面结构分析
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<p>网页头部</p>
</header>
<section>
<p>网页主体</p>
</section>
<footer>
<p>网页脚部</p>
</footer>
</body>
</html>
|
head部分
HTML文档的头部标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上
页面标题title
title标题信息显示在浏览器的标题栏上
META标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。<meta>标记位于文档的头部，其属性定义了与文档相关联的“名称/值”对。
name属性与content属性
name属性用于描述网页，它是以“名称/值”形式的名称，name属性的值所描述的内容(值)通过content属性表示，便于搜索引擎机器人查找、分类。其中最重要的是description、keywords和robots。
http-equiv属性与content属性
http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头)，它是以“名称/值”形式的名称，http-equiv属性的值所描述的内容(值)通过content属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是content-type charset提供编码信息，refresh刷新与跳转页面，no-cache页面缓存，expires网页缓存过期时间。
| 属性 |
值 |
描述 |
| content |
some_text |
定义与http-equiv或name属性相关的元信息 |
| http-equiv |
content-type expires refresh set-cookie |
把content属性关联到HTTP头部。内容类型网页缓存过期时间刷新与跳转(重定向)页面 如果网页过期，那么存盘的cookie将被删除 |
| name |
author description keywords generator |
把content属性关联到一个名称。定义网页作者 定义网页简短描述 定义网页关键词 定义编辑器 |
| scheme |
some_text |
定义用于翻译content属性值的格式。 |
1
2
3
4
5
6
7
| <meta name="keywords" content="信息参数" />
<meta name="description" content="信息参数" />
<meta http-equiv="content-type" content="text/html; charset=信息参数" />
<meta name="generator" content="信息参数" />
<meta name="author" content="信息参数">
<meta http-equiv="refresh" content="时间； url=网址参数">
<meta name="robots" contect="信息参数">
|
body部分
| 元素名 |
描述 |
| header |
标题头部区域的内容(用于页面或页面中的一块区域) |
| footer |
标题脚部区域的内容(用于整个页面或页面中的一块区域) |
| section |
Web页面中的一块独立区域 |
| article |
独立的文章内容 |
| aside |
相关内容或应用(常用于侧边栏) |
| nav |
导航类辅助内容 |
在网页设计中，HTML提供了4种颜色设置方法：
- 使用RGB（R，G，B），其中R、G、B是整数，取值范围：0～255；
- 使用RGB（R%，G%，B%），其中R、G、B是整数，取值范围：0～100；
- 使用3位或6位十六进制数#RGB或#RRGGBB，R、G、B为十六进制数，取值范围：0～9、A～F，每一种颜色用2位十六进制数表示，RR：红色部分，GG：绿色部分，BB：蓝色部分。红色为#FF0000；#RGB可以转换为#RRGGBB 。例如红色 分别 表示为#F00、#FF0000。
- 使用颜色英文名称，如red表示红色，green表示绿色，blue表示蓝色等。
3. 内联框架
1
2
3
4
5
|
<iframe src = "path" name = "mainFrame"></iframe>
|
嵌套网页
1
2
|
<iframe src="https://52hzmercury.github.io/" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>
|
参数说明
width="100%" 为宽度自适应，高度请根据实际需求跳转，
scrolling 为滚动条参数。
frameborder 为边框参数。
noresize 属性规定用户无法调整框架的大小。
嵌套B站视频
1
| <iframe src="//player.bilibili.com/player.html?aid=375588815&bvid=BV1so4y1m7U5&cid=339262048&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
|
参数说明
BILIBILI 地址PC端参数
iframe 参数
- allowfullscreen=“allowfullscreen” 移动端全屏
- sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts” 禁止弹出网页
4. 表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<form action = "chenkong.html" method = "get">
<p>名字：<input type = "text" name = "username"></p>
<p> 密码：<input type = "password" name = "pwd" ></p>
<p>
<input type = "submit">
<input type = "reset">
</p>
</form>
|
示例
4.1 表单元素的格式
| 属性 |
说明 |
| type |
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、ingage和button，默认为text |
| name |
指定表单元素的名称 |
| value |
元素的初始值。type为radio时必须指定一个值 |
| size |
指定表单元素的宽度，当type为text或password时，表单元素的大小易字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength |
type为text或password时，输入的最大字符数 |
| checked |
type为radio或checkbox时，指定按钮是否被选中 |
4.2 radio 单选器
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
|
<form action = "chenkong.html" method = "get">
<p>名字：<input type = "text" name = "username"></p>
<p> 密码：<input type = "password" name = "pwd" ></p>
<span>
<input type = "radio" value = "boy" name = "sex"> 男
</span>
<span>
<input type = "radio" value = "girl" name = "sex"> 女
</span>
<p>
<input type = "submit">
<input type = "reset">
</p>
</form>
|
示例
4.3 多选框
1
2
3
4
5
6
| <input type = "checkbox" value = "sleep" name = hobby>睡觉
<input type = "checkbox" value = "code" name = hobby>敲代码
<input type = "checkbox" value = "chat" name = hobby>聊天
<input type = "checkbox" value = "game" name = hobby>游戏
|
示例
4.4 关于按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<form action = "chenkong.html" method = "get">
<p>
<input type = "image" src = "https://s2.loli.net/2022/04/13/qzsEFCRXW89Vc7I.jpg" width = "50" height = "70">
</p>
<p>
<input type = "buttion" >
</p>
<p>
<input type = "submit">
</p>
<p>
<input type = "checkbox">
</p>
<p>
<input type = "reset">
</p>
</form>
|
示例
注意：
上图中在后面加上check后就是默认选中，图片的是可以提交的
4.5 下拉框
1
2
3
4
5
6
| <select name = "列表名称">
<option value = "选项的值">中国</option>
<option value = "选项的值">美国</option>
<option value = "选项的值" selected>瑞士</option>
<option value = "选项的值">印度</option>
</select>
|
示例
4.6 文本域
1
2
3
| <p>
<textarea name = "textarea" cols = "50" rows = "10"> </textarea>
</p>
|
示例
4.7 文件域
input必须要有name属性，不然上传不了
1
2
3
4
| <p>
<input type = "file" name = "files">
<input type = "button" value = "上传" name = "upload">
</p>
|
示例
4.8 简单的邮件地址和url验证验证
1
2
3
4
5
6
7
8
| <form action = "chenkong.html" method = "get">
<p>
email: <input type = "email" name = "email">
</p>
<p>
url: <input type = "url" name = "url">
</p>
</form>
|
示例
4.9 数字验证
1
2
3
| <p>
<input type = "number" name = "num" max = "100" min = "0" step = "1">
</p>
|
示例
4.10 滑块
1
| <input type = "range" name = "vocie" min = "0" MAX = "100" step = "2">
|
示例
4.11 搜索框
1
| <input type = "search" name = "search">
|
示例
4.12 只读标签
1
| <p>名字：<input type = "text" name = "username" value = "admin" readonly></p>
|
示例
名字：
4.13 禁用标签
加上 checked disabled
1
2
3
4
| <p>
<input type = "radio" value = "boy" name = "sex" checked disabled/>男
<input type = "radio" value = "girl" name = "sex"/>女
</p>
|
示例
男
女
4.14 隐藏域
1
| <p>密码<input type = "password" name = "pwd" hidden ></p>
|
示例
密码
在隐藏域中设置默认值
1
| <p>密码<input type = "password" name = "pwd" hidden value = "123456" ></p>
|
4.15 增强鼠标
1
2
| <label for = "mark">point</label>
<input type = "text" id = "mark">
|
点一下point，就可以到文本框中，增强鼠标的可用性
示例
4.16 表单的初级验证
常用方式
- placeholder
- required
- pattern
placeholder
加上后会在框中有提示信息
1
| <input type = "text" name = "username" placeholder = "请输入用户名">
|
示例
name:
required
使用户不能提交空，加上required
1
| <input type = "text" name = "username" placeholder = "请输入用户名" required>
|
pattern
在pattern里面放入正则表达式判断
1
2
3
| <p>
<input type = "text" name = "diyemail" pattern = "/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/">
</p>
|
上述正则的意思是：以数字字母开头中间可以是多个数字字符下划线或 ‘ - ’，然后是字符 ‘@’ ，后面是数字字符，最后是字符 ‘ . ’ 加上2-4个字母结尾。
5. 文本处理
5.1 标题字标记
1
2
3
4
5
6
7
|
<h1 align="center" >Web前端开发技术</h1>
<h2 align="left" >Web前端开发技术</h2>
<h3 align="center" >Web前端开发技术</h3>
<h4 align="right" >Web前端开发技术</h4>
<h5 align="justify" >Web前端开发技术</h5>
<h6 align="center" >Web前端开发技术</h6>
|
示例
Web前端开发技术
Web前端开发技术
Web前端开发技术
Web前端开发技术
Web前端开发技术
Web前端开发技术
5.2 特殊符号
| 显示结果 |
说明 |
Entity Name |
|
显示一个空格 |
|
| < |
小于 |
< |
| > |
大于 |
> |
| & |
&符号 |
& |
| " |
双引号 |
" |
| © |
版权 |
© |
| ® |
注册商标 |
® |
| × |
乘号 |
× |
| ÷ |
除号 |
÷ |
5.3 物理样式标记
| 标记 |
说明 |
<b>软件工程专业！</b> |
黑体 |
<i>软件工程专业！</i> |
斜体 |
<u>软件工程专业！</u> |
下划线 |
<del>软件工程专业！</del> |
删除线 |
<small>软件工程专业！</samll> |
变小字号 |
<big>软件工程专业！</big> |
变大字号 |
<sup>软件工程专业！</sup> |
上标 |
<sub>软件工程专业！</sub> |
下标 |
<tt>软件工程专业！</tt> |
打字机字体 |
5.4 换行
1
2
3
| <br> 换行
<nobr> 不换行 </nobr>
<wbr> 强制换行 </wbr>
|
5.5 段落缩进
一对blockquote标记能够向右缩进5个西方字符的位置。
1
2
3
4
5
| <h5 align="center">段落缩进标记的应用</h5>
<hr color="green">
没有缩进的文字内容
<blockquote>缩进的文字内容</blockquote>
<blockquote><blockquote>缩进的文字内容</blockquote></blockquote>
|
示例
段落缩进标记的应用
没有缩进的文字内容
缩进的文字内容
缩进的文字内容
5.6 预格式化标记
1
2
3
4
5
6
7
8
9
10
11
|
```html
<pre>预格式化文本 </pre >
<pre>
春 晓
孟浩然
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</pre>
|
示例
预格式化文本
春 晓
孟浩然
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。