a
链接,链到一个地址
<a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com</a>
<a href="#">饥人谷.com</a>:"#"是定位到页面上的某点的
<a href="#about">饥人谷.com</a>
<a href="/getCourse">饥人谷.com</a>
img
展示一张图片
![](a.png)alt 是指如果前面的图片链接有问题,会有显示,
还有就是对于残障人士,方便理解,收索引擎的优化有好处,以及可以知道图片是什么
img是只闭合标签,最后不需要加 /
div
语义为“一大块”,用于给页面划分区块,让结构更清晰
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
id和class的区别,id:给一个元素取名字,去命名给元素添加标记,以至于下次可以查询
。class代表一类的东西,不同元素可以加class
ul li:无序列表
ul: unsort list 无序列表
用于表示并列的内容
ul的直接子元素是li
可以嵌套
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>
ol li
ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套
<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
dl dt dd
用于展示一系列 “标题:内容... ”的场景
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器,很贵,易碎</dd>
</dl>
button
按钮
<button>点我</button>
strong em span
span 最弱,这三个都可以标记来加样式
em 需要强调一下
strong 很重要、强调性更强
<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>
iframe
用于在当前页面嵌入一个页面 注意跨域操作问题
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>
table:做表格时用table
用于展示表格,不要用来做布局 thead tbody tfoot可省略,
浏览器会自动添加 border-collapse: collapse;用于合并边框
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
现在一般用这个:
<table>
<tr>
<th>name</th>
<th>sex</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr></tr>
</table>
DOCTYPE meta
<!DOCTYPE html>
D指文档对象模型,标准模式:加上这个东西告诉浏览器该怎样去渲染,
混杂模式:不加这个东西,浏览器以宽松的方式去渲染,在不同的浏览器以不同的方式渲染
<html lang="zh">:告诉浏览器用了什么语言
!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">:编码方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
:双核浏览器
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用于移动端的展示合理
<meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端学习社区">
搜索引擎优化
<title>Document</title>
</head>
块级元素和行类元素的区别
块级元素可以占据以整行的空间,
行类元素只占本身的宽度a链接,span,strong,img em button