本文介绍了前端与移动开发的基础知识，重点讲解了HTML的结构、标签、属性和常见用法，包括标题、段落、链接、图像、表单等，同时提到了Web标准和常见浏览器内核。
前端与移动开发
PC端
主要是电脑端,主要是网页开发
移动端
泛指可移动的设备(手机 平板) 可以开发运行在移动端的页面 如手机app 小程序
认识WEB网页
网页主要由文字 图片 链接 音频 视频 动画等元素构成
软件的分类
- CS结构（clinet-Server）：QQ、360安全卫士、office，过段时间要升级一下，很多数据保存在本地，需要经常更新客户端。
- BS结构（浏览器-服务器）：只要是基于浏览器访问，例如京东、淘宝，BS端的程序，不需要更新，由服务器来完成软件的升级。
常见的浏览器及内核(了解)
- IE浏览器(内核trident)
- Edge浏览器(同ie)
- 谷歌浏览器(内核chromium/blink)
- Safari浏览器(内核webkit)
- 火狐浏览器(内核gecko)
web标准
由W3C组织和其他标准化组织制定的一系列标准的集合
W3C（万维网联盟）是国际最著名的标准化组织
通过web标准 让不同的浏览器 展示统一的内容
web标准的构成
html 结构层 负责整个网页元素的整理及分类
css 样式层 负责网页元素的版式 颜色 字体大小等外观样式
javascript 行为层 负责网页中的交互行为编写
程序员开发工具(IDE)
- sublime
- webstrom
- vscode
- HBuilder
HTML
hyper text markup language
超文本标签语言
只要带有尖括号的就是标签
vscode中插件安装
- 安装插件后需要重启软件，必须联网才能安装插件
- Chinese 中文（简体）
- open in browser 从默认浏览器中打开
- auto rename tag 自动修改标签名字
- Vetur 让vscode软件提高对vue的支持(比如高亮 图标…)
- Vue 2 snippets vue关键语法的提示
- css peek 追踪至样式
- js-css-html formatter 每次保存，都会自动格式化js css和html代码（不建议安装，不好用）
vscode快捷方式
- alt + shift + ↓ 快速赋值当前行到下一行的位置
- ctril + / 注释代码
- ctrl + 回车 快速另起一行
- alt + r 从默认浏览器中打开
- ctrl + z 撤销
(可以在键盘快捷方式搜索open in default browser 修改快捷方式) - ctrl+ + 放大字体
- ctrl+ －缩小字体
- 勾选自动保存
HTML固定结构代码
//当前的文档类型是html5
<!DOCTYPE html>
//html 顶级标签/根节点
//lang 当前的文档语言 en 英文 zh-CN 中文 fr 法文
<html lang = 'en'>
//头部标签 用来存储某些辅助型标签 如title base link等
<head>
<meta charset="UTF-8">
//字符集类型 万国码UTF-8 存储文字，不写会出现乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页标题</title>
</head>
<body>
//网页的内容
</body>
</html>
快速搭建固定结构代码
!+tab(推荐)
html+tab
html:5+tab
三者选一
注意
记得文件添加后缀名.html
所有的代码符号都是英文标点符号
建议安装第三方输入法 我用的是搜狗
HTML标签
单标签
- 只有一对尖括号
<br />
<img />
双标签
- 有两对尖括号
<p></p>
<h1><h1>
标签的关系
- 嵌套关系/父子关系
<div>
<p></p>
</div>
- 并列关系/兄弟关系
<p></p>
<div></div>
排版标签
- 标题标签
注意
< h1 >标签是最重要的标题标签 一个页面只能出现一次
一般h1给logo使用
只有h1到h6标签
重要等级依次递减 大小依次递减
- 段落标签
浏览器对空格以及回车不敏感,不管有多少空格和回车 都只会编译成一个空格 这就是所谓的空格合并现象
< p >标签是段落标签 起到换行作用 独自占据一行
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保持有间隙
- 水平线标签
< hr >标签 是一个单标签
一条水平线与屏幕同宽
文章中起到分割的作用
- 换行标签
< br >标签 换行标签
是一个单标签
只是简单地开始新的一行，跟段落< p >不一样，段落之间会插入一些垂直的间距
- 拓展标签
< pre >标签 可以保存带有格式的文字
< blockquote >标签 引用长文本
-
布局标签(重点)
- div 独占一行 是一个块级元素 大盒子
- span 一行显示多个 是一个行内元素 小盒子
-
文本格式化标签(主要用前四种)
| 文本格式化标签 | 作用 |
|---|---|
| strong标签 | 文字加粗效果 |
| ins标签 | 文字带有下划线 |
| em标签 | 文字倾斜 |
| del标签 | 文字删除线 |
| b标签 | 文字加粗效果 |
| u标签 | 文字带有下划线 |
| i 标签 | 文字倾斜 |
| s标签 | 文字删除线 |
- 无序列表
< ul >标签代表无序列表
< li > 标签存放数据内容
存放没有顺序的数据
ul标签中只能有li标签
如果有其他标签 要放在li标签中
li标签没有数量限制
<ul>
<li></li>
<li></li>
<li>
<p></p>
</li>
</ul>
- 有序列表(了解)
< ol >标签代表有序列表
存放的是有顺序的数据
不能随便修改顺序
ul标签中只能有li标签
如果有其他标签 要放在li标签中
li标签没有数量限制
<ol>
<li></li>
<li></li>
<li>
<p></p>
</li>
</ol>
- 自定义列表(重点)
一般用来存储有从属关系的数据
dl 自定义列表
dt 存储大类 名词1
dd 存储小类 名词1解释1
dd 存储小类 名词1解释2
<dl>
<dt>手机品牌</dt>
<dd>苹果</dd>
<dd>三星</dd>
<dd>华为</dd>
</dl>
- 表格标签
table 代表一个表格
tr 代表表格的行
td 代表行内的单元格
- 表格属性
| 属性名 | 含义 |
|---|---|
| border | 表格边框 |
| cellspacing | 单元格与单元格边框之间的空白间隙 默认2px |
| cellpadding | 单元格内容到单元格边框之间的空白间隙 默认1px |
| width | 表格宽度 |
| height | 表格高度 |
| align | 表格在网页中水平对齐方式 left center right |
三参为0
border cellpadding cellspacing 为0
table 中设置align = ‘center’ 表示表格在页面中居中
tr 中设置align = ‘center’ 表示行内文字居中
th 中设置表头的数据
caption 表格的标题
thead 表格的头部
tbody 表格的主体
//快捷键 tr>td*3
<table border = '1px' cellspacing = '0' width = ' 500px' height = '300px' align = 'center' >
<caption><h1>表格的标题</h1></caption>
<thead>
<tr align = 'center'>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr align = 'center'>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
- 合并单元格
从上往下合并 跨行合并 rowspan
从左往右合并 跨列合并 colspan
合并后不需要的数据要删除
<table border = '1px' cellspacing = '0' width = ' 500px' height = '300px' align = 'center' >
<caption><h1>表格的标题</h1></caption>
<thead>
<tr align = 'center'>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr align = 'center'>
<td rowspan="2">121202</td>
<td colspan="2">张三</td>
<!-- <td>18</td> -->
</tr>
<tr align = 'center'>
<!-- <td>121205</td> -->
<td>李四</td>
<td>20</td>
</tr>
</tbody>
</table>
- 表单标签
表单域:form标签,包括< input >< select >< textarea >三大标签
用于收集用户信息,将范围内的表单信息提交给服务器
在HTML中,一个完整的表单通常由表单域 表单控件 和提示信息3个部分构成
<form action=''url地址.php'' methods=''提交方式GET/POST' name=''表单域名称''>
//以下为各种表单控件
<input type = 'text' placeholder = '请输入账号' name=''username''>
<input type = 'password' placeholder = '请输入密码' maxlength ='6' name=''pwd''>
//checked默认选中
<input type = 'radio' checked name ='gender'>男
<input type = 'checkbox' checked name = 'fruit'>草莓
</form>
注意
1.单选框要实现互斥效果 要利用name属性进行分组
都设置同一个name值
2.name和value是每个表单元素都有的属性,主要给后台人员使用
3.name表单元素的名字,要求单选按钮和复选框要有相同的name值
4.checked属性主要是针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素
- 表单控件inout
- 在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件
| 表单属性 | 含义 |
|---|---|
| type | 控件的类型 |
| type = ‘text’ | 文本输入框 |
| type=‘password’ | 密码输入框 |
| type=‘radio’ | 单选框 |
| type=‘checkbox’ | 复选框 |
| type=‘button’ | 普通按钮 |
| type=‘submit’ | 提交按钮,默认显示提交字样,可用value直接修改,如value=’‘免费注册’’ |
| type=‘reset’ | 重置按钮 |
| type=‘file’ | 文件域 |
| type=‘image’ | 图片按钮 |
| type=‘date’ | 万年历 |
| value | 默认值 用于记住账号密码 |
| placeholder | 占位符 |
| maxlength | 控制输入的最大字符数 用数字赋值即可 |
| checked | 默认选中状态 |
- 新版本按钮
<button>新版本按钮</button> - label标签
- 用于绑定一个表单元素,当点击label标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
- for属性应当与相关元素的id属性相同
//第一种方式
<label>
性别: <input type = 'radio' name = 'gender'>男
</label>
//第二种方式(label for id) (重点)
//通过for属性 找到对应的id进行绑定 更严谨
<label for = 'male'>男</label>
性别: <input type = 'radio' name = 'gender' id = 'male'>
- textarea文本域(了解)
- 使用场景:当用户输入内容较多的情况下,常见于留言 评论
//用来给用户输入大段的文本
//rows 显示的行数
//cols 显示的字符数
<textarea rows ='20' cols ='50'></textarea>
- select下拉列表
- 使用场景:在页面中,有多个选项让用户选择,并且想要节约页面空间时
- 至少包含一对option
- selected设置默认选中
//option 下拉列表的选项值
//selected 下拉框中默认选中
年份:
<select>
<option>2013</option>
<option>2014</option>
<option selected>2015</option>
</select>
标签的属性
<标签名 属性名=‘属性值’></标签名>
属性的个数没有限制 中间用空格隔开
- 图片标签
<img src = '图片的路径.jpg' alt ='图片加载失败时显示的图片描述文字' title = '鼠标悬停时显示的图片描述文字' width = '200px'>
//src 图片的路径的后缀名必须要有
//width/height 修改图片的尺寸
//如果不想图片变形 让图片等比例缩放 只控制一边 另外一边会自动等比例缩放
- 超链接标签
<a href = '目标页面路径' target = '_blank'>点击跳转</a>
//a标签中必须有内容 否则无法跳转
//target 控制页面的跳转方式
//target ='_self ' 默认值 不保留原来的页面
//target = '_blank' 保留原来的页面
注意
如果想把页面上所有的a标签都保留原来的页面进行跳转 可以使用 < base target = ‘_blank’ >
base标签写在head标签中
一个页面只需要写一次 就可以控制所有的a标签
- 打开网络地址 必须保证域名完整
<a href = 'http://www.baidu.com'>百度</a>
- 打开网络资源文件
<a href = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562937841212&di=76fccdd5b9daad767a2b522c2b886f96&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F20%2F20141220003959_NTkZE.jpeg'>明星</a>
- 空链接
<a href = '#' >我是一个空链接</a>
- 内部链接
<a href='demo.html' target='_blank'>内部链接</a>
- 下载链接
<a href = 'image.zip'>压缩包下载（.exe或.zip格式）</a>
- 网页元素链接
<a href="http://www.baidu.com" target="_blank">
<img src="cat.jpg" alt="">
//如文本、图像、表格、音频、视频等都可以添加超链接
</a>
锚点定位
给目标元素设置一个唯一标识
id具有唯一性 不能重复
让a标签找到目标元素 通过 href = ‘# + id’
锚点定位要确保有滚动条出现 才能实现锚点定位
<p id = 'demo'></p>
.
.
.
.
<a href = '#demo' >锚点定位</a>
转义符(了解)
| 转义符 | 符号/含义 |
|---|---|
| < ; | < 小于号 |
| > ; | > 大于号 |
|   ; | 空格 |
| © ; | ©版权 |
路径
在电脑中的路径体现 其实就是一个个文件夹
路径就是帮助你在这些文件夹中找到你想要的目标文件 不管是图片 视频 还是音频
- 绝对路径(了解)
<img src='C:\image.png' />
<img src='https://img-home.csdnimg.cn/images/20201124032511.png' />
完整的文件路径
带有盘符的路径就是绝对路径
完整的网络地址
缺点: 可移植性差
- 相对路径(重点)
图片与html在同一级目录 直接通过图片的名字找到
<img src = '1.png'>
图片在html的下一级目录
<img src = '目录/1.png>
图片在html的上一级目录
<img src = '../1.png>
图片与html不在同一文件夹
<img src = '../目录/1.png>
注意
跨盘符无法使用相对路径 只能使用绝对路径
查阅文档
- W3C https://www.w3school.com.cn/
- MDN https://developer.mozilla.org/zh-CN/ (推荐)
扫一扫
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
