HTML (Hyper text markup language)超文本标记语言
1.1 Html结构标准
< ! doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
html 与htm是一样的。后缀名不能决定文件格式,只能决定打开文件打开的方式。
学习中使用Sublime编写代码,常用快捷键
Html:xt+tab | Html结构代码 |
tab | 补全标签代码 |
Ctrl+shift+d | 快速复制一行 |
Ctrl+shiif+k | 快速删除一行 |
Ctrl+鼠标左键单击 | 集体输入 |
Ctrl+h | 查找替换 |
Ctrl+f | 查找 |
Ctrl+/ | 注释 |
Ctrl+L | 快速选择一行 |
Ctrl+shift+↑(↓) | 快速上移(下移)一行 |
Ctrl+shift+2 | 新建窗口 |
Ctrl+z | 撤销 |
1.2 Html标签分类
单标签 <! Doctype html>
双标签 <html></html> <head></head> <title></title>
1.3标签
1.3.1单标签
◆注释标签 ctrl+/
◆换行标签 <br />
◆水平线标签 <hr />
1.3.2双标签
◆<p>文本内容</p>
特点:上下自动生成空白行。<br>换行不会生成空白行。
◆标题标签
h1-h6 取值到h6,h1 在一个页面里只能出现一次
◆文本标签
<font>文本内容</font>
◆文本格式化标签
文本加粗标签 <strong></strong> <b></b> 工作里尽量使用strong文本倾斜标签 <em></em> <i></i> 工作里尽量使用em
删除线标签 <del></del> <s></s> 工作里尽量使用del
下划线标签 <ins></ins> <u></u> 工作里尽量ins
◆注意:之所以工作里使用<strong></strong> <em></em> <del></del><ins></ins> 是因为更有语义化。
1.3.3 图片标签
<img src="1.jpg" alt="林志玲" title="女神" width="100" height="100"/>
其中:src 图片的来源 必写属性
alt 替换文本 图片不显示的时候显示的文字
title 提示文本 鼠标放到图片上显示的文字
width 图片宽度
height 图片高度
1.4路径
1.4.1相对路径:
相对于文件自身出发,就是相对路径。
◆文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名◆图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称
◆图片(html)在文件的上一级目录里,..+/+图片(html)名称
◆图片在文件的上一级的其他目录里,../文件夹名称/图片名称
1.4.2绝对路径
如 F:\BaiduNetdiskDownload\HTML
1.5 超链接
其中: href 去往的路径(跳转的页面)必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开(关闭自身页面,打开链接页面)
target=”_blank” 打开新页面(自身页面不关闭,打开一个新的链接页面)
超链接优化写法:
<base target="_blank"> 让所有的超链接都在新窗口打开
1.6 锚链接
1.7空链
1.8特殊字符
1.9列表
1.9.1无序列表
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>
<ul type=" ">可以更改浏览器中文字如上图你好前面的原点
type=”square” 小方块
type=”disc” 默认的实心圆点,如上图
type=”circle” 空心小圆圈
1.9.2有序列表
<ol>
<li></li> 列表项
<li></li>
<li></li>
</ol>
1.9.3自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
2.0音乐标签
<embed src="1.mp3" hidden="true">