Web前端开发学习笔记
Web前端开发学习笔记
一、Web前端的标准
1. W3C万维网联盟（w3.org）
2. Web网页的组成部分
二、HTML
超文本标记语言（Hyper Text Markup Language）是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
1. HTML文件的基本结构及注释
<!--注释--> <p>键入"<!--" 或者 选中要注释的文本并键入“ctrl”+“/” 添加注释</p>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<center>
欢迎来到LemonXue的主页，<br/> welcom!
</center>
</body>
</html>
2. 常规标记（双标记）
<标记 ></标记>
<标记 属性=“属性值” 属性=“属性值”></标记>
标记也可叫标签或叫元素
例如
<head>
</head>
3. 空标记也叫单标记
<标记 />
<标记 属性=“属性值” />
例如: <br />
4. HTML编辑工具 VSCODE
(1). 点击添加插件
- chinese插件: 中文支持
- Auto Rename Tag：标记头尾同时重命名
- Live Server： 右键html文件，选择右键选择框中的
Open with Live Server. 即可在浏览器中默认打开可以实时预览的网页。 - htmltagwrap：选中文本段落，键入alt+w, 自动添加
<p>选中的文本</p>标签
(2). 直接创建基础的html文件
在vscode新建一个.html的文件之后，在该文件中输入!+回车键即可创建出一个基础的html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我在vscode 创建的页面</title>
</head>
<body>
<center>罗生一习，<br/>黄金一响</center>
</body>
</html>
<!DOCTYPE html>是一个文档声明标签，指定html格式（html5），用于告知浏览器解析格式。
<html lang="en"> 中lang表示语言（language）其中包含的语言是英文（en）的，日文（ja-jp），中文（zh-CN）
(3). html编辑技巧
创建双标签并且键入文件
这里以p标签为例
p{你好} ==>
<p>你好</p>
创建多个标签
这里以p标签为例，创建3个
p*3 ==>
<p></p>
<p></p>
<p></p>
上述的方法可以组合使用
p{你好}*3 ==>
<p>你好</p>
<p>你好</p>
<p>你好</p>
创建标签和子标签
例如：创建一个div标签，div标签中还包含p标签
div>p ==>
<div>
<p></p>
</div>
创建标签和多个子标签
例如：创建一个div标签，div标签中还包含3个p标签
div>p*3 ==>
<div>
<p></p>
<p></p>
<p></p>
</div>
创建标签和多个子标签，并在子标签中添加内容
例如：创建一个div标签，div标签中还包含3个p标签，每个p标签中还包含内容
div>p{内容}*3 ==>
<div>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
创建标签和多钟子标签
例如：创建一个div标签，div标签中还包含p标签和h2标签
div>p+h2 ==>
<div>
<p></p>
<h2></h2>
</div>
5. html中常用标签
(1). 标题标签
独占一行
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
其中<h1>标签，一般会被爬虫识别，一般一个网页中只有一个。
(2). 段落修饰的标签
p标签(段落文本)
标识一个段落（段落与段落之间有段间距）
<p>段落文本</p>
br标签（文本换行）
单标签，强制换行
<br />
hr标签（水平线）
<hr />
(3). 文本修饰标签
标签可以嵌套使用
加粗标签（两种推荐strong）
<b>加粗内容</b> 只是显示加粗
<strong>加粗内容</strong> 突出的文本（爬虫喜欢）
倾斜标签（两种推荐em）
<em>倾斜内容</em> 强调作用（爬虫喜欢）
<i>倾斜内容</i>
删除标签（两种推荐del）
<s>倾斜内容</s>
<del>倾斜内容</del>
其他文本标签
<u>文本内容</u> 下划线
<sub>文本内容</sub> 下标
<sup>文本内容</sup> 上标
(4). 特殊符号
尖角号<>
在html文本中使用如下方式标示尖角号：
<：左尖角号
>：右尖角号
空格（推荐 ，不过更加推荐使用css技术来处理）
在html文本中使用如下方式标示空格：
：生成一个空格，但是其占据的宽度受到字体的影响。
 ：生成一个空格，但是其占据的宽度是一个中文字体的宽度，基本不受字体的影响。
ps: 快速生成一段文本文字：lorem+回车
版权符号和商标符号
©: © 版权符号
™ ™ 商标符号：表示商标正在国家商标局提供申请了，有优先使用权但是可能注册失败。
®: ® 商标符号：表示商标已经在国家商标局注册成功了
😀: 😀
😁: 😁
😂: 😂
😃: 😃
😄: 😄
(5). 容器标签
div标签（分割划块的标签）
div标签在没有控制的情况下默认独占一行，（可以通过css来进行控制）
<div>
<h2>我的父亲</h2>
<p>我的父亲是一个很爱很爱我的人</p>
</div>
<div>
<h2>我的母亲</h2>
<p>我的母亲是一个很爱很爱我的人</p>
</div>
span标签
主要用于独立修饰一段文本，文本有多宽，就占用多远的距离。结合css和样式可以更好地修饰文本
<h2>我的父亲 <span style="color: green; font-size: 1px;">my father</span></h2>
效果如下：
(6). 列表标签
| 无序列表 | 有序列表 | 自定义列表 |
|---|---|---|
| 无序号 | 有序号 | 一般用于图文混合的情况 |
 |  |  |
