自学从零开始的HTML基础课程(day2)
目录
注:文章基于VSCode
一、结构标签
1.1、 html 搭建网页结构
1.2、html5 新增的标签,语义化更强
二、行内与块元素
2.1、 元素分类
2.2、注意:
三、列表
3.1、列表:
3.2、注意:
四、超链接
4.1、定义:
4.2、功能
4.3、属性
五、图片标签与图片格式
5.1、图片标签
5.2、图片格式
六、音视频
一、结构标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>剩余的常用标签</title>
</head>
<body><center> <header><h1> 欢迎来到阴阳师</h1></header></center> <main>请选择你的英雄</main><footer>defeat</footer><nav></nav><aside></aside><section></section>
</body></html>
1.1、 html 搭建网页结构
大部分的网站 头部 主体 底部 导航 文章等等 -->
<!-- 头部 -->
<div></div>
1.2、html5 新增的标签,语义化更强
布局标签(结构化标签)
header 网页头部
main 主体部分 一般一个
footer 网页底部
nav 网页的导航
aside 和主体相关的内容,侧边栏
article 文章之类的
section 独立的区块,上面的标签都不合适,就用这个,用来代替div
二、行内与块元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>王藏商事如貂太当皇。<div>
</body>
</html>
2.1、 元素分类
块元素(block element)用来布局
特点:1.会独占一行
2.默认情况下,块元素的宽度是视口的100%
3.默认情况下,块元素的高度是内容的高度
常用:div p h1-h6 header main footer nav
行内元素(inline element)用来包裹文字
特点:1.不会独占一行
2.宽度是被内容撑开的,内容有多宽就有多宽
常用: span strong em del
行内块元素
特点:兼具块元素和行内元素的特点
常用行内块元素:img
2.2、注意:
1、块元素主要用来布局,里面可以放任何元素
2、行内元素主要用来包裹文字,一般情况下不能放块元素
3、p标签是一个特殊的块元素,它里面并不能放块元素
4、a标签是个特殊的行内元素,它里面什么都能放
三、列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li><ol><li></li></ol></li></ul><h1>我最喜欢的三个游戏</h1><ol><li>阴阳师</li><li>原神</li><li>王者</li></ol><h1>我最喜欢的三件事</h1><ul type="circle"><li>阴阳师</li><li>原神</li><li>王者</li></ul><dl><dt>web前端课程体系</dt><dd>网页三剑客</dd><dd>react</dd><dt>Java架构</dt><dd>Java基础</dd><dd>三大框架</dd></dl></body></html>
3.1、列表:
如果页面中出现结构、样式、功能都比较雷同的部分,就 可以用列表
列表(list)一组一组
1.有序列表 用ol创建列表,li表示列表项
2.无序列表 用ul创建列表,li表示列表项
disc 默认值,实心的圆点
square 实心的方块
circle 空心的圆
3.定义列表 dl创建列表,dt表示下定义,dd表示对定义的解释
类似:大列表里有很多小列表,每个小列表里有标题,有对标题的解释
3.2、注意:
1、列表之间可以相互嵌套,ul ol li 是块元素
2、 可以用type属性更改项目符号
ol 的项目符号:1、a、A、I等,默认是“1”
ul 的项目符号默认是 实心的圆
3、 默认样式,li有项目符号,上下左右有间距
4、 最常用的ol,ul在实际的使用中一般不做有顺序或无顺序的区分
5、ol,li
ul,li
dl dt dd 都是配套使用的,就像cp
四、超链接
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接</title>
</head><body>
<a href="#">空链接1</a>
<a href="JavaScript:;">空链接2</a><hr><a href="#">去顶部</a><a href="#abc">去底部</a>
<a href="#" id="abc"></a><hr><a href="http://t.csdn.cn/Wx3BS" target="_blank"><div>HTML基础</div></a><br><a href="./03.列表.html">列表</a><br><a href="../day1/07.实体.html">实体</a><br><a href="../作业1/book.jpg">图片</a></body></html>
4.1、定义:
html 超文本语言
超链接: 2个功能,2个属性,1个补充
超链接可以是一个字、一个块元素 图片 可以是任何内容
是特殊的行内元素 可以包裹任何元素 除了自己
默认样式:字体有一定的颜色,有下划线
4.2、功能
1、从一个页面跳到另一个页面
2、在当前页面跳转(楼梯导航/锚点功能)
3、下载
锚点功能实现:
去顶部:只需要href属性值设为#
去任意的位置:先给要去的位置打个标记 id属性='id属性值'
在href里填写标记 href='#id属性值'
id属性值:你起的名字
一般不以数字开头
一般不用汉字
不能重复使用
4.3、属性
href属性 指向要跳转的地址
绝对地址:不管你的html文件在哪,超链接去的位置是绝对的
相对地址:它的地址值跟超链接的html文件位置有关 ./开头 当前目录跳转
../开头 跳出当前目录,来到上一级目录 默认是./ 可以省略
注意:很多路径规则都是一样的,包括图片、音视频跳转等
target属性 指定超链接页面打开的方式
可选值:
_self 当前页面打开超链接 默认 一般情况下,国外网站常用
_blank 新开页面打开超链接 国内常用
具体根据需求来
注意:
空链接的写法(2种)
<a href="#">空链接1</a>
<a href="JavaScript:;">空链接2</a>
五、图片标签与图片格式
5.1、图片标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="" alt=""></body></html>
使用img标签向网页引入一个外部图片,(掌握4个属性)
5.2、图片格式
图片的格式
JPEG(JPG)
颜色比较丰富,一般保存照片
GIF
颜色较少,一般保存动图
PNG
显示效果好,网页专用,支持颜色多,内存大,不支持动图,支持透明
webp
什么都好,缺点:兼容性不好
base64
将图片转成字符,图片以字符形式出现,一般都是需要和网页一起加载的图片才会使用
图片使用规则:
效果不一致,效果优先
效果一致的,使用小的
六、音视频
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src=""> controls autoplay loop</audio><video src=""></video>
</body></html>
audio标签 用来向页面中引入一个外部音频文件
video标签用来向页面中引入一个视频,使用方式跟音频基本一样
src 引入音视频路径
controls 控制用户是否可以播放,默认不能播放
autoplay 自动播放(基本废止)
loop 循环播放
自学从零开始的HTML基础课程(day2)相关推荐
- keyshot7工业产品零基础入门到精通自学教程视频全套设计课程
keyshot7工业产品零基础入门到精通自学教程视频全套设计课程9205 课程内容-玛丽圈资源网 --/A21 keyshot7工业产品零基础入门到精通自学教程视频全套设计课程/ ├──素材 | └─ ...
- 刚入行的软件测试工程师如何自学软件测试?0 基础该怎么学习软件测试
从题干上看,你是已经进入了软件测试行业,有了一份软件测试的工作,那表示你看好这个行业,有意愿在这个行业持续发展. 软件测试相对一些开发的专业来说,需要了解的东西特别多,拿一些招聘简章中的要求来看 ...
- python游戏编程入门电子书-请问自学 Python 有必要买课程吗?
自学Python没有必要买课程,因为现在网上Python相关教程已经足够多了! 当然,自学Python务必先确定方向,即学习Python用来做什么?写爬虫?自动化?人工智能还是数据分析?如果没有确立方 ...
- 【完结】有三AI阿里云的深度学习基础课程暂时完结,欢迎扩散学习
2021年3月份有三AI与阿里天池联合推出了深度学习系列课程, 课程内容包括人工智能与深度学习发展背景,深度学习典型应用,卷积神经网络,循环神经网络,生成对抗网络,深度学习开源框架等内容,目前已经基本 ...
- 【渝粤教育】电大中专公共基础课程_1作业 题库
1中央广播电视中等专业学校是一所依托()设置的运用现代化教学手段和多媒体教学开展中等专业学历教育的开放性学校. A国家开放大学 B技工学院 C技能培训学校 正确 正确答案:左边查询 学生答案:A 2并 ...
- 《计算机应用基础》在线考试,2018年自学考试《计算机应用基础》考试题及答案...
自学考试<计算机应用基础>考试题及答案 一. 单项选择题:(共35分,1-35题每题1分) 1.以帧为传送数据单位的是:( ) A. 会话层B. 数据链路层C. 网络层D. 传输层 2. ...
- 大学计算机基础应当掌握的内容,大学计算机基础课程教学大纲2014版.pdf
<计算机应用基础>课程教学大纲 一.课程基本情况 课程编号: 开课学院:信息学院 英文名称:Fundamentals of Computers Application 适用专业:所有专业 ...
- python是什么课程-请问自学 Python 有必要买课程吗?
自学Python没有必要买课程,因为现在网上Python相关教程已经足够多了! 当然,自学Python务必先确定方向,即学习Python用来做什么?写爬虫?自动化?人工智能还是数据分析?如果没有确立方 ...
- 计算机文化基础课程实验,计算机文化基础课程实验.doc
中国地质大学江城学院 计算机文化基础课程实验报告 姓 名 杨晗 班级学号 5201130225 指导教师 陈洁 2012年 月 日 目 录 目录 1文本编辑3 1.1实验内容与要求3 1.2实验结果[ ...
最新文章
- 1096 Consecutive Factors
- Linux中的延时函数
- C与CPP 在线手册查找
- 100万并发连接服务器笔记之处理端口数量受限问题
- java实现远程系统控制_java实现电脑远程控制完整源代码
- Maven学习总结(22)——Maven常用插件介绍
- HBuilder工作笔记002---HBuilder打包IOS应用测试IOS应用
- python 文本向量化_TFIDF向量化文档时出现问题?
- bzoj2821 作诗(Poetize)
- 标准差SD、相对标准偏差RSD学习和python实现
- 零基础Java难学吗?自学怎么样?
- w ndows7与windows10区别,windows7和10区别
- SpringFramework、SpringBoot、SpringCloud的区别
- PPP协议(PPP协议链路建立过程、PAP、CHAP、华为虚拟网络设备配置)
- .a文件和.lib文件的区别
- 清华大学计算机专业考试408,2018年清华大学计算机科学与技术系408计算机学科专业基础综合之计算机操作系统考研基础五套测试题...
- 光电编码器与计算机连接模块,计算机-谈述编码器基于增量光电编码器的车速制约器设计论文结论-优度********网...
- delphi的connection closed Gracefully错误
- Bentley版隧道
- 基本ROP之ret2shellcode
热门文章
- 4核处理器_网红评测软件:AMD处理器多核性能作弊,以后超过4核的性能只算2%...
- MacOS制作启动U盘教程(10.10-12.5各版本命令)
- 树莓派爱好者基地64位系统2.0版本使用VNC教程
- Ansys ncode Designlife19.0疲劳与裂纹扩展分析资料教程
- 内部排序算法比较-数据结构C语言课设
- 提升逼格的github 缩略语
- 给大家介绍一下oTree,希望对大家有一点帮助
- gdal依赖dll_gdal_csharp.dll
- 分享一个小清新的论坛源码
- java计算机毕业设计体育馆场内设施预约系统设计源代码+数据库+系统+lw文档