HTML简介
- 1.标签 - 承载内容
文本标签:
h1~h6 标题 heading
hr 水平标尺 horizontal ruler
p 段落 paragraph
sub/sup 下标/上标
strong 加粗
em 斜体
ins 下划线
del 删除线
  空格
&trade / © ...字符实体清单
- 列表标签:
有序列表 ol (ordered list)
无序列表 ul (unordered list)
li - list item
定义列表 dl (definition list)
dt dd
- 2.层叠样式表 - 渲染页面
- 3.JavaScript - 交互式行为
<!DOCTYPE html>
<!-- 开始标签 -->
<html>
<head>
<a name="top"></a>
<title>不挖石油的小小</title>
<!-- css - cascading style sheet -->
<style type="text/css">
h1 {color: red;
font-size: 2cm;
font-family: "楷体";}
/* 改变字体颜色、大小、字体 */
p{ color: blue;
font-size: 0.5cm;
font-family: "楷体";}
p:first-letter{font-size: 1cm;
color: orange}
.a{color: green}
</style>
</head>
<body>
<a name="xx" =""></a>>
<!-- 一级标题h1,6级 -->
<h1>小小<的>博客</h1>
<!-- 分割线hr -->
<hr>
<h2>这周吃什么</h2>
<ol>
<li>香肠</li>
<li>番茄鱼</li>
<li>猪脚饭</li>
</ol>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<!-- 链接
页面链接
锚点链接
功能链接
-->
<dl>
<dt>
<img title="前锋教育" align="left"
alt="图片加载失败"
src="http://www.114la.com/static/upd/201808/07185750de8cb789.jpg">>
<img src="bird.gif">>
<hr>猪脚饭
</dt>
<dd>猪脚饭就是猪脚加饭</dd>
</dl>
<h3>常用的网站</h3>>
<ul>
<li><a href="https://www.baidu.com" target="_blank">百度</a></li>
<li><a href="index2.html" target="_blank">自己的网站</a></li>
<li>视频网站
<ol>
<li><a href="https://www.iqiyi.com" target="_blank">爱奇艺</a></li>
<li><a href="https://www.tudou.com" target="_self">土豆</a></li>
</ol>
</li>
</ul>
<!-- 换行标签br -->
<br>枯藤<em>老树</em>昏鸦<br>
<br>小桥<strong>流水</strong>人家<br>
<br>H<sub>2</sub>O<br>
<br>m<sup>3</sup><br>
<!-- 段落标签p -->
<p>枯藤<del>老树</del><ins>昏鸦</ins></p>
<p class="a">小桥流水人家</p>
<button onclick="showWriter()">确定</button>
<button onclick="windowClose()">关闭</button>
<script type="text/javascript">
/* 驼峰命名法 - Camel Notation*/
function showWriter(){
for (var i = 1; i <=3 ; i += 1)
{
window.alert('作者:小小');
}}
function windowClose(){
if (window.confirm('确定要关闭吗?')) {
window.close();
}
}
</script>
<div>
<a href="#top">回顶部</a>
<a href="mailto:652337508@qq.com">联系站长</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=957658&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:957658:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</div>
</body>
</html>
超链接
- 页面链接
<a href="网络地址" target="_self">名称</a>
target默认值_self(在本窗口打开)；target="_blank"(新页面中打开)
<a href="https://www.baidu.com" target="_blank">百度</a>
锚点链接
- 设置锚点<a name="任意名称" =""></a>>
- 回到锚点位置<a href="#名称">回到锚点位置</a>
注:可跨文件操作
功能链接
- 例:<a href="mailto:652337508@qq.com">联系站长</a>
制表
table>tr * 4>td * 5 (四行五列)
colspan 跨列
rowspan跨行
<table border="1">
<caption><strong>学生信息表</strong></caption>
<thead>
<tr>
<th width="150">姓名</th>
<th width="150">年龄</th>
<th width="150">成绩</th>
</tr>
</thead>
<tr>
<td >张三</td>
<td>12</td>
<td rowspan="3" align="center">88</td>
</tr>
<tr>
<td colspan="2" align="center">李四</td>
</tr>
<tr>
<td >张三</td>
<td >19</td>
</tr>
效果:
效果
