最近在学习HTML和CSS，做了一些笔记，保存下来，方便后期继续学习，加油！
<!DOCTYPE html>
<html>
<!--
作者：Taylor
时间：2018-02-12 上午9:00-1200
描述：HTML的基础标签的学习
-->
<head>
<!--meta的相关属性-->
<!--设置编码格式为utf-8 -->
<meta charset="utf-8" />
<!--设置查询关键字 -->
<meta name="keywords" content="填写需要查询的关键字" />
<!-- 设置网页的描述内容-->
<meta name="distribution" content="填写描述网站的一些内容" />
<!--设置网站的作者 -->
<meta name="author" content="填写网站作者" />
<title></title>
</head>
<body>
<!--设置水平分界线-->
<hr />
<!--width 设置水平线的宽度，px表示像素-->
<hr width="100px" />
<!--align来对齐方式，一般有left、center、right三种
一般具有自动换行属性的标签，都有对应的align属性，
例如：p标签、h标签、以及hr等
-->
<hr align="center" width="150px" />
<!--背景:
采用RGB的三原色，其中：Red（0-ff）、Green（0-ff）、Blue（0-ff）
颜色用：#RGB
例如：黑色：#000000 可以简写为#000
红色：#ff0000 可以简写为#f00
白色： #ffffff 可以简写为#fff
还存在ARGB来表示颜色，在Android里面，A表示透明度；
***********常用的取色插件：FastStone Capture 可以下载下来来看一下
-->
<!--span的讲解：
1.span没有换行功能
2.所有换行的标签是可以嵌套的，例如div
3.span是可以自己嵌套的，不能嵌套使用换行标签。
-->
<!--效果-->
<span>我是<span>好人</span></span>
<!--div的嵌套-->
<div>www
<div></div>
</div>
<!--div：
1.可以自动换行
2.可以嵌套任何标签，实现div设置（盒子）
-->
<!--################################-->
<!--使用font属性来设置字体大小和颜色-->
<font size="4">Font设置文字的大小和颜色</font>
<font color="blue">Font设置文字的大小和颜色</font>
<!--采用B标签或者strong来设置字体加粗；
u标签来设置文字下划线；
i标签来设置字体倾斜
del标签来设置删除效果；
-->
<strong>采用B标签或者strong来设置字体加粗</strong>
<b>采用B标签或者strong来设置字体加粗</b>
<u>u标签来设置文字下划线</u>
<i>i标签来设置字体倾斜</i>
<del>del标签来设置删除效果</del>
<br />
<!--设置字体的上标（sup）和下标（sub）-->
A2:A的平方 A<sup>2</sup> B2:B的下标 B<sub>2</sub>
<!--address:地址标签
pre：预编译标签，显示和代码里面的格式一样；
-->
李白 床前明月光 床前明月光 床前明月光 床前明月光
<pre>
李白
床前明月光
床前明月光
床前明月光
床前明月光
</pre>
<!--img标签的使用-->
<img src="填写引入资源的路径，包括png、jpg、gif等格式" />
<!--
img的作用:通过src来引入图片，并且显示图片
常用属性:
1.width设置宽度，height设置高度
2.src填写图片的引入的路径’
3.title设置鼠标移动到图片上的提示效果；
4.设置图片不能正确通过路径显示出来的提示效果‘
5.border设置图片的边框线；
6.align属性设置对齐方式，可选择top、bottom、right、left、middle；
没有center属性，常和表格连用。
-->
<img src="填写引入图片资源的路径，包括png’jpg、gif等格式"
title="设置鼠标移动到图片上的提示效果"
alt="设置图片不能正确通过路径显示出来的提示效果"
border="1px" />
<!--href超链接跳转
a标签的作用：实现链接效果
常用属性：
1.href：设置链接路径；
2.target：设置链接打开的方式
在当前页面打开：
_self（使用框架，在自己所在区域打开）
_parent(使用框架，在父类集所在的区域打开)
_top(使用框架，在HTML所在的区域打开)
在新的页面打开：
blank
3.target的默认值为_parent;
-->
<a href="需要跳转链接的地址" target="_blank">eg：百度一下，就知道</a>
<a href="#">#:代表锚点，表示回到顶部，回到锚点位置，也可以叫空链接，重新刷新当前页面</a>
<!--a标签添加name属性，添加锚点
-->
eg:利用a标签的那么属性添加锚点<a name="锚点"></a>
<!--
列表：
无序列表：ul标签中添加type来添加li内容前面的图案
type的值：
none：去掉图案
disc：默认黑色圆点
circle：空心圆点
square：方块
有序列表：order list简写ol中的type的值
type的值有：
a、b、c.....小写字母
A、B、C.....大写字母
1、2、3.....默认数组
I、II、III....大写罗马字母
i、ii、iii....小写罗马字母
自定义列表：diy list
dl------diy list 自定义列表， 后面可添加style样式；
dt------diy title 标题
dd------自定义列表项目
-->
<h2>无序列表 unorder list---->ul</h2>
现代四大发明
<ul type="disc">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ul>
<ul type="square">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ul>
<ul type="circle">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ul>
<h2>有序列表 order list---->ol</h2>
现代四大发明
<ol type="1">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ol>
<ol type="a">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ol>
<ol type="I">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ol>
<ol type="A">
<li>支付宝</li>
<li>网购</li>
<li>共享单车</li>
<li>高铁</li>
</ol>
<h2>自定义列表--->diy list</h2>
<dl >
<dt>diy title 自定义 标题</dt>
<dd>自定义列表1</dd>
<dd>自定义列表2</dd>
<dd>自定义列表3</dd>
<dd>自定义列表4</dd>
</dl>
<!--表格的组成
1.表格(table)、行(tr)、单元格(tr-- th)
2.table的属性：
border：边框线，用px表示粗细
bordercolor:边框线的颜色，用十六进制表示
cellspace：设置单元格的间距，无间距用0px表示
cellpadding：单元格的内间距
style中的border-collapse:边框线的合并(style样式)
3.表格的合并
行合并：（下一行要少一行）rowspan 在td标签中使用
单元格合并：（少单元格）colspan 在td标签中使用
-->
<table width="400px" cellspacing="0px" cellpadding="0px"bordercolor="red" border="1px" style="border-collapse: ;">
<caption> 我的表格，显示在表格的中央</caption>
<tr >
<td rowspan="2">121212</td>
<td>121212</td>
</tr>
<tr>
<td colspan="2">colspan来将两个单元格合并</td>
</tr>
</table>
</body>
</html>
2099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
