2021-7-7HTML5前端基础

2021-07-07 19:32:18 阅读：110 来源： 互联网

标签：... 7HTML5 标签前端语义列表 2021 跳转 li

一，学习目标
1.语义标签（了解）
2.布局标签
3.超连接a（精通）
4.相对路径与绝对路径（掌握，小难点）
5.多媒体（掌握）
6.列表ul（掌握） ol dl（了解）

二，语义化标签

1.什么是语义化？（见名知意）
HTML 看见标签名字，就知道标签里面的内容大概的含义（掌握）
<h1><h1> <p></p> H4 （旧版本）

总结规律：只要有取名字的地方，你就语义化

2.H5语义化标签(结构化标签)(了解)
<nav></nav>
<seciton></section>
<header></header>
<footer></footer>
<main></main>
<aside></aside>

三，布局标签（了解）
div + css布局
布局概念：用来布局，没有任何特效
标签： div：一块块的矩形，默认的宽度和浏览器一致（）
span: 宽度默认是内容的宽度（了解）
1.从整体到局部
2.每一个区域都应该有自己符合主题的内容（马桶就应该放在卫生间，电饭煲就应该放在厨房）
3. 最好是整齐布局

四，超链接a标签(掌握)
a标签：实现跳转
属性： href="URL"
target 跳转到目标地址的方式，默认在原来的页面上跳转
属性值： _blank 新开一个网页进行跳转
_self 自身页面上进行跳转
跳转分类： 1.跳转外部链接(网站)
2.跳转内部的文件（常用）
3.锚点链接（跳转）同一个页面中滚动
提问：补全锚点的语法 <a href="#.."></a>

五，相对路径&绝对路径
绝对路径（了解）：在任何位置都能够通过这个地址找到目标的，就叫做绝对路径
相对路径（掌握）：相对于源文件（a标签在哪儿？）去寻找目标的方式，就叫相对路径

1.跳出当前文件夹 "../"
2.进入目标文件夹 "文件夹（目录）名称/"
3.在同一文件查找 ./目标名称.后缀目标名称.后缀

六，多媒体img（重点）音频，视频（了解）
1.图片标签：
标签名称：img
分类：单标签
重要属性： src 引入图片资源
alt 图片引入失败，显示的提示文字
2.改变图片的尺寸：
width：改变宽度
height: 改变高度
建议（规范）：不要同时设置宽度和高度，如果同时设置图片可能会变形,(不变形的情况，按照比列同时设置)

七，列表标签
1.无序列表（掌握）
1.相同或相似的内容和样式（样子）部分，用列表来展示
2.所有的列表标签都是配合使用（组合拳）
ul（无序列表）>li 无序列表
3.细节： 1.能不能单独使用：不能！会被打
2. li 中可以放任何内容，包括列表
3. ul自带原点和间距（通过CSS去清除这些默认的样式）
4.提问：补充写法
2.有序列表（了解）
1.组成： ol（有序列表） >li
2.特点： 1.自带序号
2.ol自带间隔
3.所有内容放在li里面
3.提问：补充写法
3.定义列表（了解）
1.组成： dl(定义列表)>dt + dd
2.特点： 1.要描述的目标内容，放在dt里面
2.描述的内容放在，dd里面
3.dd，dl自带间距
3.提问：补充写法

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

标签：...,7HTML5,标签,前端,语义,列表,2021,跳转,li
来源： https://blog.csdn.net/GAI121456/article/details/118555177

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-7-7HTML5前端基础