一、 网页组成
分为三大部分：HTML、CSS和JavaScript。
- HTML（Hyper Text Markup Language，即超文本标记语言），网页骨架。
- CSS（Cascading Style Sheets，层叠样式表），使页面变得美观、优雅，网页皮肤。
- JavaScript（简称JS，是一种脚本语言），实现实时、动态、交互的页面功能，网页肌肉。
学习目的是制作遥控车控制网页界面，因此主要学习HTML。
学习链接：黑马程序
二、HTML认知
2.1 结构
<!-- 这部分被注释了 -->
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主题内容。
</body>
</html>
2.2 常用标签
标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
段落标签
<p>这是一个段落</p>
换行标签
<br>
水平分割线
<hr>
文本格式化标签
| 标签 | 说明 |
|---|---|
| b/strong | 加粗 |
| u/ins | 下划线 |
| i/em | 倾斜 |
| s/del | 删除线 |
图片标签
- 单标签
- 需要借助标签的属性进行设置
<img src="./1.jpg" alt="如果图片无法加载，则显示这段文字" title="鼠标悬停时显示" width="200" height="100">
音频/视频标签
<audio src="music.mp3" controls autoplay loop>音频</audio>
<video src="video.mp4" controls autoplay loop>视频</video>
controls：显示播放的控件
autoplay：自动播放
loop：循环播放
链接标签
一般网页的首页命名为index.html。
<a href="./目标网页.html 或者 网址" target="">超链接</a>
<a href="#">空链接</a>
target为_self：覆盖原网页打开；_blank：新建一个网页并打开。
2.3 列表标签
分为：无序列表、有序列表和自定义列表。
后续用到再学
2.4 表格标签
后续用到再学
2.5 表单标签
用途：登录、注册、搜索等功能。
input标签
- 用于收集用户信息
- 可以通过type属性值，展示不同的效果
文本框：<input type="text" placeholder="请输入用户名">
<br>
<br>
密码框：<input type="password">
//placeholder：占位符，提示用户的。
单选功能：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
//name相同，则只能二选一。
//checked默认选女
多文件上传：
<input type="file" multiple>
表单域标签：
<form action="目的地址">
......
<input type="reset">//重置按钮，作用当前表单域。
</form>
button按钮
<button type="button">普通按钮</button>
下拉菜单
<select>
<option>北京</option>
<option selected>上海</option>
<option>深圳</option>
</select>
//selected默认选中
文本域
推荐用CSS去设计美化。
<textarea cols="60" rows="90"></textarea>
label标签
- 用于绑定表单与内容的关系
//方法一
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
//方法二
<label><input type="radio" name="sex" checked> 女</label>
2.6 语义化标签
- 简单了解
和div特点一致，不过是多了语义。
2.7 字符实体
- 网页不认识多个空格，只认识一个。
使用多个 可表示多个空格。
三、CSS认知
后续用到再学
四、JS认知
变量
var和let都是JavaScript中用于声明变量的关键字。使用var声明的变量是函数作用域的，而使用let声明的变量是块级作用域的，具有更严格的作用域规则。在ES6中，引入了let和const关键字来替代var，因为它们更加安全且易于维护。
Touch事件简介
pc上的web页面鼠 标会产生：onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件。文章来源：https://www.toymoban.com/news/detail-421516.html
但是在移动终端上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件。文章来源地址https://www.toymoban.com/news/detail-421516.html
- 当按下手指时，触发ontouchstart；
- 当移动手指时，触发ontouchmove；
- 当移走手指时，触发ontouchend。
到了这里，关于网页学习-小试牛刀的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
