下一篇持续更新中… 如有错误欢迎指正！！！
前言
学习安排
这套笔记主要记录的是“网页布局”，通过H5C3来布局页面，这里分成两大块：
-
PC端的网页布局
-
移动端的网页布局
-
响应式布局（一套代码，多端适配）
- 学习目的:精通网页布局，也是前端人员必备的技能，为后面学习JavaScript打下坚实的基础
- 学习路线：
网页的相关概念
我们接下来是进行网页开发，一下相关概念需了解：
网页？
HTML？
网页的形成？
网页是由前端人员在一个HTML文件里面写上各种各样的HTML标签，写完后通过浏览器打开就能看到一个网页。
常用浏览器
常用浏览器
GOOGLE浏览器站的市场份额较大，所以必备
浏览器内核
web标准
web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
为啥需要web标准
web标准的构成
HTML标签（上）
前言
学习目标
学习内容
HTML语法规范
基本语法概述
- HTML标签是由尖括号包围的关键词，例如。
- HTML标签通常是成对出现的，例如和,我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签（极少情况），例如
,我们称为单标签
标签关系
- 包含关系（父子关系）
<head>
<title></title>
</head>
- 并列关系（兄弟关系）
<head></head>
<body></body>
HTML基本结构标签
每个网页都有一个基本的结构标签（也成为骨架标签），页面内容也是在这些基本标签上书写的
HTML页面也称为HTML文档
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
鹤茗的第一个HTML页面
</body>
</html >
HTML常用标签
标签语义
学习标签是有技巧的，重点是记住每个标签的含义，是用来干嘛的标签。
标题标签< h1-h6 >（重要）
为了使网页结构更清晰，我们经常在页面中用到标题标签。HTML提供了6个等级的网页标题，即< h1 > ~ < h6 >
h是head缩写
//格式如下：
<h1>我是一级标题</h1>
//标题标签是一个双标签
标签含义：作为标题使用，并且根据重要性递减
特点：
- 加了标题的文字会变粗大
- 一个标题独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
段落标签（重要）
在网页中，要把文字有条理地显示出来就需要将这些文字分段显示。在HTML标签中，< p >标签用于定义段落。它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落
标签含义：可以把HTML文档分割为若干段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间留有空隙
换行标签（重要）
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，那就需要使用换行标签< br/ >。
break的缩写
标签含义：强制换行
特点：
- < br/ >是个单标签
- 换行标签只是简单的开始新的一行,跟段落标签不一样，段落之间会插入一些垂直的间距。
文本格式化标签
在网页中，有时需要为文字设置粗体斜体或下划线_等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签含义：突出，重要性比普通文字更重要。
< div >和< span >标签
< div >和< span >是没有含义的，他们就是一个盒子，用来装内容的。
例如：
//格式：
<div>这是</div>
<span>那是</span>
div是division的缩写，意为分割
span意为跨距
特点：
- < div >标签用来布局，但是现在一行只能放一个< div >。可以看作大盒子。
- < span >标签用来布局，一行上可以放多个< span >。可以看作小盒子。
图像标签和路径（重点）
图像标签
在HTML标签中，< img >标签，用于定义HTML页面中的图像。
<img src="图像URL"/>
单词image的缩写，意为图像。
src是< img >标签的必需属性，它用于指定图像文件的路径和文件名。
若想把图片放入网页文件中，必须要先把图片和网页文件放到一起（一个目录下），这样就可以运用图像标签，把图片插入文件中了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>图像标签的使用</h4>
<img src="RMB.jpg" />
<h4>替换文本 alt属性 图像显示不出来的时候，用文字替换：</h4>
<img src="RMB1.jpg" alt="人民币在这儿" />
<h4>提示文本 title属性 鼠标放到图像上，提示的文字：</h4>
<img src="RMB.jpg" alt="人民币在这儿" title="这叫人民币" />
<h4>width 给图像设定宽度：</h4>
<img src="RMB.jpg" alt="人民币在这儿" title="这叫人民币" width="300" />
<h4>height 给图像设定高度：</h4>
<img src="RMB.jpg" alt="人民币在这儿" title="这叫人民币" width="300" height="300" />
//宽度和高度一般情况下修改其中一个就可以了，另外一个等比例缩放
<h4>border 给图像设定边框：</h4>
<img src="RMB.jpg" alt="人民币在这儿" title="这叫人民币" width="300" border="15" />
</body>
</html>
路径
目录文件夹&根目录
在实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们。因此，我们需要一个文件夹来管理他们
- 目录文件夹就是普通文件夹，只不过里面存放了我们做页面所需要的相关素材，比如HTML文件、图片等
- 根目录：打开目录文件夹的第一层就是根目录
VSCode打开目录文件夹，后期管理文件非常方便
路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时在查找图像，就需要采用 “路径” 的方式来指定图像文件的位置。路径可以分为相对路径绝对路径。
- 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说图片相对于HTML页面的位置
- 绝对路径：是指目录下的绝对位置直接到达目标位置。通常是从盘符开始的路径。例如：" D:\web\img\logo.gif "或完整的网络地址。（用的较少）
绝对路径和相对路径的两个反斜杠方向不一致
超链接标签（重点）
在HTML标签中，< a >标签用于定义超链接，作用是从一个页面链接到另一个页面
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
//用一对<a>标签来包含文字或图像，被包含的文字和图像就具有了超链接的功能
//点击这个文字和图像就能去往另外一个页面了
单词anchor的缩写，意为锚
链接的分类
外部链接http://一定要写
注释标签
如果需要在HTML文档中添加一些便于阅读和理解，但是又不需要显示在页面中的注释文字，就需要使用注释标签
<!-- 注释语句-->
//快捷键：ctrl + /
注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的
特殊字符
在HTML页面中一些特殊的符号很难或者不方便直接使用。此时我们就可以使用下面的字符来代替它们
网页开发工具-VSCode使用
安装插件
- 汉化
- Auto Rename Tag
- 会了吧
- Easy LESS
- Live Server
- Open Browser Preview
- vscode-icons
快捷键
- 快速复制一行：shift + alt + 下箭头（上箭头）或者ctrl + c/v
- 选定多个相同的单词：ctr + D
- 添加多个光标：ctrl + alt + 上箭头（下）
- 全局替换某个单词：ctrl+h
- 快速定位到某一行：ctrl+g
- 选择某个区块：按住shift+alt,然后拖动鼠标
- 放大缩小整个编辑器界面：ctrl+“+”/“-”\
- 自定义快捷键
vscode工具生成骨架标签新增代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
文档类型 声明标签
文档类型声明，作用就是**告诉浏览器使用哪种HTML版本来显示网页**<!DOCTYPE html>
//这句代码的意思是：
//当前页面采取的是HTML5版本来显示网页
ps：
- 声明位于文档中的最前面的位置，处于< html>标签之前
- 不是一个HTML标签，它就是文档类型声明标签。（只有在< html>标签对里面的标签才叫HTML标签）。
lang语言种类
字符集
HTML标签（下）
前言
学习目标
学习内容
表格标签
- 表格的主要作用
表格同时用来布局页面的，而主要用于显示展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得非常重要。一个清爽简约的表格，能够把繁杂的数据表现得很有条理。 - 表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
<table>
- < table >< /table >是用于定义表格的标签
- < tr >< /tr >标签用于定义表格中的行，必须嵌套在< table >< /table >标签中
- < td >< /td >用于定义表格中的单元格，必须嵌套在< tr >< /tr >标签中
字母 td 指表格数据table data，即数据单元格的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>鹤茗</td>
<td>不详</td>
<td>108</td>
</tr>
</table>
</body>
</html>
表头单元格标签
表头单元格也是单元格。一般表头单元格位于表格的第一行或第一列。表头单元格里面的文本内容加粗居中显示。< th >标签表示HTML表格的表头部分（table head的缩写）
<table>
<tr>
<th>姓名</th>
...
</tr>
...
<table>
表格属性
表格标签这部分属性我们实际开发不常用，后面通过CSS来设置。
学习目的有两个，记住这些单词后面CSS会用直观感受表格的外观形态
表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用：< thead >标签 表格的头部区域、< tbody >标签表格的主体区域，这样更可以更好地分清表格结构
合并单元格
-
合并单元格方式
目标单元格：写合并代码
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码 -
合并单元格三部曲
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式 = 合并的单元格数量。比如：
<td colspan="2" ></td>
- 删除多余的单元格
列表标签
表格是用来显示数据的，列表就是用来布局的。列表可以根据使用场景不同，分为三大类，无序列表，有序列表和自定义列表
无序列表
< ul >标签表示HTML页面中项目的无序列表一般会以项目符号呈现列表项，而列表项使用< li >标签定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
- < ul >< /ul >中只能嵌套< li >< /li >，直接在< ul >< /ul >标签中输入其他的标签或者文字是不被允许的
- < li >与< /li >之间相当于一个容器，可以容纳所有元素
- 无序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置
有序列表*
（实际开发中用的不多）
有序列表即为有排列顺序的列表。其各个列表项会按照一定的顺序排列定义。在HTML标签中。< ol >标签用于定义有序列表。列表排序以数字来显示，并且使用< li >标签来定义列表项
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- < ol >< /ol >中只能嵌套< li >< /li >，直接在< ol >< /ol >标签中输入其他的标签或者文字是不被允许的
- < li >与< /li >之间相当于一个容器，可以容纳所有元素
- 有序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置
自定义列表（重点）
自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述。定义列表的列表项前没有任何项目符号
在HTML标签中，< dl >标签用于定义描述列表（或定义列表），该标签会与< dt >（定义项目/名字）和< dd >（描述每一个项目/名字）一起使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
- < dl >< /dl >里面只能包含< dt >< /dt >
- < dt >和< dd >个数没有限制，经常是一个< dt >对应多个< dd >
表单标签
使用表单，目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息，三个部分构成。
表单域
表单域是一个包含表单元素的区域。在html标签中，< form >标签用于定义表单域，以实现用户信息的收集和传递。< form >会把它范围内的表单元素信息提交给服务器。（作用）
< form action="url地址" method="提交方式" name="表单域名称" >
各种表单元素控件
</form>
目前暂时不用表单域提交数据，只需要写上form标签即可。将来等学习服务器编程阶段会继续学习
表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
< input >表单元素
属性及属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以在里面输入任何文字 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br />
<!-- password 密码框 用户看不见输入的密码 -->
密码：<input type="password" name="pwd"><br />
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br />
<!-- checkbox 复选框 可以实现多选 -->
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉" 打豆豆<input
type="checkbox" name="hobby" value="打豆豆"><br />
<!-- 点击了提交按钮，可以把 表单域form 里面的表单元素的值 提交给后台 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮button 后期结合JS 搭配使用 -->
<input type="button" value="点击获取验证码"><br />
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像：<input type="file">\
</form>
</body>
</html>
< label >标签
本身不属于表单，但经常和表单元素搭配使用
- 使用场景
< label >标签为input元素定义标签。 < label >标签用于绑定一个元素。当点击 < label >标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素上，用来增加用户体验。 - 语法规范
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
**核心：< label >标签的 for 属性应当与相关元素的 id 属性相同
select下拉表单元素
使用场景：在页面中如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 < select > 标签控件定义下拉列表。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- < select >中至少包含一对 < option >
- 在 < option > 中定义selected = " selected" 时，当前项即为默认选中项
textarea文本域元素
- 使用场景
当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时可以使用< textarea >标签。在表单元素中，< textarea >标签是用于定义多行文本输入的控件。使用多行文本输入控件可以输入更多的文字。该控件常见于留言板、评论 - 语法
<textarea rows="3" cols="20">
文本内容
</textarea>
- 通过< textarea >标签可以轻松地创建多行文本输入框
- cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。
综合案例
//代码仅供参考，不标准不全面（记录练习用的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4 align="center">
青春不常在，抓紧谈恋爱
</h4>
<table width="500" align="center">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" id="nan"><label for="nan"><img src="man.jpg">男</label><input
type="radio" name="sex" value="女" id="nv"><label for="nv"><img src="women.jpg">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>-请选择年份-</option>
<option>2001</option>
<option>-请选择年份-</option>
<option>-请选择年份-</option>
<option>-请选择年份-</option>
</select>
</td>
</tr>
<tr>
<td>
喜欢的类型
</td>
<td>
<input type="checkbox" name="prefer" id="chengshu"><label for="chengshu">成熟的</label>
<input type="checkbox" name="prefer" id="xinggan"><label for="xinggan">性感的</label>
<input type="checkbox" name="prefer" id="keai"><label for="keai">可爱的</label>
</td>
</tr>
<tr>
<td>
学历
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
自我介绍
</td>
<td>
<textarea rows="5" cols="30">
请输入您的自我介绍
</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="免费注册">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="#" target="_self">已有帐号，点此登录</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<h2>
我承诺
</h2>
</td>
</tr>
<tr>
<td>
</td>
<td>
<ul>
<li>年满18</li>
<li>身体健康</li>
<li>严肃认真</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
