畅游 HTML标签、属性
2017-02-10 本文已影响0人
yytyff
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
展示一张图片
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
