HTML基础和标签
HTML : HTML的全称为
超文本标记语言
, 是一种
标记语言
, 它包括一
系列标签
, 通过这些标签可以将网络上的
文档
格式统一 , 使分散的Internet资源连接为一个逻辑整体 , HTML文本是由HTML命令组成的描述性文本 , HTML命令可以说明文字 , 图形 , 动画 , 声音 , 表格 , 链接等
1.HTML的感知
1.1 Web标准构成
- 结构(HTML)----网页元素
- 表现(CSS)----网页样式 , 包括 : 版式 颜色 大小等
- 行为(JavaScript)----网页交互的动态效果
1.2 HTML骨架结构
<html><head><title>网页标题</title></head><body>
主体内容
</body></html>
- html标签：网页的整体(页面最大的标签 , 根标签)
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
新建文件文件的扩展名是.html
1.3 VS Code快速创建页面
- 创建HTML骨架结构快捷键 : !+回车 / !+Tab或者html:5
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width , initial-scale=1.0"><title>网页标题</title></head><body>
主体内容
</body></html>
注释快捷方式 : Ctrl+/ (注释内容不会向客户端展示 , 只用作程序开发代码解释)
2. HTML语法规范
2.1 HTML标签的构成
- 双边标签 : 有两部分组成 , 前部分叫开始标签 , 后部分叫结束标签 , 结束标签在标签名前有一个 /（斜线）;两部分之间包裹内容 例如:
<p>内容</p> - 单边标签 : 标签由一部分组成 , 不需要结束标签 例如：
<br>
2.2 HTML标签的属性
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
2.3 标签类型与关系
<!-- 嵌套关系 --><head><title></title></head><!-- 兄弟关系 --><head></head><body></body>
3. HTML标签
3.1 排版标签
3.1.1 标题标签
- h标签
<!-- 标题标签 --><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>
双边标签 , 文字加粗 , 独占一行 , 文字变大 , 但是从h1 → h6文字逐渐减小
3.1.2 段落标签
- p标签
<!-- 段落标签 --><p>段落标签</p><p>段落标签</p>
双边标签 , 独占一行 , 段落之间存在缝隙
会根据浏览器窗口大小自动换行显示
3.1.3 换行标签
- br标签
<!-- 换行标签 -->
换行标签<br>
单边标签 , 文字强制换行显示
3.1.4 水平线标签
- hr标签
<!-- 水平线标签 --><hr>
单边标签 , 页面显示一条水平线
3.2 文本格式化标签
- strong 加粗 , em 倾斜 , ins 下划线 , del 删除线 双边标签
<!-- 加粗 --><strong>加粗</strong><b>加粗</b><!-- 下划线 --><ins>下划线</ins><u>下划线</u><!-- 倾斜 --><em>倾斜</em><i>倾斜</i><!-- 删除线 --><del>删除线</del><s>删除线</s>
突出重要性 , 比普通文字更加重要
语义更清晰 , 更强烈
3.3 媒体标签
3.3.1 图片标签
- img标签 单边标签
<!-- 图像标签 --><imgsrc="图片的路径"alt="替换文本"title="提示文本"width="图片宽度"height="图片高度">
- src : 指定需要展示图片的路径和文件名
src是必须属性
- alt : 替换文本 , 当图片路径不正确时 , 才显示的文字
- title : 提示文本 , 鼠标悬停的时候显示的文字
title属性不仅仅可以用于图片标签 , 还可以用于其他标签
- width : 设置图片宽度
如果宽高就设置了一个 , 另外一个会等比例缩放 , 好处就是图片不变形
- height : 设置图片高度
3.3.2 路径
3.3.2.1 绝对路径(了解)
- 本地路径 : D:\day01\images\3.jpg (盘符开头)
- 网络地址 : http://www.itheima.com/images/logo.png
目录下的绝对位置 , 可直接到达目标位置(能够直接定位) , 通常从计算机盘符开始的路径或者网路地址的路径
3.3.2.2 相对路径(掌握)
同级目录
- 目标文件名字 例如 :
<img src="目标文件.jpg"> - ./目标文件名字 例如 :
<img src="./目标图片.gif">(推荐使用)
从当前文件开始出发找目标文件的过程 , 简单的来说相对HTML页面的位置
当前文件和目标文件在同一目录中
下级目录
- 目标文件的文件夹/目标文件 例如 :
<img src="img/目标图片.gif"> - ./目标文件的文件夹/目标文件 例如 :
<img src="./img/目标图片.gif">(推荐使用)
目标文件在下级目录中(当前文件与目标文件的文件夹在同一个目录下面)
上级目录
- 上一级:
../上两级:../../
目标文件在当前文件的上一级目录或者上N级目录
总结
相对路径有哪三种情况
- 同级目录 : 直接写目标文件名字
- 下级目录 : 直接写文件夹名/目标文件名字
- 上级目录 : 直接下…/目标文件名字
VSCode中路径的快捷操作
- 同级和下级目录 : ./ 之后选择即可
- 上级目录 : …/ 之后选择即可
3.3.3音频标签
- audio标签
应用场景 : 在页面中插入音频
<audiosrc="./music.mp3"controlsautoplayloop></audio>
音频标签三种格式分别是 :
MP3
,
Wav
,
Ogg
; 推荐使用
MP3
格式
音频标签常见属性
- src : 音频路径
- controls : 音频控件
- autoplay : 自动播放
- loop : 循环播放
3.3.4 视频标签
- video标签
应用场景 : 在页面中插入视频
<videosrc="./video.mp4"controlsautoplaymutedloop></video>
视频标签三种格式分别是 : 分别是
MP4
,
WebM
,
Ogg
; 推荐使用
MP4
视频标签常见属性
- src : 视频路径
- controls : 视频控件
- autoplay : 自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
- loop : 循环播放
3.4 链接标签
- a标签
应用场景 : 鼠标点击后 , 从一个页面跳转到另一个页面
<!-- 语法 --><ahref="跳转目标"target="窗口打开方式">文本或图像</a><ahref="https://www.mi.com/">外部链接</a><ahref="./01.html">内部链接</a><ahref="#">空链接</a>
超级链接标签最重要的属性
- href属性
跳转目标
- target属性
_self : 默认值 , 在当前窗口中跳转(覆盖原始窗口)
_blank : 在新窗口中跳转(保留原始窗口)
4. 列表标签
展示数据
4.1 无序列表标签
应用场景 : 在网页中展示一组无顺序之分的列表 , 如 : 新闻列表
<ul></ul> ul表示无序列表 用于包含li标签
<li></li> li表示列表的每一项
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><!-- 注意事项 -->
ul和li属于嵌套关系
ul标签中只允许包含li标签
li标签可以嵌套任意元素及内容
ul 标签 : 表示无序列表
li 标签 : 表示列表的每一项
4.2 有序列表标签
应用场景 : 在网页中表示一组有顺序之分的列表 , 如 : 排行榜
<ol></ol> ol表示无序列表 用于包含li标签
<li></li> li表示列表的每一项
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><!-- 注意事项 -->
ol和li属于嵌套关系
ol标签中只允许包含li标签
li标签可以包含任意内容
ol 标签 : 表示有序列表
li 标签 : 表示列表的每一项
4.3 自定义列表标签
应用场景 : 在网页的底部导航中通常会使用自定义列表实现
自定义列表有三组标签:
<dl></dl> dl表示自定义列表 用于包含dt/dd标签
<dt></dt> dt表示列表主题
<dd></dd> dd表示列表的每一项内容
语法：
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd><dd>名词1解释3</dd></dl><!-- 注意事项 -->
dl标签只允许包含dt/dd标签
dt/dd标签可以包含任意内容
- 3个标签组成
- dl标签 : 表示自定义列表
- dt标签 : 表示列表主题
- dd标签 : 表示列表的每一项内容
5. 表格标签
展示数据
5.1 表格的基本标签
应用场景 : 以行+列的方式整齐的展示数据 例如 : 股票价格 学生成绩表
表格标签：<table></table> 定义表格标签 , 用于包裹多个tr
表格一行：<tr></tr> 用于定义表格中的行 , 用于包裹td , 必须嵌套在 <table></table>标签中
表格一列：<td></td> 用于定义表格中的列（单元格），必须嵌套在<tr></tr>标签中
<tableborder="像素 例如 : 1"width="宽度"height="高度"><tr><td>内容</td><td>内容</td><td>内容</td></tr></table><!-- 注意事项 -->
table标签包含tr , tr标签包含td
3个标签组成
table标签 : 表示表格整体
tr标签 : 表示每行
td标签 : 表示每列(单元格)
5.2 表格相关属性
应用场景 : 设置表格基本展示效果
属性名属性值描述border数值设置表格边框alignleft , center , right设置对齐方式width数值设置宽度height数值设置高度cellspacing数值单元格与单元格的距离 , 默认2像素cellpadding数值单元格内容到单元格边框的距离 , 默认1像素rulesall细线边框
以上属性目前熟悉单词即可 , 实际开发时针对于样式效果推荐用CSS设置
5.3 表格标题和表头单元格标签
应用场景 : 在表格中表示整体大标题和一列小标题
<tableborder="1"width="500"height="200"align="center"cellspacing="0"cellpadding="0"><caption><h3>学生信息表</h3></caption><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>18</td><td>女</td></tr><tr><td>李四</td><td>17</td><td>男</td></tr><tr><td>吴签</td><td>18</td><td>男</td></tr><tr><td>总结</td><td>郎才女貌</td><td>郎才女貌</td></tr></table>
- 表格标题标签 : caption标签
书写在table标签内部
- 表头单元格标签 : th标签
书写在tr标签内部 (用于替换td标签)
th标签 , 位于表格的第一行第一列小标题 , 默认居中加粗效果
5.4 表格的结构标签 (了解)
应用场景 : 让表格的内容结构分组 , 突出表格的不同部分 (头部 , 主体 , 底部) , 使语义更加清晰
- thead : 表格头部
- tbody : 表格主体
- tfoot : 表格底部
表格结构标签写在table标签内部
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
5.5 合并单元格
应用场景 : 将水平或垂直多个单元格合并成一个单元格
属性名属性值说明rowspan合并单元格的个数跨行合并 , 将多行单元格垂直 (上下合并) 合并colspan合并单元格的个数跨列合并 , 将多列单元格水平 (左右合并) 合并
rowspan : 上下合并→只保留最上的 , 删除其他单元格
colspan : 左右合并→只保留最左的 , 删除其他单元格
不能跨结构合并
6. 表单标签
收集数据
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等 , 用于采集用户的输入或选择的数据
6.1 form标签
所以表单标签需要放到form标签里
6.1.1 input系列标签属性取值
应用场景 : 在网页中显示收集用户信息的表单效果 , 如 : 登录页 , 注册页
<inputtype="属性值">
input单边标签
input标签可以通过type属性值的不同 , 展示不同效果 , 一共8个属性取值
标签名type属性值说明inputtext文本框 , 用于输入单行文本inputpassword密码框 , 用于输入密码inputradio单选框 , 用于多选一inputcheckbox多选框 , 用于多选多inputfile文件选择 , 用于之后上传文件inputsubmit提交按钮 , 点击之后提交数据给后端服务器inputreset重置按钮 , 点击之后恢复表单默认值inputbutton普通按钮 , 默认无功能 , 之后配合JS添加功能
input中value和placeholder区别
- 由于HTML5的出现 , 使得表单的功能更加强大 , input的功能应用起来更加简单 , 从value到placeholder , 但是由于兼容问题 , placeholder只适合在移动端的项目 , IE6/7/8不支持 , 只能用value , 或者可以用其他方法模拟placeholder , 具体案例你可以看支付宝和财付通的登录和注册页面
value和placeholder的实际应用
- value
如果用的是value，我们想鼠标focus后默认文字消失，移开后默认文字又重现，可以这样来写
- placeholder
如果用的是placeholder , 我们就不需要JS了 , 因为它本身就自带focus和blur功能了 , 但是有时候设计师给我们的设计稿往往跟默认文字颜色是有区别
如何改变placeholder默认文字颜色 , 如下
- 结构
<inputtype="text"placeholder="请输入手机号"class="inp-fon">
- 样式
:-moz-placeholder{/* Mozilla Firefox 4 to 18 */color: #f00;}::-moz-placeholder{/* Mozilla Firefox 19+ */color: #f00;}input:-ms-input-placeholder,
textarea:-ms-input-placeholder{color: #f00;}input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{color: #f00;}
6.1.2 input标签属性介绍
属性名说明placeholder占位符，提示用户输入内容的文本name名称，当前input控件的含义value改变按钮的名字checked默认选中某个单选或复选框multiple多文件上传
注意事项 : 同一组单选框或复选框 , name属性的值保持一致
6.1.2.1 文本框 type=“text” placeholder
应用场景 : 在网页中显示输入单行文本的表单控件
属性名type属性值说明placeholdertext占位符，提示用户输入内容的文本
6.1.2.2 密码框 type=“password” placeholder
应用场景 : 在网页中显示输入密码的表单控件
属性名type属性值说明placeholderpassword占位符，提示用户输入内容的文本
注意事项 : type属性值不要拼错或者多加空格 , 否则相当于设置了默认值状态 : text→文本框
6.1.2.3 单选框 type=“radio” name=“自定义类名” checked
应用场景 : 在网页中显示多选一的单选表单控件
属性名type属性值说明nameradio分组 , 相同name属性值单选框为一组 , 只能有一个被选中checkedradio默认选中
注意事项 :
name属性对于单选框有分组功能
有相同name属性值的单选框为一组 , 一组中只能同时有一个被选中
如果需要实现单选效果 , 需要设置相同的name属性值
单选框和多选框的默认选中 : checked
6.1.2.4 复选框 type=“checkbox” checked
应用场景 : 在网页中显示多选多的多选表单控件
属性名type属性值说明checkedcheckbox默认选中
注意事项 : 单选框和多选框的默认选中 : checked
6.1.2.5 文件选择 type=“file” multiple
应用场景 : 在网页中显示文件选择的表单控件
属性名type属性值说明multiplefile多文件选择
默认单文件上传
6.1.2.6 按钮 type=“submit / reset / button”
应用场景 : 在网页中显示不同功能的按钮表单控件
标签名属性值说明inputsubmit提交按钮 , 点击之后提交数据给后端服务器inputreset重置按钮 , 点击之后恢复表单默认值inputbutton普通按钮 , 默认无功能 , 之后配合JS添加功能
注意事项 :
如果需要实现以上按钮功能 , 需要配合form标签使用
form使用方法 : 用form标签把表单标签全部包裹起来即可
<formaction="地址 (后台程序员提供)"><!-- 1、文本框：text（type属性的默认值） -->
昵称：<inputtype="text"placeholder="请输入您的昵称"><br><!-- 2、密码框：password -->
密码：<inputtype="password"placeholder="请输入您的密码"><br><!-- 3、单选框：radio 必须设置相同的name属性才可以实现单选效果-->
性别：<inputtype="radio"name="sex"checked>男
<inputtype="radio"name="sex">女<br><br><!-- 4、多选框：checkbox -->
爱好：<inputtype="checkbox"checked>敲代码
<inputtype="checkbox"checked>熬夜
<inputtype="checkbox">掉头发<br><br><!-- 5、文件选择：file --><inputtype="file"multiple><br><br><!-- 按钮 --><!-- 1、submit：提交按钮 提交表单内容到指定地址 --><inputtype="submit"><!-- 2、reset：重置按钮 --><inputtype="reset"><!-- 3、button：普通按钮 --><inputtype="button"value="普通按钮"></form>
6.2 button按钮标签
应用场景 : 在网页中显示用户点击的按钮
标签名属性值说明buttonsubmit提交按钮 , 点击之后提交数据给后端服务器buttonreset重置按钮 , 点击之后恢复表单默认值buttonbutton普通按钮 , 默认无功能 , 之后配合JS添加功能
注意事项 :
谷歌浏览器中button默认是提交按钮
button标签是双标签 , 更便于包裹其他内容 : 文字 , 图片等
昵称：
<inputtype="text"placeholder="请输入您的昵称"><br><br><!-- 提交按钮 --><buttontype="submit">button提交按钮</button><!-- 重置按钮 --><buttontype="reset">button重置按钮</button><!-- 普通按钮 --><buttontype="button">button普通按钮</button>
6.3 select下拉菜单标签
应用场景 : 在网页中提供多个选择项的下拉菜单表单控件
标签组成
select标签 : 下拉菜单的整体
option标签 : 下拉菜单的每一项
常见属性
selected : 下拉菜单的默认选中
下拉框一般来说不能少于三个
籍贯：
<selectname="home"><option>武汉</option><option>上海</option><option>深圳</option><optionselected>火星</option></select>
6.4 textarea文本域标签
应用场景 : 在网页中提供可输入多行文本的表单控件
标签名 : textarea
常见属性
cols : 规定了文本域内可见宽度
rows : 规定了文本域内可见行数
注意事项 :
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置
<textareacols="60"rows="6">我知道每日反馈是用textarea来做的</textarea>
6.5 label标签
应用场景 : 常用于绑定内容与表单标签的关系
标签名 : label
使用方法1
- 使用label标签把内容 (如 : 文本) 包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2
- 直接使用label标签把内容 (如 : 文本) 和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
<!-- 方法1 -->
爱好:
<inputtype="checkbox"id="one"><labelfor="one">敲代码</label><!-- 方法2 --><label><inputtype="checkbox">玩游戏
</label>
7. 语义化标签
7.1 无语义化标签
应用场景 : 实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
- div标签 : (大盒子) 一行只显示一个 (独占一行) , 可以放文字 , 图片 , 超链接 , 其他任何标签和内容
- span标签 : (小盒子)一行可以显示多个 , 可以放文字和超链接 , span里也可以放span
7.2 有语义化标签 (了解)
应用场景 : 在HTML5新版本中 , 推出了一些有语义的布局标签供开发者使用 , 移动端使用较多
标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章
<header>网页的头部</header><nav>网页的导航</nav><footer>网页的底部</footer><aside>网页的侧边栏</aside><section>网页的区块</section><article>网页的文章</article>
注意事项 :
HTML5的新特性都有兼容性问题 , 基本是IE9+ 以上版本的浏览器才支持
以上标签显示特点和div一致 , 但是比div多了不同的语义
8. 字符实体
8.1 HTML空格合并现象
应用场景 : 如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
8.2 常见字符实体
应用场景 : 在网页中展示特殊符号效果时 , 需要使用字符实体替代
显示结果描述实体名称实体编号空格
 
<大于号
<
<
小于号
>
>
&和号
&
&
"引号
"
"
’撇号
'
(IE不支持)
'
￠分
¢
¢
£镑
£
£
¥元
¥
¥
§节
§
§
©版权
©
©
®注册商标
®
®
×乘号
×
×
÷除号
÷
÷
注意事项 :
前端工程师需要记住
空格的字符实体是 :
大于号的字符实体是 :
>小于号的字符实体是 :
<
9. 标签速查
无序列表
<ul><li>榴莲</li><li>香蕉</li><li>苹果</li><li>臭豆腐</li></ul>
自定义列表
<dl><dt>服务支持</dt><dd>售后服务</dd><dd>上门服务</dd><dd>包换服务</dd></dl>
表格基本结构
<table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr></table>
单选按钮
<!-- 单选按钮 -->
性别: <inputtype="radio"name="sex"checked> 男
<inputtype="radio"name="sex"> 女 <br>
复选按钮
<!-- 复选按钮 -->
爱好: <inputtype="checkbox"> 吃饭
<inputtype="checkbox"> 睡觉
<inputtype="checkbox"checked> 打子豪 <br>
文本框
<!-- input 输入 type 类型 --><!-- 文本框 -->
昵称：<inputtype="text"placeholder="请您输入昵称"><br>
密码框
<!-- 密码框 -->
密码：<inputtype="password"placeholder="请您输入密码"><br>
文件上传
<!-- 文件上传 文件域 -->
上传头像: <inputtype="file"multiple><br>
提交和重置按钮普通按钮
<!-- value 值 --><inputtype="submit"value="提交所填"><inputtype="reset"value="重新填写"><inputtype="button"value="普通按钮">
下拉按钮
<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><optionselected>武汉</option><option>曹县</option></select>
文本域
请您留言：
<textareacols="100"rows="10"maxlength="10"></textarea>
label标签的基本使用
<!-- 方法1 for 和 id 搭配 --><inputtype="radio"name="sex"id="nv"><labelfor="nv">女</label><inputtype="radio"name="sex"id="nan"><labelfor="nan">男</label><br><!-- 方法2 直接包含 -->
婚否:
<label><inputtype="radio"name="marry">
未婚
</label><label><inputtype="radio"name="marry">
丧偶
</label>
="请您输入密码"> <br>
文件上传
<!-- 文件上传 文件域 -->
上传头像: <inputtype="file"multiple><br>
提交和重置按钮普通按钮
<!-- value 值 --><inputtype="submit"value="提交所填"><inputtype="reset"value="重新填写"><inputtype="button"value="普通按钮">
下拉按钮
<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><optionselected>武汉</option><option>曹县</option></select>
文本域
请您留言：
<textareacols="100"rows="10"maxlength="10"></textarea>
label标签的基本使用
<!-- 方法1 for 和 id 搭配 --><inputtype="radio"name="sex"id="nv"><labelfor="nv">女</label><inputtype="radio"name="sex"id="nan"><labelfor="nan">男</label><br><!-- 方法2 直接包含 -->
婚否:
<label><inputtype="radio"name="marry">
未婚
</label><label><inputtype="radio"name="marry">
丧偶
</label>
版权归原作者 LinOcO 所有， 如有侵权，请联系我们删除。