山不在高，有仙则名；水不在深，有龙则灵
多学总是好的，闲来无事，了解下前端web
<h>标签
H标签的作用:用于给文本添加标题语义，主要从H1-H6，
H系列标签会独占一行 当然超过H6则无效,企业开发中 慎用H标签
特别是H1标签，一般只会用到一次，作为标题用或者非常醒目的地方
<p>标签
告诉浏览器那些是段落，会单独占一行，中间可以组合其他标签
比如<p><a href="http://www.baidu.com">跳转</a></p>
<h r>标签
hr标签主要是用来作为线用的
<b r>标签
br标签主要是用来作为换行的，但是不是分段
比如文字`天猫搜索`在天猫后面加一个该标签，可以让文字两两对齐
<div>标签
相当于分块，应该是比较独立的区域
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素
<a>标签
控制页面与页面之间的跳转 必须有href 属性
a标签中有个target属性 该属性用作如何跳转
_self:不新建界面当前页面跳转
_blank:新建一个页面
标签也有title属性 和 img 的一样
<p><a href="http://www.baidu.com">跳转</a></p>
<p><a href="http://www.baidu.com" target="_blank">跳转新窗口</a></p>
<p>
<a href="http://www.baidu.com">
<img src="../static/img/1.jpg" title="这是一个除湿的茶">
</a>
</p>
<img>标签
加载图片的标签
title标签：当鼠标移动到图片上面会显示该title 的值
注意src的路径问题 ../是切换到上级目录
<p><img src="../static/img/1.jpg" title="这是一个除湿的茶"></p>
<p><img src="12.jpg" width="300" height="400" title="这是一个除湿的茶"></p>
<p><img src="12.jpg" title="这是一个除湿的茶"></p>
<p><img src="12.jpg" width="200" height="200" title="这是一个除湿的茶"></p>
<base>标签
base标签 指明当前网页所有a标签如何打开,必须在<head>标签中
当然如果我们在<a>标签中如果再进行单独设置target属性，那么会依照该属性来执行
<head>
<base target="_blank">
</head>
假链接
下面两个都可以作为假链接 但是 # 可以回到顶部
<a href= "#">居然是假链接</a>
<a href= "javascript:">居然是假链接JS</a>
锚点
当我们想实现点击目录进行跳转到指定位置的时候
我们可以通过<a>标签来实现 当然在href里面需要指定
每个标签都可以添加一个id属性，我们在进行跳转到指定位置的时候可以在#后面添加该id
该跳转是没有动画效果的，是直接跳转到该位置，如果需要动画则不行
<a href="#footer" target="_self">锚点调整 需要给标签进行绑定一个id</a>
<footer>
<div id="footer">
<a href="/">页眉</a>
</div>
</footer>
也可跳转到一个新的界面指定的锚点
如
<a href="blogDetail.html#here" target="_self">跳转到下个界面的指定位置</a>
和上面方法类似 不过需要跟上指定界面标签的id
列表标签
1、什么是列表标签
- 列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
2、HTML中列表标签的分类
- 无序列表 （使用最多）
- 有序列表 （最少）
- 定义列表 （其次）
3、无序列表作用
- 给一堆数据添加列表语义。并且这一堆数据中所有的数据都没有先后之分
4、无序列表格式，<ul>和<li>是一个整体，是一个组合，不会单独出现，也不会单独使用
当然<li>标签中会很复杂，也可以继续嵌套<ul>
<ul>
<li>内容</li>
</ul>
5、无序列表应用场景
- 商城列表
- 导航栏
- 新闻列表
- .....还有很多
6、有序列表
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ol>
用法和无序列表一模一样，只是会默认在列表前面加上数字，表示顺序
7、自定义列表
语法如下：
<dl>
<dt></dt>
<dd></dd>
</dl>
<dt>定义列表中的标题
<dd>定义列表中的描述
表格标签<table>
格式
<table border="2" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
其中 tr代表整个表格中的一行数据，td代表表格中一行的一个单元格
内边距为文字和边框直接的间距
注意：表格标签默认有一个边框属性(border)，默认为0，所以看不到边框，和列表标签一样，里面的tr，td不单独出现
综合使用 <caption>可以作为<table>的标题 放在<table>标签内部，默认居中显示，将其中的<td>属性换成<th>属性，则默认字体为加粗和居中，可以理解为<td>是用来存储列表的数据，<th>存储列表的标题
<table bgcolor="black" width="800px" cellspacing="1">
<caption>
<!--table的标题-->
<h2>排行榜</h2>
</caption>
<!--<tr bgcolor="#d3d3d3" align="center">-->
<!--<td><h3>排名</h3></td>-->
<!--<td><h3>关键词</h3></td>-->
<!--<td><h3>趋势</h3></td>-->
<!--<td><h3>今日搜索</h3></td>-->
<!--<td><h3>最近七日</h3></td>-->
<!--<td><h3>相关链接</h3></td>-->
<!--</tr>-->
<tr bgcolor="#d3d3d3">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>火热</td>
<td>555555</td>
<td>7878787</td>
<td valign="center">
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>火热</td>
<td>555555</td>
<td>7878787</td>
<td valign="center">
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>火热</td>
<td>555555</td>
<td>7878787</td>
<td valign="center">
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>火热</td>
<td>555555</td>
<td>7878787</td>
<td valign="center">
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>火热</td>
<td>555555</td>
<td>7878787</td>
<td valign="center">
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
<a href="blogCategory.html">贴吧</a>
</td>
</tr>
</table>
效果如下
1546415539365.jpg
完整格式
<table>
<caption>信息</caption>
<thead>
<tr>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>16</td>
</tr>
</tfoot>
</table>
单元格合并
<table bgcolor="black" width="500" height="300" valign="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2" rowspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--<td colspan="2"></td>-->
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
结果如下
1547719092565.jpg
网友评论