H5+CSS3+移动web
Html5+CSS3+移动web
环境准备
VSCode插件
- Chinese 界面汉化插件
- open in browser 打开网页插件
VSCode快捷键
ctrl++字体放大
ctrl+-字体缩小
Tab向后缩进
Shift+Tab向前缩进
Ctrl+/添加/删除注释
Alt+z自动折行
Shift+Alt+f全局格式化缩进
HTML定义
HTML：超文本标记语言——Hyper Text Markup Language
- 超文本指的是链接
- 标记也叫标签，指的是代码中带有简括包的文本
路径
路径指的是查找文件时，从起点到终点经历的路线
分类
相对路径
从当前文件位置出发查找目标文件
- windows：从盘符出发
- mac：从根目录（/）出发
应用场景：友情链接，可以使用网址来获取在线网页的一些图片或者静态资源
注意：windows默认是\，其它系统是/，建议统一写为/
绝对路径
从盘符出发查找目标文件（主流）
- /：表示进入文件夹
- .：表示当前文件夹，举例./dog.jpg指的是当前文件夹下的dog.jpg文件
- ..：表示上一级目录，举例../表示进入上一级文件夹
标签
标签属性的使用方法
- 写法：属性名=”属性值”
- 属性写在标签尖括号里边，标签名后边，标签名和属性之间用空格隔开，不区分先后顺序
标签汇总
双标签
<!-- 加粗 -->
<strong></strong>
<b></b>
<!-- 整个网页 -->
<html></html>
<!-- 网页头部，存放给浏览器看的代码，如css -->
<head></head>
<!-- 网页主体，网页中的内容 -->
<body></body>
<!-- 网页标题 -->
<title></title>
<!-- 内容一级标题，只能用一次，用来放新闻标题或者网页logo -->
<h1></h1>
<!-- 内容二级标题 -->
<h2></h2>
<!-- 内容三级标题 -->
<h3></h3>
<!-- 内容四级标题 -->
<h4></h4>
<!-- 内容五级标题 -->
<h5></h5>
<!-- 内容六级标题 -->
<h6></h6>
<!-- 段落标签 -->
<p></p>
<!-- 倾斜 -->
<em></em>
<i></i>
<!-- 下划线 -->
<ins></ins>
<u></u>
<!-- 删除线 -->
<del></del>
<s></s>
<!-- 超链接，href属性填写跳转地址，target="_blank"属性为新窗口打开 -->
<a href="https://www.baidu.com">跳转到百度</a>
<!-- 音频标签 -->
<audio src="音频的URL"></audio>
<!-- 视频标签 -->
<video src="视频的URL"></video>
<!-- 无序列表 -->
<ul>
<li></li>
</ul>
<!-- 有序列表 -->
<ol>
<li></li>
</ol>
<!-- 定义列表 -->
<dl>
<dt></dt>
<dd></dd>
</dl>
<!-- 表格 -->
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
<!-- 表格结构thead、tbody、tfoot -->
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
<!-- 表单 -->
<form>
文本框：<input type="text"><br>
密码框：<input type="password"><br>
单选框：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女<br>
多选框：<input type="checkbox" name="jishu" checked>html
<input type="checkbox" name="jishu">java
<input type="checkbox" name="jishu">python
文件上传<imput type="file" multiple>
</form>单标签
<!-- 换行 -->
<br>
<!-- 水平线 -->
<hr>
<!-- 图像标签 -->
<img src="图像路径">
<!-- 表单input标签 -->
<input type="">标签语法
标签成对出现，中间包裹内容
<>里边放英文字母（标签名）
结束标签比开始标签多/
拓展
双标签：成对出现的标签
<title>标题</title>但标签：只有开始标签。没有结束标签
<hr> #换行 <br> #水平线
标签关系
作用：明确代码的书写位置
分类：
父子关系（嵌套关系）
<!-- 此处html是父标签head是子标签 --> <html> <head> </head> </html>兄弟关系（并列关系）
<html> <!-- 此处head标签和body标签是并列关系 --> <head></head> <body></body> </html>个人理解(仅代表个人观点不代表集体立场)：可以通过代码中的缩进不难看出，相同缩进并且是被同一个标签所包裹的标签是并列关系，父子关系的标签必然是两个标签其中一个被另外一个完全包裹的
段落标签
标签名：p（双标签）
显示特点：
- 独占一行
- 段落之间存在间隙
文本格式化标签
作用：为文本台南佳特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
加粗：
- 标签名：strong / b
倾斜：
- 标签名：em / i
下划线：
- 标签名：ins / u
删除线：
- del / s
注意：strong、em、ins、del、自带强调作用，推荐使用
图像标签
标签名：img（单标签）
作用：在网页中插入图片
<html src="图片路径">属性(属性使用方法)：
- alt：替换文本，当图片无法显示的时候显示的文字
- title：提示文本，鼠标悬停在图片时显示的文字
- width：图片宽度，值为数字，没有单位，一般写在css中
- height：图片高度，只为数字，没有单位，一般写在css中
注意：src用于指定图像的位置和名称，是图像标签的必须属性
拓展：当src路径以./开头，VSCode有提示功能
HTML基本骨架
html基本归家如下所示
快速生成骨架：!+Enter/Tab键
<!-- html是整个网页 -->
<html>
<!-- 网页头部，存放给浏览器看的代码，如css -->
<head>
<!-- 网页标题 -->
<title>网页标题</title>
</head>
<!-- 网页主题，网页中的内容 -->
<body>
网页主题
</body>
</html>音频标签
标签名：audio（双标签）
作用：在页面插入音频（支持MP3、Ogg、Wav）
<audio src="音频路径"></audio>属性(属性使用方法)：
- controls：显示音频控制面板
- loop：循环播放
- autoplay：自动播放
视频标签
标签名：video（双标签）
作用：在页面插入视频（支持格式：MP4、WebM、Ogg）
<video src="视频的URL"></video>属性(属性使用方法)：
- controls：显示视频控制面板
- loop：循环播放
- muted：静音播放
- autoplay：自动播放
vscode快速生成基本骨架
创建html文件，在文件中输入英文的感叹号(!)然后回车或者按
Tab键
列表
作用：不与内容排列整齐的区域
分类：
- 无序列表：不以数字序列开
- 有序列表：以数字按照顺序排序的列表
- 定义列表：类似于官网首页最下边的分类
无序列表
标签名：ul、li（ul是无序列表，li是列表条目）
作用：布局排列整齐的不需要规定顺序的区域
<ul> <li>条目</li> </ul>举例：
注意：
- ul标签里只能包裹li标签
- li标签里边可以包裹任何内容
有序列表
标签名：ol、li（ol是有序列表，li是条目）
作用：布局排列整齐的需要规定顺序的区域
<ol> <li></li> </ol>举例：
注意：
- ol标签里只能包裹li标签
- li标签里边可以包裹任何内容
定义列表
标签名：dl、dt和dd（dl是定义列表，dt是定义列表的标题、dd是定义列表的描述/详情）
作用：类似与官网帮助中心的区域
<dl> <dt></dt> <dd></dd> </dl>举例：
注意：
- dl标签里只能包裹dt和dd标签
- dt和dd标签里边可以包裹任何内容
表格
标签：table、tr、th、td
- table：表格
- tr：行
- th：表头单元格,相当于第一行表明每列数据是记录的什么的单元格
- td：内容单元格，指记录的数据
作用：网页中的表格和Excel表格类似，用来展示数据
<table> <tr> <th></th> </tr> <tr> <td></td> </tr> </table>举例：
注意：
- 在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更让清晰
分类：
- thead：表格头部，主要是表头单元格哪一行
- tbody：表格主体，主要是内容单元格的行
- tfoot：表格底部，主要是信息汇总的区域比如整列求和求平均值
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot> </table>
合并单元格
属性名：rowspan、colspan（rowspan是跨行合并、rowspan是跨列合并，取值是数字，表示要合并的单元格数量）
作用：将多个单元格合并成一个单元格，以合并同类信息
使用方法：
- 明确合并目标
- 跨行合并保留最上边单元格，跨列合并保留最左边单元格，添加对应属性
- 删除其他单元格
分类：
跨行合并：保留最上边的单元格
<table> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>莫言</td> <td>99</td> <td rowspan="2">100</td> <td>199</td> </tr> <tr> <td>如若</td> <td>98</td> <!-- 删除或者注释下边一行，此处我选择的是注释 --> <!-- <td>100</td> --> <td>198</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </tfoot> </table>
跨列合并：保留最左边的单元格
<table> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>莫言</td> <td>99</td> <td>100</td> <td>199</td> </tr> <tr> <td>如若</td> <td>98</td> <td>100</td> <td>198</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="3">全市第一</td> <!-- 删除或者注释合并多余的几列，此处我选择的是注释 --> <!-- <td>全市第一</td> <td>全市第一</td> --> </tr> </tfoot> </table>
注意：不可以跨结构合并
表单
标签：form（单标签）
作用：收集用户信息
使用场景：
- 登录页面
- 注册页面
- 搜索区域
input标签
属性:
input
text：文本框，用于输入单行文本,明文显示
password：密码框，非明文显示
radio：单选框
name：空间分组，同组只能选择一个，相当于将同一个name值划分为一个组，只能选择同一组的一个
checked：默认选中，属性名和属性值相同，简写为一个单词
单选框：<input type="radio" name="gender" checked>男 单选框：<input type="radio" name="gender">女checkbox：多选框
- checked：默认选中，属性名和属性值相同，简写为一个单词
- name：空间分组，相当于将同一个name值划分为一个组，便于传入后台通过这个name将同一组的数据传入后台
多选框：<input type="checkbox" name="jishu" checked>html <input type="checkbox" name="jishu">java <input type="checkbox" name="jishu">python
file：上传文件
multiple：多文件上传，默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
文件上传<imput type="file" multiple>效果展示：
placeholder:占位文本
效果展示：
