前端web：一、Html

一、web标准的构成

1.1为什么需要web标准？

web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

1.2Web标准的构成

结构（html）、表现（css）、行为（javascript）

二、基本结构标签

html：网页的整体

head：网页的头部

body：网页的身体

title：网页的标题

三、常用的html标签

3.1html标签的结构

标签名、双标签、开始标签、结束标签、单标签

3.2标签的属性

1.写在标签内部

2.可以有多个属性

3.以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

3.3常用标签

1.标题标签

<!--标题标签：h系列标签 代码：h1：1级标题 h2：2级标题 h3：3级标题 h4：4级标题 h5：5级标题 h6：6级标题 特点：1、标签的文字都有加粗 2、标签的文字都有变大，从h1~h6文字逐渐减小 3、每一个标题独占一行 注意点：h1标签最为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分 --> 普通的文字 <h1>我是1级标题</h1> <h2>我是2级标题</h2> <h3>我是3级标题</h3> <h4>我是4级标题</h4> <h5>我是5级标题</h5> <h6>我是6级标题</h6>

2.段落标签

<!--段落标签：p标签 双标签 特点：1、段落之间存在间隙 2、每个段落是独占一行
-->
<h1>前端开发</h1>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以 及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作 是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览 为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强 大。</p> <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛 应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>

3.换行标签

<!--换行标签：br 单标签 作用：强制换行
-->
<h1>前端开发</h1>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以 及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为 主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 </p><p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br>HTML5，Node.js的广 泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>

4.水平线标签

<!--水平线标签：hr标签 单标签 作用：分割不同主题的水平线 --><h1>前端开发</h1> <hr><p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p> <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作 是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览 为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强 大。</p> <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br> HTML5，Node.js 的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>

5.**文本格式化标签**

<!--文本格式化标签：让文本有加粗、下划线、倾斜、删除线文本的格式效果
-->
<!-- 第一组 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br>
<!-- 第二组：推荐使用，语义更加强烈 -->
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>

6.**图片标签**

<!--图片标签：img 单标签作用：在网页中展示一张图片 属性：1、src：告诉浏览器要显示哪一张图片 属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可） 2、alt：替换文本 当图片加载失败时（如：路径写错了），才显示的文字3、title：提示文本 当鼠标悬停在图片上时，才显示的文字4、width：图片的宽度 5、height：图片的高度 注意点：1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放 2、如果同时设置了两个，若设置不当此时图片可能会变形 --> <img src="cat.gif" alt="这是一只摇头猫" title="震惊！小猫咪竟然会干这种事？"><h1 title="这是一个h1标签">我是一个一级标题</h1>

7.媒体标签

<!-- 多媒体标签： 音频标签：audio 属性：1、src：路径 2、controls：播放的控件 3、autoplay：自动播放（部分浏览器不支持） 4、loop：循环播放 123456789
-->

    <audio src="./music.mp3" controls autoplay loop></audio> <!-- 视频标签：video 属性：1、src：路径 2、controls：播放的控件 3、autoplay：自动播放（部分浏览器不支持）——》在谷歌浏览器中写muted可以完成静 音的自动播放4、loop：循环播放 --> <video src="./video.mp4" controls autoplay muted loop></video>

8.链接标签

<!--超链接：a标签 双标签
作用：点击之后跳转网页
属性：
1、href：告诉浏览器点击之后跳转去哪一个网页 取值：路径 1、外部链接：互联网上的绝对路径 2、内部链接：推荐使用相对路径
2、target：目标网页的打开方式 取值：1、_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖 2、_blank：在新窗口中进行跳转，原网页保留 -->

    <a href="https://www.baidu.com/" target="_blank">点击之后去百度网页</a> <a href="./15-视频标签.html" target="_blank">点击之后去刚刚书写的视频网页</a>

四、路径的使用

1.**相对路径**

相对路径：从当前文件开始出发找目标文件的过程

同级目录：直接写：目标文件名字！
下级目录：直接写：文件夹名/目标文件名字！
上级目录：直接下：../目标文件名字！

2.**绝对路径**（了解）

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

