文章目录
写在前面
HTML 笔记系列源自于 bilibili av15241731 黑马程序员培训视频,感谢UP主上传精彩学习视频
第一部分内容来源 p1 - p34,建议1.5倍速,一天时间
刚刚接触前端学习,如有错误、疑问以及任何其他问题,欢迎一起探讨学习
HTML学习笔记 1
1 初识 HTML
HTML 是带有标签的特殊语言
XXX
strong XXX strong
<strong> XXX </strong>
2 HTML 骨架格式
<html>
<head>
<title></title> <----- 这个部分显示在浏览器标签页里
</head>
<body>
<----- 这个部分显示在浏览器内容里
</body>
</html>
3 标签分类
标签分为双标签和单标签
双标签
<strong> </strong>
单标签 (非常少)
<br />
4 HTML 标签关系
1.嵌套关系
<html> <----- 根标签
<head>
<title> </title>
</head>
</html>
2.并列关系
<html>
<head>
<title></title> <-+
</head> |
+--- head 和 body 就是并列关系
<body> |
<-+
</body>
</html>
5 文档类型 <!DOCTYPE>
<!DOCTYPE html> (html5)
主要是用来声明 html 的版本
6 字符集
<meta charset="UTF-8">
字符集 | 说明 |
---|---|
UTF-8 | 目前最常用的字符集,包含全世界的字符 |
GB2312 | 简单中文,包括 6763 个汉字 |
BIG5 | 繁体中文,港澳台地区使用 |
GBK | 包含全部中文字符,是 GB2312 的拓展,加入繁体字并兼容 GB2312 |
7 HTML 标签
7.1.排版标签
7.1.1 标题标签
为了使网页更具有语义化,常会使用标题标签,html 提供六种等级
<h1> <h2> <h3> <h4> <h5> <h6>
基本语法格式
<hi> head </hi>
其中 h1 一般是给 logo 使用,尽量少用
7.1.2 段落标签
<p> 段落文字 </p>
7.1.3 水平线标签
<hr/>
7.1.4 换行标签 break
<br/>
7.1.5 div(division) 与 span
div 分割,组合网页
span 跨度
7.2.文本格式化
标签 | 效果 |
---|---|
<b></b> 与 <strong></strong> | 加粗 |
<i></i> 与 <em></em> | 斜体 |
<s></s> 与 <del></del> | 加删除线 |
<u></u> 与 <ins></ins> | 加下划线 |
7.3.标签属性
标签可以有多个属性,写在开始标签中来定制显示样式
<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>
7.4.图像标签
<img src="图像URL" 属性=XXX />
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图片路径 |
alt | 文本 | 图像无法显示时用文本替换 |
title | 文本 | 鼠标悬浮时显示的内容 |
width | 像素 | 设置图片宽度 |
height | 像素 | 设置图片高度 |
border | 数字 | 设置图片边框宽度 |
7.5.链接标签 anchor
<a herf="跳转目标" targrt="目标窗口弹出方式"> 文本或图像 </a>
herf 如果暂时没有链接,就以 # 代替临时链接
targrt 有两种,self 直接跳转,blank 新窗口打开
7.6.锚点定位
使用 <a herf="#链接文本"> 点击文本 </a>
7.7.base 标签
base 可以设置整体链接的打开状态
<base target="_blank"/>
8 路径
相对路径:同一级路径 直接就是文件名
上一级路径:” …/文件
下一级路径: /文件夹/文件
绝对路径:直接写文件的地址
9 列表标签
9.1.无序列表 ul
<ul>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</ul>
-
<ul> 标签里边只能放 <li> 标签
-
<li> 标签也是一个容器,里边可以容纳所有元素
-
无序列表会带有自己的样式属性,可用 css 调整
9.2.有序列表 ol
<ol>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</ol>
9.3.自定义列表
<dl>
<dt> 沈阳 </dt> <------- 名词
<dd> 和平 </dd> <---+
<dd> 沈河 </dd> <---+--- 名词解释
<dd> 铁西 </dd> <---+
</dl>