前端基础知识（上）
图片是运行后的效果：
源代码及其注释：
<!DOCTYPE html>
<!-- document type html (html5 plus) -->
<!-- head:头 引入非当前html页面的代码 描述当前页面的属性 -->
<head>
<!-- meta:页面编码集 自结束标签 内容无意义，无法嵌套 -->
<!-- 打开速度越快，搜索时排名越高 -->
<meta charset="utf-8" />
<!-- 标题 -->
<title>前端基础知识（上）</title>
</head>
<!--主体：一切给用户看到的东西都写在body标签里
标签名 表示是一个什么东西，干什么的
由开始标签 结束标签 属性标签 属性属性的值 以及内容层层嵌套-->
<!--文字 图片 多媒体 输入框（表单组件）
超链接 表格 有序列表 无序列表-->
<body>
<!-- 1.用Tab键激活emmet语法插件（快捷键语法） -->
<!-- 2.编译器提供的另一种快捷键语法：通过编译器代码块激活 -->
<!-- 块级标签：h p （默认情况下不允许有其他标签与他显示在同一行）-->
<!-- 行内标签：span (可以嵌套自己，不能嵌套块级)-->
<!-- 这是一个段落 -->
<p><center>Hello world</center>
<!-- 空格 -->><!-- 大于号 --><<!-- 小于号 -->
<hr/> <!-- 水平分割线-->
<br/>这是我的第一行html代码 <!-- 换行-->
</p>
<!-- <span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。 -->
<p>应用<Span>标签可以把段落中的某部分做成<span style="color:blue;font-weight:bold">蓝色（包括但不限于）</span>的。 </p>
<!-- p标签（空）：小文本框 -->
<!-- span标签（空）：大文本框-->
<!-- h1-h6 六级标题 -->
<h1>一级标题</h1>
<h4>四级标题（默认字体）</h4>
<h6 id="h6">六级标题</h6>
<!-- 练习 -->
<p title="静夜思">
<p> 静夜思
<br> 李白
<br>要是能重来，我要选李白。
</p>
<!-- 图片 本地引入(相对路径：Alt+?)（适用于中小型网站）
/网上引入（CDN服务全部使用网络地址从边缘服务器获取图片，速度更快）
-->
<!-- 超链接 -->
<!-- _blank(新开标签页) -->
<!-- _self本身标签页跳转 -->
<a href="//www.runoob.com" target="_blank">菜鸟教程
<img src="img/csdn-cxrs.png" height="80px" alt="图片无法加载" title="点击图片查看下一页" >
</a>
<!-- 近几年少见-->
<br><a href="mailto:420307324@qq.com">发送邮件</a>
<!-- table表示开始到结束是一个表格内容 -->
<!-- 矩阵表列（不带框框） -->
<table ><!-- border(框线） -->
<tr>
<td>(0,0)</td>
<td>(0,1)</td>
</tr>
<tr>
<td>(1,0)</td>
<td>(1,1)</td>
</tr>
</table>
<hr>
<!-- 姓名学号列表 -->
<table border="border">
<tr>
<th colspan="2">姓名</th>
<th colspan="15">学号</th>
</tr>
<tr>
<td colspan="2">柴政</td>
<td colspan="15">3118004950</td>
</tr>
</table>
<hr>
<!-- 真值表 -->
<table border="border">
<tr>
<th>元素</th>
<th>真值</th>
<th>与门</th>
<th>或门</th>
<th>异或</th>
</tr>
<tr>
<td><center>A</center></td>
<td><center>1</center></td>
<td rowspan="2"><center>0</center></td>
<td rowspan="2"><center>1</center></td>
<td rowspan="2"><center>1</center></td>
</tr>
<tr>
<td><center>B</center></td>
<td><center>0</center></td>
</tr>
</table>
<!-- 无序列表 -->
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<!-- 锚点 -->
<!-- 点击“top”键回到h6标题处 -->
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<a id="top" href="#h6">top</a>
</body>
一个简单的练习DEMO：
美味口水鸡
口水鸡是中国四川地区汉族特色菜肴，
属于川菜系中的凉菜，佐料丰富，集麻辣鲜香嫩爽于一身。
在烹制时，煮鸡用的汤料很有讲究，需要恰到好处，
这样可以最大限度地保存鸡的可溶性蛋白，增加鸡肉的鲜美程度，又能具备其特有的香型和滋味。
准备材料
- 武定壮鸡
- 花生米
- 料酒
- 油
- 姜
- 葱
- 蒜
|
|
|
|
|
|
|
|
制作步骤
- 洗净鸡腿入锅，料酒适量，凉水淹过，大火烧开，出净血沫
- 冷水冲洗
- 凉水入锅，葱姜适量，大火烧开，煮沸捞出（滚水不要倒掉）
- 放入沸水中，大火烧开，煮沸，小火加盖烧5分钟，熄火闷10分钟
- 捞出鸡腿入冰块中，冰镇20分钟（冰块尽量全部覆盖）
- （冰镇过程中我们来准备调料）冷油入花生米煎炸
- 搓去外皮切碎，备用，锅中油小火，入花椒5g、
干辣椒10粒、八角2颗、桂皮一段、香叶2片，煸出香味后丢掉 - 调汁，加入适量花生碎；鸡腿肉切成2cm的长条状摆盘，调汁淋入即可
源代码
<!DOCTYPE html>
<!--
标题（菜名）
图片
分割线
描述
用料（无序列表）
步骤（有序列表）
-->
<html>
<head>
<meta charset="utf-8" />
<title>口水鸡做法</title>
</head>
<body>
<h1 id="h1"> 美味口水鸡</h1>
<img src="img/chic.jpg" height="400" alt="对不起,您的口水鸡走丢啦!">
<hr>
<p>口水鸡是中国四川地区汉族特色菜肴，
<br>属于川菜系中的凉菜，佐料丰富，集麻辣鲜香嫩爽于一身。
<br> 在烹制时，煮鸡用的汤料很有讲究，需要恰到好处，
<br>这样可以最大限度地保存鸡的可溶性蛋白，增加鸡肉的鲜美程度，又能具备其特有的香型和滋味。
</p>
<h2>准备材料</h2>
<ul>
<li><a href="http://www.chuxiong.cn/lyylpd/ltfx/903999.shtml" target="_blank">武定壮鸡</a></li>
<li>花生米</li>
<li>料酒</li>
<li>油</li>
<li>姜</li>
<li>葱</li>
<li>蒜</li>
</ul>
<table border="border">
<tr>
<td><center> 花生 </center></td>
<td><center> 姜 </center></td>
<td><center> 油 </center></td>
</tr>
<tr>
<td><center> 料酒 </center></td>
<td><center> 葱 </center></td>
<td><center> 蒜 </center></td>
</tr>
</table>
<h2>制作步骤</h2>
<ol>
<li>洗净鸡腿入锅，料酒适量，凉水淹过，大火烧开，出净血沫</li>
<li>冷水冲洗</li>
<li>凉水入锅，葱姜适量，大火烧开，煮沸捞出（滚水不要倒掉）</li>
<li>放入沸水中，大火烧开，煮沸，小火加盖烧5分钟，熄火闷10分钟</li>
<li>捞出鸡腿入冰块中，冰镇20分钟（冰块尽量全部覆盖）</li>
<li>（冰镇过程中我们来准备调料）冷油入花生米煎炸</li>
<li>搓去外皮切碎，备用，锅中油小火，入花椒5g、<br>干辣椒10粒、八角2颗、桂皮一段、香叶2片，煸出香味后丢掉</li>
<li>调汁，加入适量花生碎；鸡腿肉切成2cm的长条状摆盘，调汁淋入即可</li>
</ol>
<p><a href="https://home.meishichina.com/recipe-187138.html" target="_blank">原文链接</a></p>
<a id=返回顶端 href="#h1">返回顶端</a>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
