字符集
<meta charset="utf-8">
<!-- charset常用值有:GB2312、BIG5、GBK和UTF-8,
其中UTF-8被称万国码,基本包含了全世界所有国家需要用到的字符-->
HTML标签
<h1>----<h6>
<h1>一级标题</h1>
<!-- 作为标题使用,根据重要性递减
一个标题独占一行-->
<p>段落标签</p>
<!-- 可以把HTML文档分割成若干段落
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙-->
<br/>
<!-- 单标签 强制换行
简单的开始新的一行与段落不一样,段落之间会有一些垂直间距
<br/>标签没有间距-->
<div>和<span>
<!-- <div>和<span>没有语义,都表示一个盒子用来装内容
<div>用来布局,一行只能放一个<div>,大盒子
<span>一行可以多个<span>,小盒子-->
图片img
<img src="img.png" alt="" title="">
<!-- src 用于指定图像文件的路径和文件名
alt 图像不能显示时显示的文字
title 鼠标放到图像上显示的文字-->
路径分类 | 符号 | 说明 |
---|---|---|
同一路径 | 图片在页面同一级<img src="img.jpg"> | |
下一级路径 | / | 图片在页面下一级<img src="images/img.jpg"> |
上一级路径 | ../ | 图片在页面上一级<img src="../img.jpg"> |
文本格式化标签
语义 | 标签 |
---|---|
加粗 | <strong></strong> 或者<b></b> |
倾斜 | <em></em> 或者<i></i> |
删除线 | <del></del> 或者<s></s> |
下划线 | <ins></ins> 或者<u></u> |
建议使用第一种
特殊符号
特殊符号 | 描述 | 字符的代码 |
---|---|---|
空格 |  ; | |
< | 小于号 | <; |
> | 大鱼号 | >; |
& | 和号 | &; |
¥ | 人民币 | ¥; |
© | 版权 | © |
® | 注册商标 | ® |
² | 平方根 | ² |
× | 乘 | × |
÷ | 除 | ÷ |
超链接
<a href="#maodian">锚点链接</a>
<!-- 链接地址为最后一行所建锚点的id,点此链接可以直接跳转到我是溯琳
#一定要添加-->
<h3>外部链接</h3>
<!-- href 用于指定连接目标的URL地址-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- target 打开窗口的方式
默认 _self 在当前窗口打开页面
_blank 在新窗口打开页面-->
<h3>内部链接</h3>
<a href="ai.html" target="_blank">ai</a>
<!-- 内部的HTML网页相互连接 -->
<h3>空链接</h3>
<a href="#">这是空链接</a>
<h3>下载链接</h3>
<a href="img.zip">下载链接</a>
<!-- 地址的链接是 .exe或.zip 等形式的压缩包 -->
<h3>网页元素的链接</h3>
<a href="http://ww.baidu.com"><img src="img.png" ></a>
<!-- 图片、表格、音频、视频等都可以 -->
<h3>锚点链接</h3>
<a id="maodian">我是溯琳</a>
<!-- 页面间的跳转 这是另一个html-->
<a href="index.html#maodian" target="_self">index页面中的我是溯琳</a>
取消a标签链接的默认下划线
text-decoration:none;
表格
<table border="1" cellspacing="0" cellpadding="0" width="500px" height="100px">
<!-- border 表格的边框,
cellpadding规定单元边沿与其内容之间的空白,默认是1,
cellspacing规定单元格之间的空白,默认值是2-->
<caption>表格标题</caption>
<!-- caption 表格的标题 -->
<thead> <!-- thead表头标签 -->
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<!-- th表头单元格 文字默认加粗,左右上下居中-->
</thead>
<tbody><!-- tbody表格身体 -->
<tr><td>溯琳</td><td colspan="2">男</td></tr>
<!-- td普通单元格 colspan跨列合并 需要删除多余的单元格-->
<tr><td rowspan="2">琳玉</td><td>女</td><td>21</td></tr>
<!-- rowspan跨行合并 需要删除多余的单元格 -->
<tr>><td>女</td><td>22</td></tr>
</tbody>
</table>
列表
<!-- 无序列表 -->
<ul type="circle">
<!-- type 改变无序列表前的样式,ul里只可以放li,li里可以放任何东西-->
<li>爷爷</li>
<li>爸爸</li>
<li>儿子</li>
<li>孙子</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>爷爷</li>
<li>爸爸</li>
<li>儿子</li>
<li>孙子</li>
</ol>
<!-- 自定义列表 -->
<dl>
<!-- dt是大哥 dd是小弟 -->
<dt>溯琳</dt>
<dd>男</dd>
<dd>帅哥</dd>
<dd>特别帅</dd>
</dl>
去掉li标签前面的点或序号
list-style-type:none;