HTML5及CSS学习
学习路径：
HTML 20%
CSS3 50%
H5C3 30%包括新增的标签
各种网页编程语言的功能
- 结构 网页元素整理分类HTML
- 表现 版式，颜色 大小CSS
- 行为 网页交互的编写后端 JS
HTML5及CSS学习
本章导读：主要讲了各种标签的使用方法
包括标题标签，段落标签，换行标签，
HTML标签
<html>
双标签<br />单标签
</html>
- 有包含关系和并列关系
HTML基本结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的内容部分
</body>
</html>
vscode使用小技巧：
输入!并回车，输出基本模板
alt+B 打开浏览器预览
安装插件 open in browser，auto remane tag
各种标签的讲解
<!DOCTYPE html> <!DOCTYPE>告诉浏览器使用的HTML5版本
<html lang="en"> lang="当前文档的显示的语言" 中文"zh-CN"，英语"en"
<head>
<meta charset="UTF-8"> charset规定文档的字符编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动端开发的代码
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML常用的标签
- 标题标签
-
一级标题到6级标题 =md中的#
- 段落标签和换行标签段落标签
- 换行标签 单标签
强制换行(也可以这么写
)
小知识：html里多个空格只会显示一个空格(回车算一个空格)
段落和换行的区别，段落两行之间会有空隙，换行不会有空隙
文本格式化标签
- 加粗
<strong>加粗标签</strong><b>加粗标签*2</b>优先考虑strong - 斜体
<em>倾斜标签</em><i>倾斜标签*2</i>优先考虑em - 删除线
<del>删除标签</del> <s>删除标签*2</s>优先del标签 - 下划线
<ins>下划线标签</ins> <u>下划线标签*2</u>优先使用ins
特殊的标签 div 和 span
- div 用来布局的 但是他是单独占一整行
- span 在一行上显示多个span
图像标签和路径
图片标签
- 图像标签
<img src="图像URL" />单标签 同一目录下可以直接用图片名做url - 图像标签的参数 (参数之间用空格分开)
- alt 如果图片不能显示用来替换的文字
- height 图片高度
- width 图片宽度
- title 鼠标放到图片上显示的文字
- border 边框宽度 css设定的情况比较多
路径
- 相对路径 相对于html文件的路径
- 同一级的相对路径 直接写文件名就可以
- 下一级路径 下一级文件夹名/文件名
- 上一级路径 …/文件名
- 绝对路径 从盘符开始的路径
- 如果找不到的话需要file协议(file:文件路径)
- 使用时经常用图片网址作为绝对路径
小知识 相对路径使用的是/ 绝对路径使用的是\
超链接标签 a
- 超链接语法格式
<a herf="" target=""></a>
-
herf 用于链接目标的地址(必须)
-
外部链接 两个标签中间作为超链接开关
-
内部链接 herf直接写文件名称就可以(盲猜也是使用相对路径)
-
空链接 herf可以用空链接 用#代替
-
下载链接 如果herf里是一个zip或文件则默认下载
-
各种元素都可以做为超链接
-
锚点链接 跳到本页中的某处的链接
-
herf属性里为’#名字’的形式
<a herf="#two"> -
然后在目标标签里
<h3 id="two"> -
targrt 链接页面的打开方式 _self为默认值在当前页打开 _blank为在新窗口打开
注释标签和特殊字符
- 注释标签 <!–这就是注释–>
- 快捷键ctrl+/
- 常用特殊字符
3011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