盘符开头：D:\day01\images\1.jpg 完整的网络地址：https://www.baidu.com/2018czgw/images/logo.gif

五、标签

没有语义的布局标签 div和pan

Ø 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

Ø div标签：一行只显示一个（独占一行）

Ø span标签：一行可以显示多个

有语义的布局标签----html5标签

Ø 场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

header\nav\footer\aside\section\article

六、列表与表格

6.1列表

1.无序列表（常用）

Ø 场景：在网页中表示一组无顺序之分的列表，如：新闻列表。

Ø 标签组成ul , li

<h1>水果列表</h1>
<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项 -->

<ul><li><p>我也是一个p标签</p> </li><li>榴莲</li> <li>香蕉</li> <li>苹果</li> <li>哈密瓜</li> <li>火龙果</li>
</ul>

2. 有序列表

Ø 场景：在网页中表示一组有顺序之分的列表，如：排行榜。

Ø 标签组成:ol , li

<h1>成绩排行榜</h1>
<!-- ol表示有序列表的整体 -->
<!-- li表示有序列表的每一项 -->
<ol><li>小姐姐：100分</li> <li>小帅哥：80分</li> <li>小可爱：60分</li>
</ol>

6.2表格

Ø 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

Ø 基本标签： table+tr+td

Ø 注意点：

• 标签的嵌套关系：table > tr > td

Ø 常见相关属性:border,width,height,caption,th

<!-- table表示表格的整体 -->
<!-- tr表示表格的每一行 -->
<!-- td表示表格的单元格 --><table> <tr><td>姓名</td><td>成绩</td><td>评语</td></tr> <tr><td>小哥哥</td> <td>100分</td><td>小哥哥真帅气</td> </tr> <tr><td>小姐姐</td><td>100分</td> <td>小姐姐真漂亮</td></tr> <tr><td>总结</td><td>郎才女貌</td> <td>郎才女貌</td></tr>
</table>

Ø 合并单元格

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁

给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

<table border="1" width="300" height="300">
<caption><h3>学生成绩单</h3>
</caption>
<tr><th>姓名</th><th>成绩</th> <th>评语</th>
</tr>
<tr><td>小哥哥</td><!-- 保留 --> <td rowspan="2">100分</td><td>小哥哥真帅气</td> </tr><tr><td>小姐姐</td> <!-- 删除 --> <!-- <td>100分</td> --> <td>小姐姐真漂亮</td>
</tr>
<tr><td>总结</td> <!-- 保留 --> <td colspan="2">郎才女貌</td><!-- 删除 --> <!-- <td>郎才女貌</td> -->
</tr>
</table>

七、表单

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

7.1 input系列标签

Ø标签名：input

• input标签可以通过type属性值的不同，展示不同效果

Øtype属性值： text,password,radio,checkbox,file,submit,reset,button

<form><!-- 1、文本框：text（type属性的默认值） --> 昵称：<input type="text" placeholder="请输入您的昵称"><br><br> <!-- 2、密码框：password --> 密码：<input type="password" placeholder="请输入您的密码"><br><br><!-- 3、单选框：radio --> 性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br><br>
<!-- 4、多选框：checkbox -->
爱好：<input type="checkbox" checked>敲代码 <input type="checkbox" checked>熬夜<input type="checkbox">掉头发<br><br> <!-- 5、文件选择：file --> <input type="file" multiple><br><br><!-- 按钮 --> <!-- 1、submit：提交按钮 --> <input type="submit"> <!-- 2、reset：重置按钮 --> <input type="reset"><!-- 3、button：普通按钮 --> <input type="button" value="普通按钮"></form>

select**下拉菜单标签**

Ø 场景：在网页中提供多个选择项的下拉菜单表单控件

Ø 标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

Ø 常见属性：

selected：下拉菜单的默认选中

textarea文本域标签

Ø 场景：在网页中提供可输入多行文本的表单控件

Ø标签名：textarea

Ø 常见属性：

label标签

Ø 场景：常用于绑定内容与表单标签的关系

Ø标签名：label

Ø 使用方法①：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

Ø 使用方法②：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可