无序列表
注意：ul标签中只能放置li标签；
li标签中可以随意放置标签；
ul默认以黑丝实心圆打头
ul中可以使用属性type改变打头的符号
type属性的值可以取：disk(默认，实心圆), circle(空心圆), square(实心正方形), none(什么都没有)
<ul type="none">
<li>
静静
</li>
<li>
川川
</li>
</ul>
有序列表
注意：ol标签中只能放置li标签；
li标签中可以随意放置标签；
ol默认会按照顺序生成序号： 1、2、3 ……
其中序号的类型和起始可以通过属性type和start进行修饰
type属性的值可以取1, a, A, i, I中的一个
start属性的值可以取数字
<ol type="A" start="1">
<li>
把冰箱门打开
</li>
<li>
把大象放进去
</li>
<li>
把冰箱门关上
</li>
</ol>
自定义列表
<dl>
<dt>可以是文字也可以是图片</dt>
<dd>文字</dd>
</dl>
(7). 图片标签
<img>标签有如下几个比较常用的属性：
src属性用于指定图片的来源（路径）
alt属性是图片加载失败后才会显示的提示信息
titile属性是当鼠标放置在图片上时提示的信息
width属性用于简单地调整图片的宽度px
height属性用于简单地调整图片的高度px
当只使用width、height其中一个属性时，那么另一个属性会按照图片原始的尺寸自适应调整。
当同时指定width、height时，如果指定的尺寸与图片原始尺寸的比例不一致时，图片会失真。
当然更好的办法是使用CSS来对图片的尺寸进行修饰。
<img src="./3.gif" alt="图片无法显示，请重新刷新" title="搞笑图片" width="100">
<img src="./3.gif" alt="图片无法显示，请重新刷新" title="搞笑图片" height="100">
<img src="./3.gif" alt="图片无法显示，请重新刷新" title="搞笑图片" width="100" height="100">
(8). 链接标签
<a>标签有如下几个比较常用的属性：
href: 指定跳转路径
target: 指定在当前标签页跳转"_self"，还是在新标签页跳转"_blank"；
title: 鼠标放置在超链接处之后的提示信息
a标签可以使用图片进行超链接跳转
<!-- 默认当前页面打开 -->
<a href="http://www.baidu.com">百度</a>
<!-- 当前页面打开 -->
<a href="http://www.baidu.com" target="_self">百度</a>
<!-- 在新标签页中打开 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 在新标签页中打开 -->
<a href="http://www.baidu.com" title="百度" target="_blank">百度</a>
<!-- 通过图片进行跳转 在新标签页中打开 -->
<a href="http://www.baidu.com" title="百度" target="_blank"><img src="./3.gif" alt="显示失败，请刷新" height="50"></a>
(9). 表格标签
表格的基本结构
表格一般由行和列组成；在html中则将表格按照行和单元格组合得到。
table标签中只能包含子标签tr;
tr：表示表格的一个行，有几个行则有几组tr标签。（table row）
tr标签中只能包含子标签td;
td：表示当前行中的一个单元格; 该标签中可以随便放置标签 （table data）
例如生成2行3列的表格：table>tr*2>tr*3+回车：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表格的属性
从上述的例子中发现生成的表格没有边框，这些都可以通过表格的属性来进行控制：
width： 表格的宽度，可以用数值表示如100或者100px, 还可以用百分比（相对于父标签的百分比）如50%
height： 表格的高度，可以用数值表示如100或者100px, 还可以用百分比（相对于父标签的百分比）如50%（注意这里父元素的高度可能默认是由内容撑开的，所以从现象上来看百分比没有效果）
border： 表格的最外边框的宽度：数值如1、2、3……
bordercolor： 边框的颜色
bdcolor： 背景颜色
align： 水平对齐：left、right、center, 表示整个表格在父元素（父标签）中的对齐方式，而不是单元格的对齐方式。
cellspacing：单元格之间的间距
cellpadding：单元格与内容之间的空隙
tr的属性(表格一行的属性)
height：一行的高度，数值
bgcolor：一行的背景色
align：控制一行内文本的水平对齐方式left、right、center
valign：控制一行内文本的垂直对齐方式top、bottom、middle
td的属性(一个单元格的属性)
width： 单元格的宽度，影响的是一整列的宽度。
height：单元格的高度，数值，影响的是一整行的高度。
bgcolor：本单元格的背景色
align：本单元格内文本的水平对齐方式left、right、center
valign：本单元格内文本的垂直对齐方式top、bottom、middle
<table border="1" width="600" align="center"
bordercolor="green"
bgcolor="yellow"
cellspacing="0"
cellpadding="10"> <!-- 创建表格 -->
<tr bgcolor="orange"
align="center"
valign="middle"> <!-- 创建一行 -->
<td width="100">会员姓名</td> <!-- td 表示单元格 -->
<td width="200"></td>
<td width="100">出生日期</td>
<td width="200"></td>
</tr>
<tr align="center"
valign="middle">
<td width="100">身份证号</td>
<td colspan="3" width="500"></td>
</tr>
<tr align="center"
valign="middle">
<td width="100">通信地址</td>
<td colspan="3" width="500"></td>
</tr>
<tr align="center"
valign="middle">
<td width="100">联系电话</td>
<td colspan="3" width="500"></td>
</tr>
<tr align="center"
valign="middle">
<td width="100">会员卡号</td>
<td colspan="3" width="500"></td>
</tr>
</table>
(10). 表单标签
<!-- <form method="GET或者POST" action="向何处发送表单数据">
<input type="text">
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> -->
<form method="POST" action="https://www.jd.com/">
<p>
用户名：<input type="text" name="username" placeholder="输入用户名">
</p>
<div>
密 码：<input type="password" name="username" placeholder="输入密码，请注意大小写！">
</div>
<div>
<input type="reset" value="重新输入">
<input type="submit" value="登 录">
</div>
</form>
扫一扫
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
