最近在学习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>