html学习
严重说明！！！
以下是博主的简单get的一些的学习笔记，其中内容都是为了方便！快！自己方便以后查找来做的笔记。。。。。。
1： html表格学习内容
01 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<h3>表格学习内容</h3>
<ul>
<li>了解表格的应用场景</li>
<li>表格基本结构</li>
<li>如何操作表格</li>
<li>表格属性</li>
<li>表格跨行跨列</li>
<li>表格嵌套</li>
</ul><br /> table表格
<br /> tr 行<br /> td 单元<br />
<hr />
<h3>表格</h3>
<table border="1" cellspacing="" cellpadding="" width="500px">
<!--
作者：912624568@qq.com
时间：2018-07-22
描述：创建两行三列一个表格
border：边框
cellspaceing：
cellpadding：
<th></th>：加粗居中
表格三大部分：
thead：表头（放标题之类的内容）
tbody：表格的主体（放数据的主体）
tfoot：表格的脚（表格的脚注）
同时存在，同时使用
-->
<caption>前段工程师平均工资</caption>
<!--标题-->
<thead>
<tr>
<th>城市</th>
<th>2014年</th>
<th>2014年</th>
<th>2015年</th>
</tr>
<tr>
<th>北京</th>
<th>1000</th>
<th>1000</td>
<th>1000</th>
</tr>
</thead>
<tbody>
<tr>
<td>上海</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr>
</tfoot>
</table>
<hr />
<img src="../img/biaoge.png" width="500px" />
</body>
</html>02 效果展示
2： HTML基本语法构造
01 代码
<!DOCTYPE html><!--文件声明-->
<html>
<head>
<meta charset="utf-8" />
<title>文字和段落</title>
<meta name="viewport"content="text/html;charset=utf-8"/><!--网页的页面是使用什么格式，什么编码-->
</head>
<body bgcolor="red">
html是超文本显示<br />
<img src="../img/28.png" alt="图片一" width="50" height="50"/><br />
<br />
<br />
<br />
<br />
<img src="../img/2.png" alt="图片二" width="50%" height="79%"/><br />
<a name="html"></a><img src="../img/1.png" alt="图片二"/>
<hr /><!--hr是水平线-->
</body>
</html>说明：三大部分构成，，，具体的就不说啦，文章主要是博主的学习笔记，作为记录以后方便查询而言
3： 列表标签
01 代码
<!DOCTYPE html>
<!--文件声明-->
<html>
<head>
<meta charset="utf-8" />
<title>列表标签</title>
<meta name="viewport" content="text/html;charset=utf-8" />
<!--网页的页面是使用什么格式，什么编码-->
</head>
<body bgcolor="green">
<h1>什么是html</h1>
<p>HTML使用来描述网页的一种语言！</p>
<!--标题-->
<p>无序列表</p>
<!--无序列表-->
<ul type="square">
<li>html指的是一种超文本语言</li>
<li>贾</li>
<li>继</li>
<li>康</li>
</ul>
<ul type="disc">
<li>html指的是一种超文本语言</li>
<li>贾</li>
<li>继</li>
<li>康</li>
</ul>
<ul type="circle">
<li>html指的是一种超文本语言</li>
<li>贾</li>
<li>继</li>
<li>康</li>
</ul>
<hr />
<!--hr是水平线-->
<p>有序列表</p>
<ol type="1">
<!--有序列表-->
<li>贾</li>
<li>继</li>
<li>康</li>
</ol>
<ol type="a">
<li>贾</li>
<li>继</li>
<li>康</li>
</ol>
<ol type="I">
<li>贾</li>
<li>继</li>
<li>康</li>
</ol>
<hr />
<!--分割线-->
<p>定义列表</p>
<dl>
<dt>定义列表项</dt>
<dd>列表描述项</dd>
<dd>列表描述项</dd>
<dd>列表描述项</dd>
<dt>定义列表项</dt>
<dt>定义列表项</dt>
<dt>定义列表项</dt>
<dd>列表描述项</dd>
<dd>列表描述项</dd>
<dd>列表描述项</dd>
</dl>
</body>
</html>02 效果展示
4：table制作
01 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格属性</title>
</head>
<body>
<h3>表格</h3>
<table border="6" cellspacing="0" cellpadding="5px" width="500px" bgcolor="beige" align="center">
<!--
作者：912624568@qq.com
时间：2018-07-22
描述：创建两行三列一个表格
border：边框
cellspaceing：单元格之间的空隙
cellpadding：内容之间的空隙
<th></th>：加粗居中
frame:边框：void box,above,lhs
rules内容的边框线:none， rows
表格三大部分：
thead：表头（放标题之类的内容）
tbody：表格的主体（放数据的主体）
tfoot：表格的脚（表格的脚注）
同时存在，同时使用
align:水平居中，，，，
valign：垂直居中，，，，
colspan:跨列属性
rowspan:跨列属性
-->
<caption>前段工程师平均工资</caption>
<!--标题-->
<thead valign="center" align="center">
<tr bgcolor="aqua">
<th rowspan="2">城市</th><!--跨列属性-->
<th colspan="2">2014年</th><!--跨行属性-->
<th>2015年</th>
</tr>
<tr bgcolor="aquamarine">
<!--<th height="30px">城市</th>-->
<th>上半年</th>
<th>下半年</th>
<th>2015年</th>
</tr>
</thead>
<tbody align="center" valign="center">
<tr align="center" valign="center">
<td bgcolor="azure" height="30px">北京</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr>
<tr align="center">
<td bgcolor="azure" height="30px">上海</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr></tbody>
<tfoot valign="center" align="center">
<tr align="center" valign="center">
<td bgcolor="azure" height="30px">合计</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr></tfoot>
</table>
</body>
</html>
02 效果展示
5：table嵌套
01 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格嵌套</title>
</head>
<body>
<!--
作者：jjk
时间：2018-07-22
描述：表格嵌套
说明：1： 完整表格结构
2：放到<td>标签中
-->
<table border="1" cellspacing="0" cellpadding="0">
<caption>表格嵌套</caption>
<tr>
<td>2014</td>
<td>2014</td>
<td>2014</td>
</tr>
<tr>
<td>
<table border="1px">
<tr>
<td>上半年</td>
<td>下半年</td>
</tr>
<tr>
<td>2000</td>
<td>2000</td>
</tr>
</table>
</td>
<td>8000</td>
<td>8000</td>
</tr>
</table>
</body>
</html>02 效果展示
6：table布局
01 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格布局案例</title>
</head>
<body>
<!--
作者：jjk
时间：2018-07-22
描述：表格框架的搭建学习
注意：
1：尽量少的使用表格嵌套
2：尽量少的使用表格跨行跨列
-->
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#f2f2f2">
<!--百分比会任何时候都会充满屏幕-->
<caption>表格布局</caption><!--标题-->
<tr height="80px" bgcolor="#14191e"><td>11111111</td></tr><!--页头-->
<tr height="10px"><td></td></tr><!--上空行-->
<tr><td>
<table border="0" cellspacing="" cellpadding="" align="center" width="1024px">
<tr>
<td width="240px" bgcolor="#ffffff" valign="top">
<table width="100%" bgcolor="#ffffff">
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">团队介绍</td></tr>
<tr><td align="center" height="60px">贾</td></tr>
<tr><td align="center" height="60px">继</td></tr>
<tr><td align="center" height="60px">康</td></tr>
<tr><td align="center" height="60px">很</td></tr>
<tr><td align="center" height="60px">帅</td></tr>
<tr><td align="center" height="60px">哒</td></tr>
</table>
</td><!--左内容-->
<td width="20px"></td><!--空隙-->
<td width="762px" bgcolor="aqua">
<pre>
中的鸡蛋鸡蛋搅三号非好汉好司机发电所看单
电覅交代JS单靠好看宽胶带覅开掉分减掉覅教
开爱看宽胶带浮雕覅贷款将骄傲开覅点覅三减掉覅军嫂安考会计法就爱防静电含简
单酒店覅交代叫可结案交单交覅就傲娇覅就爱缴费点看见思考费娇娇撒娇骄傲焦家
分店看交扫覅掉进代价覅觉得可结案开单叫撒看见覅就爱缴费叫吊机费看简爱交单
可减掉 撒娇奥看见覅就掉价的看简爱缴费点看
焦点房间爱单价接待费就发接待费缴纳爱看交掉监
控爱空间单脚撒旦简爱看看几点看克拉三级骄傲会计法掉
</pre></td><!--右内容-->
</tr>
</table>
</td></tr><!--内容-->
<tr height="150px" bgcolor="aliceblue"><td>11111111</td></tr><!--下空行-->
<tr height="150px" bgcolor="#1419e"><td>11111111111111</td></tr><!--页脚-->
</table>
</body>
</html>02 效果展示
7：图像和超链接
01 代码
<!DOCTYPE >
<html>
<title>图像和超级链接</title>
<meta http-equiv="content-type" content="text/html" ; charset="utf-8" />
<!--注释：ctrl+/-->
<h2>图片</h2>
<img src="D:/CSDN工作文件/Git截图/2.png" alt="这是提示" width="300" height="100" /> <br/>
<!--绝对路径 -->
<img src="../img/git安装1.png" alt="是文字代替图片的标签" width="900" height="500" />
<!--相对路径-->
<!--超链接标签-->
<hr />
<!--换行-->
<!--超链接-->
<a href="http://www.runoob.com/ajax/ajax-tutorial.html">
<h2>超链接</h2></a>
<a href="http://www.runoob.com/ajax/ajax-tutorial.html">测试超链接！</a>
<h2>第三</h2>
<img src="../img/IMG_7286.JPG" alt="测试图片" width="50%" height="60%" />
<a href="#">
<h2>学习</h2></a>
<!--空链接：#具有链接的效果-->
<hr />
<h3>链接属性</h3> href :链接的标签; <br /> 属性：
<br /> target:_self：当前的窗口打开一个新的页面, _blank:创建一个新的窗口打开页面,_top,_parent<br /> title
<br /> name
<br />
<a href="http://www.runoob.com/ajax/ajax-tutorial.html" target="_self">测试超链接--使用_selft在当前的页面打开！</a><br />
<a href="http://www.runoob.com/ajax/ajax-tutorial.html" target="_blank">测试超链接--使用_blank创建一个新的窗口打开</a>
<hr />
<h4>滚动</h4> 定义锚：实现滚动条
<br />
<a href="#html">html课程</a>
<a href="#js1">js入门</a>
<a href="#js2">js2入门</a>
<a href="mailto:912624568@qq.com">反馈意见</a>
<a href="../img/zip.7z">文件下载</a>
<br />
<a href="study_01.html" target="_blank" name="html"><img src="../img/28.png" alt="html基础课程" width="50%" height="40%" /></a>
<a href="study_01.html" target="_blank" name="js1"><img src="../img/28.png" alt="html基础课程" width="50%" height="40%" /></a>
<a href="study_01.html" target="_blank" name="js2"><img src="../img/28.png" alt="html基础课程" width="50%" height="40%" /></a>
<a href="study_01.html#html">html</a>
<!--
作者：912624568@qq.com
时间：2018-07-22
描述：这里是跳转到另一个页面的锚点
<a href="study_01.html#html">html</a>
<a name="html"></a><img src="../img/1.png" alt="图片二"/>
-->
<h5>定义锚总结</h5>
<ol>
<li>定义锚的位置和锚名</li>
<li>设置寻找锚的链接</li>
</ol>
<br />
<h5>不同页面中定义锚</h5>
</body>
</html>02 效果展示
8：HTML总结
01 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html总结</title>
</head>
<body>
网页主题内容<br />
<ol>
<li>!DOCTYPE是什么类型</li>
<li>标题标签h1,2,3,4,5,6</li>
<li>段落标签p且align对齐方式</li>
<li>换行标签br</li>
<li>水平线标签hr</li>
<li>加粗标签b,strong</li>
<li>文字斜体i,em</li>
<li>上标:sub</li>
<li>下标：sup</li>
<li>插入内容：ins</li>
<li>删除标签:del</li>
<li>还有一些特殊标签使用符号表示</li>
<li>锚名：实现跳转</li>
<li>target打开链接文件的跳转方式：同页面，另一个页面，title链接提示文字，name链接命名</li>
<li>电子邮箱链接：a href="mailto:邮箱地址"/a </li>
<li></li>
</ol>
</body>
</html>
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
