HTML的代码结构
- 标签-承载内容
- 层叠样式表 - 渲染页面
- JavaScript -交互式行为
1.初识HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流浪Python</title>
<!-- 2. 层叠样式表 -->
<!-- css cascading style sheet -->
<style type="text/css">
h1 { /*h1标签格式 */
color: red; /* 颜色 */
font-family: 隶书; /* 字体 */
}
p { /*p标签格式 */
/* 字体大小 还可以使用 80px */
font-size: 1cm;
}
p:first-letter{ /*首字格式 */
font-size:1.5cm;
color:blue;
}
.a { /*a 类格式 */
color:red;
}
.b { /*b 类格式 */
color:green;
}
</style>
</head>
<body>
<h1>成员列表</h1> <!-- 标签 -->
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<hr> <!-- 分割线 -->
xxx<br> <!-- br 换行 -->
xxx<br>
xxx<br>
xxx<br>
<p class="a">xx </p> <!-- 创建a 类 -->
<p class="b">xxx</p> <!-- 创建b 类 -->
<p>xxx</p>
<p>xx</p>
<!-- 创建按钮并关联js -->
<button onclick="showWeiter()">确定</button>
<button onclick="closeWindow()">关闭窗口</button>
<!--javascript -->
<script type="text/javascript">
// 驼峰命名法 Camel Notation
function showWeiter(){
for(var i = 1; i <= 3; i += 1){
window.alert('pyth1901');
}
}
function closeWindow(){
if (window.confirm('确定要关闭吗?')){
window.close();
}
}
</script>
</body>
</html>
-
效果
标签和css
js
2.标签、字符实体、列表、图片
<!DOCTYPE html>
<html>
<head>
<title>1.标签</title>
</head>
<body>
<h1>标签和字符实体</h1>
<ol>
<h2>上标(sup)/下标(sub)</h2>
<p> H<sub>2</sub>O </p> <!-- 下标 -->
<p> a<sup>2</sup> </p> <!-- 上标 -->
<h2>加粗(strong)/倾斜(em)/换行(br)</h2>
人到<strong>中年</strong>不得以,<em>保温杯</em>里泡<strong><em>枸杞<sub></sub></em></strong><br>
<h2>下划线(ins)/删除线(del)</h2>
<ins>人生</ins>自古<del>谁无死</del>,<br>
<h2>字符实体: 空格($nbsp)/版权($copy)</h2>s
留取丹心 照汗©青.
</ol>
<br>
<br>
<h1>列表</h1>
<hr>
<ol>
<h2>1 有序列表</h2>
<ol>
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ol>
<h2>2 无序列表</h2>
<ul>
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ul>
<h2>3 定义列表</h2>
<dl>
<dt>Python</dt>
<dd>面向对象的编程语言</dd>
<dd>动态类语言,需要Python解释器才能执行</dd>
</dl>
<h2>4 列表嵌套</h2>
<ul>
<li>表项1</li>
<ol>
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ol>
<li>表项2</li>
<li>表项3</li>
</ul>
</ol>
<h1>图片</h1>
<ol>
<p>网络图片<p>
<dt><img src="https://www.python.org/static/img/python-logo.png"></dt>
<p>本地图片</p>
<dt><img src="wali.jpg"></dt>
<p>调整图片大小</p>
<dt><img src="wali.jpg" width="100" height="80"></dt>
<p>加载失败</p>
<dt><img src="wali11.jpg" width="100" height="80"alt="加载失败" ></dt>
<p>对齐:居中(center)/左对齐/右对齐/上对齐/下对齐</p>
<dt><img src="wali.jpg" width="100" height="80"align="left">瓦力</dt>
</ol>
<a name="foo"></a>
</body>
</html>
-
效果
b1.png
列表
图片引用
3.链接：页面、锚点、功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.标签</title>
<style type="text/css">
a {
color:red;
}
a:hover{
color:green;
}
</style>
</head>
<body>
<a name="flag1"></a> <!--设置锚点 -->
<a href="#flag0">到底部</a> <!--使用锚点 -->
<h2>1 页面链接</h2>
<hr>
<h3>常用网站</h3>
<ol>
<li><a href="https://www.baidu.com"target="_blank">百度</a></li>
<li><a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/"target='_blank'> 百度翻译</a></li>
<li><a href="//www.greatytc.com/u/20d448d19898"target="_self">我的简书</a></li>
</ol>
<h3>自己的页面</h3>
<ol>
<!-- -->
<li><a href="h2.html">H2</a></li>
<li><a href="h1.html">H1</a></li>
</ol>
<hr>
<br><br>
</body>
<h2>2 锚点链接</h2>
<a name="flag0"></a> <!--设置锚点 -->
<a href="#flag1">回顶部</a> <!--使用锚点 -->
<a href="h2.html#foo">到h2 foo</a> <!--跨页面使用锚点 -->
<hr>
<h2>3 功能链接</h2>
<!--mailto:XXXXXX@xx.com为邮箱账号 -->
<a href="mailto:XXXXXX@xx.com">联系站长</a>
<!--qq聊天链接，自己上（shang.qq.com)生成 ,img图片可以自己替换-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxx&site=qq&menu=yes"><img src="wali.jpg" width="100" height="80" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</html>
-
效果
链接
4.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国,中国</title>
<style>
th{
color: #FF0000;
}
.a{
color: #0000FF;
}
</style>
</head>
<body>
<h1>你好</h1>
<!-- ol>li*5 快速列表 -->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- table>tr*4>td*5 快速生成4行5列表格命令-->
<!-- border 表格边框一般用css方式实现 -->
<!-- thead 表头 tbody 表体 只是为了代码好看 不影响页面显示 -->
<table border=9>
<caption>学生成绩表</caption>
<thead>
<tr>
<th width="100">语文</th>
<th width="100">姓名</th>
<th width="100">数学</th>
<th width="100">英语</th>
<th width="100">体育</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a" align="center">XX</td>
<td>22</td>
<td>33</td>
<td>43</td>
<td>53</td>
</tr>
<tr> <!-- rowspan 合并行/xolspan 合并列-->
<td rowspan="2"align="center">XXX</td>
<td align="center" colspan="4">55</td>
<!-- align 对齐方式 center 居中 -->
</tr>
<tr>
<td>73</td>
<td>86</td>
<td>27</td>
<td>f2</td>
</tr>
<tr>
<td align="center">XX</td>
<td>32</td>
<td>32</td>
<td>22</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
-
效果
表格
