构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色、大小等) |
行为 | Javascript | 网页模型的定义和页面的交互 |
HTML(Hyper Text Markup Language)中文译为:超文本标记语言 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频等内容进行描述
在代码文件夹中鼠标右击新建文本文档命名为:文字变粗案例.txt 双击这个文件,输入代码等内容记得保存! 在文件上点击鼠标右键重命名修改文件后缀为.html 双击文字变粗案例.html,浏览器会自动打开文件并显示之前输入的内容
<html>
<head>
<title>网页总标题</title>
</head>
<body>
网页的主题内容
</body>
</html>
快速生成标签:英文+Tab
保存文件Ctrl+S
快速查看网页效果:右击Open in Default Browser 快捷键:Alt+B
快速生成结构标签:!+Tab ,"!"必须是英文,文件后缀名必须是.html。
为代码添加具有解释性、描述性的信息,主要用来帮助开发人员理解代码 快捷键:Ctrl+/
<strong> 要加粗的文字 </strong>
开始标签 包裹的内容 结束标签
标签由< > / 英文单词字或字母组成,并且把标签中<>包括起来的英文单词或字母称为标签名。
常见的标签由两部分组成,我们称之为:双标签,前面的部分叫开始标签,后面的部分叫结束标签,两部分之间为包裹内容。
少数标签由一部分组成,我们称之为:单标签,自成一体,无法包裹内容。
<strong class=”one”>文字要变粗</strong>
class=”one”:标签的属性
class:属性名
one:属性值
tips:
标签的属性写在“开始标签”的内部
标签上可以同时存在多个属性
多个属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
代码:
<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部分
代码:
<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:
段落之间存在间隙
段落独占一行
代码:
<br>
tips: 单标签,直接放在要换行的文字前面
代码:
<hr>
tips: 单标签,放在标题和段落中间
加粗 倾斜 删除线 下划线 代码(规范使用):
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除</del>
另一种代码:
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
tips:一般使用第一种代码,符合标签语义化,利于机器解析
代码:
<img src="" alt="">
属性名:src 属性值:目标图片的路径 注意点:当前网页和目标图片在一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
属性名:alt 属性值:替换文本
当图片加载失败时,才会显示alt文本
当图片加载成功时,不会显示alt文本
属性名:title 属性值:提示文本
当鼠标悬停时,才显示的文本
title属性不仅仅用于图片标签,还可以用于其他标签 代码:
<img src="" alt="" title="">
鼠标停在图片上面会显示出来的文字
<h1 title="这是一个标题">一级标题</h1>
也可以用于其他鼠标可以悬停的地方
属性名:width和height 属性值:宽度和高度(数字)
如果只设置width和height其中一个,另一个没设置的自动等比例缩放(此时图片不会变形)
如果同时设置了width和height两个,若设置不当此时图片可能会变形
场景:页面需要加载图片,需要先找到对应的图片
路径可分为:
绝对路径(了解)
相对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径 例如:
盘符开头: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快捷操作:直接敲 ../后,会自动提示上级目录下有文件,直接选择即可
代码:
<audio src=" "></audio>
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
tips:目前音频标签只支持MP3、WAV、OGG格式
代码:
<video src=""></video>
属性名 | 功能 |
---|---|
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需要配合muted实现静音播放) |
loop | 循环播放 |
tips:视频标签目前只支持MP4、WebM、OGG
代码:
外部链接:
<a href="https://bilibili.com">点击去B站</a>
内部链接:
<a href="./15视频标签.html">点击去上一个笔记</a>
a标签特点:
a标签默认文字下有下划线
a标签从未点击过,默认颜色是蓝色
a标签点击过之后,颜色变为紫色(清除浏览器记录可以重新变为蓝色)
属性名:target 属性值:目标网页的打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
空链接:
<a href="#">空连接</a>
功能:
点击之后回到网页顶部
开发中不确定该链接最终跳转位置,可以用空链接先占位置
代码:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
代码:
<ol>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
<li>三星</li>
</ol>
注意:无序列表和有序列表的ul或ol标签只能包裹li标签,而li标签可以包裹任意内容
场景:在网页底部的导航中通常会使用自定义列表实现 标签组成:
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体 |
dt | 表示自定义列表的主题 |
dd | 表示自定义针对主题的每一项内容 |
显示特点:dd会默认显示缩进效果 注意:
dl标签只允许包裹dt和dd标签
dt和dd标签可以包含任何内容
代码:
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
基础代码:
<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>
实现效果:
属性名 | 属性值 | 效果 |
---|---|---|
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>
效果:
场景:在表格中表示整体大标题和一列小标题
标签名 | 名称 | 说明 |
---|---|---|
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>
效果:
场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页 标签名:input
input标签可以通过type属性值的不同,展示不同效果 type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于之后上传文件 |
input | submit | 提交按钮,用于提交(配合form标签) |
input | reset | 重置按钮,用于重置(配合form标签) |
input | button | 普通按钮,默认无功能,之后配合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>
type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮,点击之后提交数据给后端服务器 |
button | reset | 重置按钮,点击之后恢复表单默认值 |
button | button | 普通按钮,默认无功能,配合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>
标签组成:
select标签:下拉标签的整体
option标签:下菜单的每一项
常见属性:
selected:下拉菜单中的默认选中
所在城市:<select>
<option>上海</option>
<!-- 默认选中北京 -->
<option selected>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
场景:在网页中提供可输入多行文本的表单控件 标签名:textarea 常见属性:
cols:规定了文本域中可见宽度
rows:归档了文本域中可见行数
注意点:
右下角可以拖拽调整大小
实际开发时针对于样式效果推荐用CSS设置
<textarea cols="60" rows="30"></textarea>
场景:用于绑定内容与表单标签的关系 标签名: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>
场景:实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签 div标签:一行只显示一个(独占一行) span标签:一行可以显示多个
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
注意点:以上标签显示特点和div一致,但是比div多了不同的语义
场景:如果在HTML代码中同时并列出现多个空格、换行、缩进等,最终浏览器指挥解析出一个空格
场景L:在网页中展示特殊符号效果时,需要使用字符实体替代 结构:&英文; 常见字符实体:
显示结果 | 描述 | 实体名称 |
---|---|---|
空 | 空格 |   ; |
< | 小于号 | < ; |
> | 大于号 | > ; |
& | 和号 | & ; |
" | 引号 | " ; |
' | 撇号 | &apos ;(IE不支持) |
¢ | 分(cent) | ¢ ; |
£ | 镑(pound) | £ ; |
¥ | 元(yen) | ¥ ; |
€ | 欧元(euro) | &euro ; |
§ | 小节 | § ; |
© | 版权(copyright) | © ; |
综合案例-免费注册网站:
<form>
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
昵称:<input type="text" placeholder="请输入昵称">
<br>
<br>
性别:<input type="radio" name="sex">男 <input type="radio" name="sex">女
<br>
<br>
生日:<input type="date">
<br>
<br>
城市:
<select>
<option>上海</option>
<option selected>北京</option>
<option>广州</option>
<option>深圳</option>
<option>河南</option>
</select>
<br>
<br>
婚姻状况:<input type="radio" checked name="婚姻状况"> 未婚 <input type="radio" name="婚姻状况"> 已婚 <input type="radio" name="婚姻状况"> 保密
<br>
<br>
<label>
兴趣爱好:<input type="checkbox"> 抽烟 <input type="checkbox"> 喝酒 <input type="checkbox"> 烫头
</label>
<br>
<br>
个人介绍:
<br>
<br>
<textarea cols="30" rows="10"></textarea>
<br>
<br>
<h2>我承诺:</h2>
<ul>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<br>
<br>
<input type="checkbox">我同意所有条款
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="点击重置">
</form>
实现效果:
综合案例今日搜索热词:
<h1>今日搜索热词</h1>
<hr>
<h2>1、东京奥运会中国金牌数量目前排行第一</h2>
<p>东京奥运会本定在2020年举行,因为疫情影响,推迟到了2021年,详情可见百度:<a href="https://www.baidu.com/s?wd=%E4%B8%9C%E4%BA%AC%E5%A5%A5%E8%BF%90%E4%BC%9A&rsv_spt=1&rsv_iqid=0xc96ffb3000004c40&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=26&rsv_sug1=16&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=5402&rsv_sug4=5402" target="_blank">东京奥运会</a>
<br><a href="./综合案例2音频网页.html" target="_blank">点我播放音频</a>
</p>
<h2>2、奥运选手们加油!</h2>
<p>近日,<a href="https://baike.baidu.com/item/%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E7%B2%BE%E7%A5%9E/85972?fromtitle=%E5%A5%A5%E8%BF%90%E7%B2%BE%E7%A5%9E&fromid=1376190&fr=aladdin" target="_blank">奥运精神</a>鼓舞众多奥运选手全力以赴,不断创造历史,让我们为奥运选手加油!</p>
<br><a href="./综合案例2视频.html">点我播放视频</a>
实现效果:
综合案例-音频网页:
<h1>好听的音频</h1>
<audio src="./music.m4a" controls autoplay>你听了吗</audio>
实现效果:
综合案例-优秀学生成绩单:
<table border="1" width="300" height="100">
<caption><h3>优秀学生成绩单</h3></caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td rowspan="2">三年二班</td>
</tr>
<tr>
<!-- <td>高三</td> -->
<td>赵四</td>
<td>120</td>
<!-- <td>三年二班</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
实现效果:
以上笔记为本人闲来无事学习黑马程序员HTML5+CSS3+移动Web前端全套所记 如有帮助,请点赞支持。
本文章使用limfx的vscode插件快速发布