这篇博客展示了HTML和CSS的基础应用，包括网页的自动刷新、标题样式、字体大小、图片处理、链接样式、表格、列表、表单以及JavaScript交互。通过实例演示了如何创建网页布局、设置背景色、定义字体大小和颜色，以及实现图片和文字的样式。还涵盖了HTML元素的解释和JavaScript的简单事件触发。
边学边实践，在浏览器运行了一下，感觉挺有意思的！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="60"><!--每一分钟刷新网页-->
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
h3 {color:green}
</style><!--在head处使用CSS来定义整个html的样式；如需使用外部样式表，请使用<link>标签。-->
<link rel="shortcut icon" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200223%2F61fa2e129abc4f5493abba3cb9c45c02.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634193916&t=2d00fa1861be17406e9cbab711451f86">
<!--标题左侧的图片-->
<title>我的标题</title>
<p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200223%2F61fa2e129abc4f5493abba3cb9c45c02.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634193916&t=2d00fa1861be17406e9cbab711451f86" style="float:left" height="50" width="50">
页眉或网页说明
</p>
<hr>
</head>
<body>
<h1>标题1</h1>
<font size="6">6号字体文本</font>
<h2>标题2</h2>
<font size="5">5号字体文本</font>
<h3>标题3</h3>
<font size="4">4号字体文本</font>
<h4>标题4</h4>
<font size="3">3号字体文本</font>
<h5>标题5</h5>
<font size="2">2号字体文本</font>
<h6>标题6</h6>
<font size="1">1号字体文本</font>
<hr><!-- 一条水平线 -->
<p>
常规段落<br>
<!-- 一个段落的编写 -->
<a href="#p1">目录跳转到图片链接</a><br>
<hr>
<b>加粗文本</b><br>
<i>斜体文本</i><br>
<code>电脑自动输出</code><br>
<sub> 下标</sub> 和 <sup> 上标</sup><br>
<abbr title="etcetera">etc.</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
<!-- 在某些浏览器中，把鼠标移至缩略词语上，title可用于展示表达的完整版本。 -->
<pre>空行和 空格
</pre>
<code>计算机输出</code><br>
<kbd>键盘输入</kbd><br>
<tt>打字机文本</tt><br>
<samp>计算机代码样本</samp><br>
<var>计算机变量</var><br>
<del>划掉</del> <ins>下划线</ins>
</p>
<p style=
"color:blue;
background-color: darkkhaki;
margin-left:20px;
font-family:楷体;
font-size:20px;
text-align:center;">
单个定义的CSS的居中段落。
</p>
<hr>
<a href="https://www.csdn.net/">常规链接</a><br>
<a href="https://www.csdn.net/" style="text-decoration:none;">CSS无下划线的链接</a><br>
<a href="https://www.csdn.net/"><p id="p1"><!--目录跳转标记-->
<img border="0" src="https://wx4.sinaimg.cn/mw690/428b3085gy1gt78e7adavj20rs0rmmya.jpg" alt="HTML 教程" width="85" height="85">
<!--无边框的图片链接-->
</p></a><br>
<hr>
<img src="https://wx3.sinaimg.cn/mw690/428b3085gy1gt78ed98gwj20j60h3my2.jpg" alt="闹脾气" height="200" width="200"/><!-- 一个图片 -->
<hr>
<table border="1" align="center" cellpadding="10" cellspacing="0">
<caption>街舞队长-水平表头</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>王一博</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>张艺兴</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<br>
<table border="1" align="center" cellpadding="10" cellspacing="0">
<caption>街舞队长-垂直表头</caption>
<tr>
<th>姓名</th>
<td>王一博</td>
<td>张艺兴</td>
<td>待填入</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
<td>男</td>
<td> </td>
</tr>
<tr>
<th>年龄</th>
<td>24</td>
<td>29</td>
<td> </td>
</tr>
</table>
<hr>
<ul style="list-style-type:square">
<li>无序表格</li>
<li>这是第二点</li>
<li>这是第三点</li>
</ul>
<br>
<ol start="83">
<li>有序表格</li>
<li>从83点开始</li>
<li>wow!</li>
</ol>
<br>
<ol type="A">
<li>这是第一点
<ul>
<li>这是第一点第一小点</li>
<li>这是第一点第二小点</li>
</ul>
</li>
<li>这是第二点</li>
<li>这是第三点</li>
</ol>
<br>
<dl>
<dt>1、这是自定义列表</dt>
<dd>! 一个描述</dd>
<dt>2、这是自定义列表</dt>
<dd>- 一个描述</dd>
</dl>
<br>
<ul>
<li><span style="color:blue">ul</span>是unordered lists的缩写 (无序列表)</li>
<li><span style="color:blue">li</span>是list item的缩写 （列表项目）</li>
<li><span style="color:blue">ol</span>是ordered lists的缩写（有序列表）</li>
<li><span style="color:blue">dl</span>是definition lists的英文缩写 (自定义列表)</li>
<li><span style="color:blue">dt</span>是definition term的缩写 (自定义列表组)</li>
<li><span style="color:blue">dd</span>是definition description的缩写（自定义列表描述）</li>
<li><span style="color:blue">nl</span>是navigation lists的英文缩写 （导航列表）</li>
<li><span style="color:blue">tr</span>是table row的缩写 （表格中的一行）</li>
<li><span style="color:blue">th</span>是table header cell的缩写 （表格中的表头）</li>
<li><span style="color:blue">td</span>是table data cell的缩写 （表格中的一个单元格）</li>
</ul>
<hr>
<form action="">
<select name="登录模式">
<option value="默认模式">默认模式</option>
<option value="极简模式">极简模式</option>
<option value="青少年模式" selected>青少年模式</option>
<option value="老年人模式">老年人模式</option>
</select><br>
<input type="radio" name="rules" value="yet">我已认真阅读并同意<a href="https://www.csdn.net/">规定</a>。<br>
账号: <input type="text" name="account"><br>
密码: <input type="password" name="password"><br>
<input type="checkbox" name="me" value="yes">是本人登录<br>
<input type="button" value="登录">
</form>
<hr>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<hr>
<h1>JavaScript </h1>
<p id="demo">
JavaScript:点击按钮触发事件。</p>
<script>
function myFunction1()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction1()">点我</button>
<br>
<script>
function myFunction2()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction2()">变色</button>
</body>
</html>
扫一扫
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
