1.Html
- 全称 Hyper text markup language(超文本标记语言)
2.Html的基本结构
< ! doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
3.单标签,双标签
单标签 <! Doctype html>
双标签 <html></html> <head></head> <title></title>
4.包含并列关系
包含（嵌套关系） <head><title></title></head>
并列关系 <head></head><body></body>
5.快捷键使用
| 按键 | 功能 |
|---|---|
| Html:xt+tab | Html结构代码 |
| tab | 补全标签代码 |
| Ctrl+shift+d | 快速复制一行 |
| Ctrl+shiif+k | 快速删除一行 |
| Ctrl+鼠标左键单击 | 集体输入 |
| Ctrl+h | 查找替换 |
| Ctrl+f | 查找 |
| Ctrl+/ | 注释 |
| Ctrl+L | 快速选择一行 |
| Ctrl+shift+↑（↓） | 快速上移（下移）一行 |
| F11 | 全屏 |
6.基础标签
- 注释,换行,水平标签
注释标签 ctrl+/
换行标签 <br/>
水平线标签 <hr/>
- 段落签
段落标签 <p>段落内容</p>
特点：上下自动生成空白行。<br>换行不会生成空白行。
- 标题
标题 h1-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> 是因为更有语义化。
- 图片标签
<img src="maci.jpg" alt="马刺" title="我喜欢的NBA球队" width="300" height="500" />
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
-
路径
-
相对路径:相对于文件自身出发，就是相对路径。
1.文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 <img src="maci.jpg" alt="马刺" title="我喜欢的NBA球队" /> 2.图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称 <img src="图片/maci.jpg" alt="马刺" title="我喜欢的NBA球队" /> 3.图片（html）在文件的上一级目录里，..+/+图片（html）名称 <img src="../maci.jpg" alt="马刺" title="我喜欢的NBA球队" /> 4.图片在文件的上一级的其他目录里，../文件夹名称/图片名称 <img src="../图片/maci.jpg" alt="马刺" title="我喜欢的NBA球队" /> 总结：找到下一级目录（文件夹）的图片（文件）用 / 跳出当前目录使用../ -
绝对路径
1.文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 <img src="D:\图片\maci.jpg" alt="马刺" title="我喜欢的NBA球队" />
-
-
超链接
-
超链接
<a href="图片标签.html" title="图片标签" target="_self">超链接</a> ref 去往的路径（跳转的页面） 必写属性 title 提示文本 鼠标放到链接上显示的文字 target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面） Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面） -
锚链接
1.先定义一个锚点 <p id="fuck"></p> 2.超链接锚点 <a href="#fuck">回到p</a> 3.空链 不知道链接到那个页面的时候，用空链 <a href="#">空链</a> -
压缩文件下载(不推荐使用)
<a href="../1.rar">压缩包</a -
超链接的优化
<base target="_blank"> 让所有的超链接都在新窗口打开
-
- 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
- 列表
-
无序列表
<ul type="circle"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> type=”square” 小方块 type=”disc” 实心小圆圈 type=”circle” 空心小圆圈 -
有序列表
<ol type="1" start="5"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ol> type=”1,a,A,i,I” type的值可以为1,a,A,i,I start=”” 决定了开始的位置。 -
自定义列表
<dl> <dt>小标题</dt> <dd>解释标题</dd> <dd>解释标题</dd> </dl>
-
- 音乐标签
<embed src="1.mp3" hidden="true">
src 路径
- 页面自动滚动效果
<marquee></marquee>
中间的内容可以为文字,图片,也可以是由程序生成的文字或图片
属性
height
width
bgcolor
behavior:设定滚动方式(alternate:两端来回滚动 scroll:一端到另一端会重复 slide:一端到另一端不会重复)
direction:设置滚动方向(down,left,right,up)
loop:滚动次数(-1一直滚动)
网友评论