一、 Web的构成
构成语言说明结构HTML页面元素和内容表现CSS网页元素的外观和位置等页面样式（如：颜色、大小等）行为Javascript网页模型的定义和页面的交互
1. HTML的概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频等内容进行描述
1.1 创建HTML网页
在代码文件夹中鼠标右击新建文本文档命名为：文字变粗案例.txt 双击这个文件，输入代码等内容记得保存！在文件上点击鼠标右键重命名修改文件后缀为.html 双击文字变粗案例.html，浏览器会自动打开文件并显示之前输入的内容
2. HTML页面固定结构
<html> <head> <title>网页总标题</title> </head> <body> 网页的主题内容 </body> </html>
3. VS Code
3.1 VS Code的基本快捷键
快速生成标签：英文+Tab
保存文件Ctrl+S
快速查看网页效果：右击Open in Default Browser 快捷键：Alt+B
快速生成结构标签：!+Tab ，"!"必须是英文，文件后缀名必须是.html。
3.2 注释
为代码添加具有解释性、描述性的信息，主要用来帮助开发人员理解代码 快捷键：Ctrl+/
3.3 HTML标签的结构
<strong> 要加粗的文字 </strong> 开始标签 包裹的内容 结束标签
标签由< > / 英文单词字或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名。
常见的标签由两部分组成，我们称之为：双标签，前面的部分叫开始标签，后面的部分叫结束标签，两部分之间为包裹内容。
少数标签由一部分组成，我们称之为：单标签，自成一体，无法包裹内容。
3.4 HTML标签的属性
<strong class=”one”>文字要变粗</strong> class=”one”：标签的属性 class：属性名 one：属性值
tips:
标签的属性写在“开始标签”的内部
标签上可以同时存在多个属性
多个属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
4. HTML基础标签学习
4.1 标题标签
代码：
<body> 普通的文字 <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </body>
代码实现的标题效果如下：
tips：
文字都有加粗
文字都有变大，并且从h1➡h6文字逐渐减小
标题独占一行
h1标签用于特定场景，如：新闻的标题、网页logo部分
4.2 段落标签
代码：
<p>我是一段文字</p>
<body> <h1>前端开发</h1> <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p> <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p> <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p> </body>
代码实现效果如下：
tips：
段落之间存在间隙
段落独占一行
4.3 换行标签
代码：
<br>
tips：单标签，直接放在要换行的文字前面
4.4 水平线标签
代码：
<hr>
tips: 单标签，放在标题和段落中间
4.5 文本格式化标签
加粗 倾斜 删除线 下划线代码（规范使用）：
<strong>加粗</strong> <ins>下划线</ins> <em>倾斜</em> <del>删除</del>
另一种代码：
<b>加粗</b> <u>下划线</u> <i>倾斜</i> <s>删除线</s>
tips：一般使用第一种代码，符合标签语义化，利于机器解析
4.6 图片标签
代码：
<img src="" alt="">
4.61 图片标签的src属性
属性名：src 属性值：目标图片的路径 注意点：当前网页和目标图片在一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
4.62 图片标签的alt属性
属性名：alt 属性值：替换文本
当图片加载失败时，才会显示alt文本
当图片加载成功时，不会显示alt文本
4.63 图片标签的title属性
属性名：title 属性值：提示文本
当鼠标悬停时，才显示的文本
title属性不仅仅用于图片标签，还可以用于其他标签 代码：
<img src="" alt="" title=""> 鼠标停在图片上面会显示出来的文字 <h1 title="这是一个标题">一级标题</h1> 也可以用于其他鼠标可以悬停的地方
4.64 图片标签的width和height属性
属性名：width和height 属性值：宽度和高度（数字）
如果只设置width和height其中一个，另一个没设置的自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形
4.7 路径
场景：页面需要加载图片，需要先找到对应的图片
路径可分为：
绝对路径（了解）
相对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径 例如：
盘符开头：D:\day01\images\1.jpg
完整网络地址：http://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）：从当前文件夹开始出发找目标文件的过程
当前文件：当前的html网页
目标文件：要找的图片 相对路径分类：
同级目录：当前文件和目标文件在同一目录中 代码：直接写目标文件的名字代码一：<img src="目标图片.gif">代码二：<img src="./目标图片.gif">VS Code快捷操作：直接敲./后，会自动提示统计目录中有哪些文件，直接选择即可
下级目录：我在客厅，你在卧室，我要找你代码步骤：1.先知道在哪个文件夹里面➡文件夹名字2.进入这个文件夹 ➡/3.此时看到的目标文件直接喊他➡直接写目标文件名字VS Code快捷操作：直接敲 ./ 即可
上级目录：我在卧室，你在客厅，我要找你代码步骤：1.先出当前文件夹，到上一级目录➡ ../2.此时看到目标文件直接喊他➡直接写目标文件VS Code快捷操作：直接敲 ../后，会自动提示上级目录下有文件，直接选择即可
4.8 音频标签
代码：
<audio src=" "></audio>
属性名功能src音频的路径controls显示播放的控件autoplay自动播放（部分浏览器不支持）loop循环播放
tips：目前音频标签只支持MP3、WAV、OGG格式
4.9 视频标签
代码：
<video src=""></video>
属性名功能src视频的路径controls显示播放的控件autoplay自动播放（谷歌浏览器中需要配合muted实现静音播放）loop循环播放
tips:视频标签目前只支持MP4、WebM、OGG
4.10 链接标签（a链接、超链接、锚链接）
代码：
外部链接： <a href="https://bilibili.com">点击去B站</a> 内部链接： <a href="./15视频标签.html">点击去上一个笔记</a>
a标签特点：
a标签默认文字下有下划线
a标签从未点击过，默认颜色是蓝色
a标签点击过之后，颜色变为紫色（清除浏览器记录可以重新变为蓝色）
4.101 链接标签的target属性
属性名：target 属性值：目标网页的打开形式
取值效果_self默认值，在当前窗口中跳转（覆盖原网页）_blank在新窗口中跳转(保留原网页)
空链接：
<a href="#">空连接</a>
功能：
点击之后回到网页顶部
开发中不确定该链接最终跳转位置，可以用空链接先占位置
5. HTML列表标签
5.1 无序列表
代码：
<ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>西瓜</li> <li>葡萄</li> </ul>
5.2 有序列表
代码：
<ol> <li>华为</li> <li>苹果</li> <li>小米</li> <li>三星</li> </ol>
注意：无序列表和有序列表的ul或ol标签只能包裹li标签，而li标签可以包裹任意内容
5.3 自定义列表
场景：在网页底部的导航中通常会使用自定义列表实现 标签组成：
标签名说明dl表示自定义列表的整体dt表示自定义列表的主题dd表示自定义针对主题的每一项内容
显示特点：dd会默认显示缩进效果 注意：
dl标签只允许包裹dt和dd标签
dt和dd标签可以包含任何内容
代码：
<dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>订单操作</dd> </dl>
6. HTML表格标签
6.1 表格的基本标签
标签名说明table表格整体，可用于包裹多个trtr表格每行，可用于包裹tdtd表格单元格，可用于包裹内容
基础代码：
<table> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>小梦</td> <td>100</td> <td>小梦真帅</td> </tr> <tr> <td>小蓝</td> <td>90</td> <td>小蓝真蓝</td> </tr> <tr> <td>小白</td> <td>80</td> <td>小白真白</td> </tr> </table>
实现效果：
6.2 表格的相关属性
属性名属性值效果border数字边框宽度width数字表格宽度height数字表格高度
加上属性后代码：
<table border="1" width="300" height="100"> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>小梦</td> <td>100</td> <td>小梦真帅</td> </tr> <tr> <td>小蓝</td> <td>90</td> <td>小蓝真蓝</td> </tr> <tr> <td>小白</td> <td>80</td> <td>小白真白</td> </tr> </table>
效果：
6.3 表格标题和表头单元格标签
场景：在表格中表示整体大标题和一列小标题
标签名名称说明caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
属性：rowspan,合并单元格 代码：
<table border="1" width="300" height="300"> <caption><h3>学生成绩单</h3></caption> <!-- 表格的头部 --> <thead> <tr> <th>姓名</th> <th>成绩</th> <th>评价</th> </tr> </thead> <!-- 表格的身体 --> <tbody> <tr> <td>小明</td> <!-- 保留 --> <td rowspan="2">100</td> <td>厉害</td> </tr> <tr> <td>小黑</td> <!-- 删除 --> <!-- <td>100</td> --> <td>真行</td> </tr> </tbody> <!-- 表格的底部 --> <tfoot> <tr> <td>总结</td> <td colspan="2">郎才女貌</td> <!-- <td>郎才女貌</td> --> </tr> </tfoot> </table>
效果：
7. HTML表单标签
7.1 input系列标签
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页 标签名：input
input标签可以通过type属性值的不同，展示不同效果 type属性值：标签名type属性值说明inputtext文本框，用于输入单行文本inputpassword密码框，用于输入密码inputradio单选框，用于多选一inputcheckbox多选框，用于多选多inputfile文件选择，用于之后上传文件inputsubmit提交按钮，用于提交(配合form标签)inputreset重置按钮，用于重置(配合form标签)inputbutton普通按钮，默认无功能，之后配合js添加功能(配合form标签)
代码：
昵称：<input type="text"> <br> 密码：<input type="password"> <br> 性别：<input type="radio"> 男 <br> 爱好：<input type="checkbox"> 敲代码 <br> 上传文件：<input type="file"> <br> <input type="submit"> <input type="reset"> <input type="button">
效果：
input文本框常用属性：属性名属性值placeholder占位符，提示用户输入内容的文本拓展：value属性和name属性作用介绍 value属性：用户输入的内容，提交之后会发送给后端服务器 name属性：当控件的含义，提交之后可以告诉后端发送过去的数据是什么含义 后端接受到的数据的格式是：name的属性值=value的属性值 代码： 昵称：<input type="text" placeholder="请输入昵称"value="这是帅哥" name="wikiname">
input密码框常用属性：属性名属性值placeholder占位符，提示用户输入内容的文本注意点：type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text➡文本框 密码：<input type="password" placeholder="请输入密码">
input单选框常用属性：属性名说明name分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中checked默认被选中注意点：name属性对于单选框有分组功能，有相同name属性值的单选框为一组，一组只能同时有一个被选中 性别：<input type="radio" name="sex" checked> 男<input type="radio" name="sex"> 女
input复选框常用属性：属性名说明checked默认选中 爱好：<input type="checkbox" checked> 敲代码<input type="checkbox"> 看书<input type="checkbox"> 听音乐
input文件选择常用属性：属性名说明multiple多文件选择上传文件：<input type="file" multiple>
7.2 button系列标签
type属性值：
标签名type属性值说明buttonsubmit提交按钮，点击之后提交数据给后端服务器buttonreset重置按钮，点击之后恢复表单默认值buttonbutton普通按钮，默认无功能，配合js添加功能
注意：
谷歌浏览器button默认是提交按钮
button标签是双标签，更便于包裹其它内容：文字、图片等
重置按钮使用要配合form标签
<form> 昵称：<input type="text" placeholder="请输入昵称"> <br> <button type="submit"> button提交按钮 </button> <br> <button type="reset "> button重置按钮 </button> <br> <button type="button"> button普通按钮 </button> </form>
7.3 select下拉标签
标签组成：
select标签：下拉标签的整体
option标签：下菜单的每一项
常见属性：
selected：下拉菜单中的默认选中
所在城市：<select> <option>上海</option> <!-- 默认选中北京 --> <option selected>北京</option> <option>广州</option> <option>深圳</option> </select>
7.4 文本域标签
场景：在网页中提供可输入多行文本的表单控件 标签名：textarea 常见属性：
cols:规定了文本域中可见宽度
rows:归档了文本域中可见行数
注意点：
右下角可以拖拽调整大小
实际开发时针对于样式效果推荐用CSS设置
<textarea cols="60" rows="30"></textarea>
7.5 label标签
场景：用于绑定内容与表单标签的关系 标签名：label 使用方法1:
使用label标签把内容(如：文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<input type="checkbox" id="one"> <label for="one">敲代码</label>
使用方法2：
直接使用label标签把内容(如：文本)和表单标签一起包裹起来
需要把label标签的for属性删除即可
<label> <input type="checkbox"> 读书 </label>
8. 语义化标签
8.2 没有语义的布局标签
场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签 div标签：一行只显示一个（独占一行） span标签：一行可以显示多个
<div>我是一个div</div> <div>我是一个div</div> <div>我是一个div</div> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span>
8.3 有语义的布局标签
标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章
注意点：以上标签显示特点和div一致，但是比div多了不同的语义
9. 字符实体
9.1 HTML中的空格合并现象
场景：如果在HTML代码中同时并列出现多个空格、换行、缩进等，最终浏览器指挥解析出一个空格
9.2 常见字符实体
场景L:在网页中展示特殊符号效果时，需要使用字符实体替代 结构：&英文; 常见字符实体：
显示结果描述实体名称空空格  ;<小于号< ;>大于号> ;&和号& ;"引号" ;'撇号&apos ;(IE不支持)¢分(cent)¢ ;£镑(pound)£ ;￥元(yen)¥ ;€欧元(euro)&euro ;§小节§ ;©版权(copyright)© ;
发表评论 取消回复