黑马html笔记

今日任务

网站信息页面案例

网站图片信息页面案例

网站友情链接页面案例

网站首页案例

网站注册页面案例

网站后台页面案例

教学导航

了解什么是标记语言
了解HTML主要特性，主要变化以及发展趋势
了解HTML的结构标签
掌握HTML的主要标签（字体，图片，列表，链接，表单等标签）

1.网站信息页面

1.1需求分析:

我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息

1.2技术分析:

HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>

为什么要学习HTML:

生活所迫,今天的课程,群英妹子不让回家.

HTML的主要作用:

设计网页的基础,HTML5

HTML语法规范

<!--
    1. 上面是一个文档声明 
    2. 根标签 html
    3. html文件主要包含两部分. 头部分和体部分
        头部分 : 主要是用来放置一些页面信息
        体部分 : 主要来放置我们的HTML页面内容
    4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
    5. 标签不区分大小写, 官方建议使用小写
-->

1.3步骤分析:

公司简介需要标题
水平分割线
四个段落
第一个段落字体需要红色

1.4代码实现:

<html>
    <head>
        <meta charset="UTF-8">
        <title>网站信息页面</title>
    </head>
    <body>
        <!--
            1. 公司简介 需要标题
            2. 水平分割线
            3. 四个段落
            4. 第一个段落字体需要红色
        -->
        <h3>公司简介</h3>

        <hr />
        <p>
        <font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
        </p>
        <p>
        <strong>黑马程序员</strong>的学员多为大学毕业后，<em>有理想、有梦想，</em>想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
        </p>
        <p>
        中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
        </p>
        <p>
        一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
        </p>
    </body>
</html>

1.5 扩展内容

? b : 加粗

? i : 斜体

? strong: 加粗, 带语义标签

em:  斜体, 带语义

2.网站图片信息

2.1需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

2.2技术分析

img 标签:

? 常用的属性;

? width : 宽度

? height: 高度

? src : 指定文件路径

? alt: 图片加载失败时的提示内容

2.3步骤分析

2.4代码实现

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <!--
 9             常用属性:
10                 src : 指定图片路径
11                 width : 指定图片宽度
12                 height : 图片高度
13                 alt : 文件加载失败时的提示信息
14         -->
15         <img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
16     </body>
17 </html>
18 
19 
20 <!DOCTYPE html>
21 <html>
22     <head>
23         <meta charset="UTF-8">
24         <title></title>
25     </head>
26     <body>
27         <!--在网页中显示图片-->
28         <img src="../img/logo2.png" width="30%"/>
29         <img src="../image/header.jpg" width="30%" />
30     </body>
31 </html>

2.5 扩展-文件路径

相对路径

        ./      代表的是当前路径
        ../     代表的上一级路径
        ../../  上上一级路径

3.网站友情链接页面

3.1需求分析

在我们的网站中,通常会显示友商公司的网站链接

百度
新浪微博
黑马程序员

3.2技术分析

列表标签:

? 无序列表: ul

? type: 小圆圈,小圆点, 小方块

? 有序列表: ol

? type: 1,a ,A,I,

? start : 指定是起始索引

3.3步骤分析

3.4代码实现

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <!--
 8         1.使用无序列表
 9             百合网
10             世纪家园
11             珍爱网
12             非诚勿扰
13     -->
14     <body>
15         <ul>
16             <li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
17             <li><a href="http://www.jiayuan.com">世纪家园</a></li>
18             <li>珍爱网</li>
19             <li>非诚勿扰</li>
20         </ul>
21     </body>
22 </html>

3.5 扩展内容

? 点击链接,跳转去指定网站

? a 超链接标签

? 常用的属性:

? href: 指定要跳转去的链接地址

? 如果是网络地址需要加上http协议 ,

? 如果访问的是本网站的html文件,可以直接写文件路径

? target : 以什么方式打开

? _self: 默认打开方式,在当前窗口打开

? _blank: 新起一个标签页打开页面

上午内容回顾:

网站信息案例
- 字体标签 font
- color: 颜色
- size: 大小 1~7
- face: 改变字体
- p 段落标签
- h标题标签 : 1~6
- br 换行
- hr 水平线
- b 加粗
- i 斜体
- strong : 加粗包含语义
- em : 斜体包含语义
网站图片案例
- img标签
- src : 指定图片的路径
- width: 宽度
- height: 高度
- alt : 图片加载错误时的提示信息
- 相对路径:
- ./ 代表的是当前路径
- ../ 代表的上一级路径
- ../../ 代表的上上一级路径
友情链接:
- ul: 无序列表
- type :
- ol: 有序列表
- type : 样式
- start : 起始索引
- li : 列表项
- a 超链接标签
- href : 要访问的链接地址
- target : 打开方式
网站首页
- table标签
- border: 指定边框
- width : 宽度
- height : 高度
- bgcolor : 背景颜色
- align : 对齐方式
- tr标签
- td标签
- colspan: 跨列操作
- rowspan: 跨行操作
- 表格单元格的合并
- 表格的嵌套

4.网站首页

4.1需求分析:

? 根据产品文档,完成商城首页,显示效果如图:

4.2技术分析:

表格标签table

? table标签:

? 常用的属性:

? bgcolor : 背景色

? width : 宽度

? height : 高度

? align : 对齐方式

? tr 标签

? td 标签

合并单元格:

? colspan : 跨列操作

? rowspan : 跨行操作

? 注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

表格的嵌套:

? 在td中可以嵌套一个表格

4.3步骤分析

创建一个8行一列的表格
第一部份: LOGO部分: 嵌套一个一行三列的表格
第二部分: 导航栏部分 : 放置5个超链接
第三部分: 轮播图
第四部分: 嵌套一个三行7列表格
第五部分: 直接放一张图片
第六部分: 抄第四部分的
第七部分: 放置一张图片
第八部分: 放一堆超链接

4.4代码实现

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6 
  7     </head>
  8     <body>
  9         <!--
 10             1. 创建一个8行一列的表格
 11             2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
 12             3. 第二部分: 导航栏部分 : 放置5个超链接
 13             4. 第三部分: 轮播图 
 14             5. 第四部分: 嵌套一个三行7列表格
 15             6. 第五部分: 直接放一张图片
 16             7. 第六部分: 抄第四部分的
 17             8. 第七部分: 放置一张图片
 18             9. 第八部分: 放一堆超链接
 19         -->
 20         <table  width="100%" >
 21             <!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
 22             <tr>
 23                 <td>
 24                     <table  width="100%">
 25                         <tr>
 26                             <td>
 27                                 <img src="../img/logo2.png" />
 28                             </td>
 29                             <td>
 30                                 <img src="../image/header.jpg" />
 31                             </td>
 32                             <td>
 33                                 <a href="#">登录</a>
 34                                 <a href="#">注册</a>
 35                                 <a href="#">购物车</a>
 36                             </td>
 37                         </tr>
 38                     </table>
 39                 </td>
 40             </tr>
 41             <!--第二部分: 导航栏部分 : 放置5个超链接-->
 42             <tr bgcolor="black">
 43                 <td height="50px">
 44                     <a href="#"><font color="white">首页</font></a>
 45                     <a href="#"><font color="white">手机数码</font></a>
 46                     <a href="#"><font color="white">鞋靴箱包</font></a>
 47                     <a href="#"><font color="white">电脑办公</font></a>
 48                     <a href="#"><font color="white">香烟酒水</font></a>
 49                 </td>
 50             </tr>
 51             <!--第三部分: 轮播图 -->
 52             <tr>
 53                 <td>
 54                     <img src="../img/1.jpg" width="100%" />
 55                 </td>
 56             </tr>
 57             <!--第四部分: 嵌套一个三行7列表格-->
 58             <tr>
 59                 <td>
 60                     <table  width="100%" height="500px"> 
 61                         <tr>
 62                             <td colspan="7">
 63                                 <h3>最新商品<img src="../img/title2.jpg"></h3>
 64                             </td>
 65                         </tr>
 66                         <tr align="center">
 67                             <!--左边大图的-->
 68                             <td rowspan="2" width="206px" height="480px">
 69                                 <img src="../products/hao/big01.jpg" />
 70                             </td>
 71                             <td colspan="3" height="240px">
 72                                 <img src="../products/hao/middle01.jpg" width="100%" height="100%" />                               
 73                             </td>
 74                             <td>
 75                                 <img src="../products/hao/small06.jpg" />
 76                                 <p>洗衣机</p>
 77                                 <p><font color="red">$998</font></p>
 78                             </td>
 79                             <td>
 80                                 <img src="../products/hao/small06.jpg" />
 81                                 <p>洗衣机</p>
 82                                 <p><font color="red">$998</font></p>
 83                             </td>
 84                             <td>
 85                                 <img src="../products/hao/small06.jpg" />
 86                                 <p>洗衣机</p>
 87                                 <p><font color="red">$998</font></p>
 88                             </td>
 89                         </tr>
 90                         <tr align="center">
 91 
 92                             <td>
 93                                 <img src="../products/hao/small06.jpg" />
 94                                 <p>洗衣机</p>
 95                                 <p><font color="red">$998</font></p>
 96                             </td>
 97                             <td>
 98                                 <img src="../products/hao/small06.jpg" />
 99                                 <p>洗衣机</p>
100                                 <p><font color="red">$998</font></p>
101                             </td>
102                             <td>
103                                 <img src="../products/hao/small06.jpg" />
104                                 <p>洗衣机</p>
105                                 <p><font color="red">$998</font></p>
106                             </td>
107                             <td>
108                                 <img src="../products/hao/small06.jpg" />
109                                 <p>洗衣机</p>
110                                 <p><font color="red">$998</font></p>
111                             </td>
112                             <td>
113                                 <img src="../products/hao/small06.jpg" />
114                                 <p>洗衣机</p>
115                                 <p><font color="red">$998</font></p>
116                             </td>
117                             <td>
118                                 <img src="../products/hao/small06.jpg" />
119                                 <p>洗衣机</p>
120                                 <p><font color="red">$998</font></p>
121                             </td>
122                         </tr>
123                     </table>
124                 </td>
125             </tr>
126             <!--第五部分: 直接放一张图片-->
127             <tr>
128                 <td>
129                     <img src="../products/hao/ad.jpg" width="100%" />
130                 </td>
131             </tr>
132             <!--第六部分: 抄第四部分的-->
133             <tr>
134                 <td>
135                     <table  width="100%" height="500px"> 
136                         <tr>
137                             <td colspan="7">
138                                 <h3>热门商品<img src="../img/title2.jpg"></h3>
139                             </td>
140                         </tr>
141                         <tr align="center">
142                             <!--左边大图的-->
143                             <td rowspan="2" width="206px" height="480px">
144                                 <img src="../products/hao/big01.jpg" />
145                             </td>
146                             <td colspan="3" height="240px">
147                                 <img src="../products/hao/middle01.jpg" width="100%" height="100%" />                               
148                             </td>
149                             <td>
150                                 <img src="../products/hao/small06.jpg" />
151                                 <p>洗衣机</p>
152                                 <p><font color="red">$998</font></p>
153                             </td>
154                             <td>
155                                 <img src="../products/hao/small06.jpg" />
156                                 <p>洗衣机</p>
157                                 <p><font color="red">$998</font></p>
158                             </td>
159                             <td>
160                                 <img src="../products/hao/small06.jpg" />
161                                 <p>洗衣机</p>
162                                 <p><font color="red">$998</font></p>
163                             </td>
164                         </tr>
165                         <tr align="center">
166 
167                             <td>
168                                 <img src="../products/hao/small06.jpg" />
169                                 <p>洗衣机</p>
170                                 <p><font color="red">$998</font></p>
171                             </td>
172                             <td>
173                                 <img src="../products/hao/small06.jpg" />
174                                 <p>洗衣机</p>
175                                 <p><font color="red">$998</font></p>
176                             </td>
177                             <td>
178                                 <img src="../products/hao/small06.jpg" />
179                                 <p>洗衣机</p>
180                                 <p><font color="red">$998</font></p>
181                             </td>
182                             <td>
183                                 <img src="../products/hao/small06.jpg" />
184                                 <p>洗衣机</p>
185                                 <p><font color="red">$998</font></p>
186                             </td>
187                             <td>
188                                 <img src="../products/hao/small06.jpg" />
189                                 <p>洗衣机</p>
190                                 <p><font color="red">$998</font></p>
191                             </td>
192                             <td>
193                                 <img src="../products/hao/small06.jpg" />
194                                 <p>洗衣机</p>
195                                 <p><font color="red">$998</font></p>
196                             </td>
197                         </tr>
198                     </table>
199                 </td>
200             </tr>
201             <!-- 第七部分: 放置一张图片-->
202             <tr>
203                 <td>
204                     <img src="../image/footer.jpg" width="100%" />
205                 </td>
206             </tr>
207             <!--第八部分: 放一堆超链接-->
208             <tr>
209                 <td align="center">
210 
211                     <a href="#">关于我们</a>
212                     <a href="#">联系我们</a>
213                     <a href="#">招贤纳士</a>
214                     <a href="#">法律声明</a>
215                     <a href="#">友情链接</a>
216                     <a href="#">支付方式</a>
217                     <a href="#">配送方式</a>
218                     <a href="#">服务声明</a>
219                     <a href="#">广告声明</a>
220                     <br />
221 Copyright ? 2005-2016 传智商城 版权所有
222                 </td>
223             </tr>
224         </table>
225     </body>
226 </html>

5.网站注册页面:

5.1需求分析:

? 编写一个HTML页面, 显示效果如图所示

5.2技术分析:

表单标签

<!--
        表单标签
            action : 直接提交的地址
 
            method : 
                    get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
                    post 方式  会将参数封装在请求体中, 没有这样的限制
 
        input :
            type: 指定输入项的类型
                text : 文本
                password :  密码框
                radio :     单选按钮
                checkbox :  复选框
                file     : 上传文件
                submit   : 提交按钮
                button   : 普通按钮
                reset    : 重置按钮
                hidden  : 隐藏域
 
                date    : 日期类型
                tel     : 手机号
                number   : 只允许输入数字
 
            placeholder : 指定默认的提示信息
            name : 在表单提交的时候,当作参数的名称
            id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
 
        textarea : 文本域, 可以输入一段文本
                    cols : 指定宽度
                    rows : 指定的是高度
 
        select  : 下拉列表
            option : 选择项
    -->
?

步骤分析:

logo部分
导航栏
注册部分
页脚图片
网站声明信息

5.3代码实现:

 1 <form action="注册入门案例.html">
 2   <table width="60%" align="center"> 
 3     <tr>
 4       <td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
 5     </tr>
 6     <tr>
 7       <td>用户名:</td>
 8       <td>
 9         <input type="text"  placeholder="请输入用户名"/>
10       </td>
11     </tr>
12     <tr>
13       <td>密   码:</td>
14       <td>
15         <input type="password"  placeholder="请输入密码"/>
16       </td>
17     </tr>
18     <tr>
19       <td>确认密码:</td>
20       <td>
21         <input type="password"  placeholder="请再次输入密码"/>
22       </td>
23     </tr>
24     <tr>
25       <td>email:</td>
26       <td>
27         <input type="text"  placeholder="请输入邮箱"/>
28       </td>
29     </tr>
30     <tr>
31       <td>姓名:</td>
32       <td>
33         <input type="text"  placeholder="请输入真实姓名"/>
34       </td>
35     </tr>
36     <tr>
37       <td>性别:</td>
38       <td>
39         <input type="radio" name="sex" /> 男
40         <input type="radio" name="sex" /> 女
41         <input type="radio" name="sex" /> 妖
42       </td>
43     </tr>
44     <tr>
45       <td>出生日期:</td>
46       <td>
47         <input type="date"  />
48       </td>
49     </tr>
50     <tr>
51       <td>验证码:</td>
52       <td>
53         <input type="text"  />
54       </td>
55     </tr>
56     <tr>
57       <td></td>
58       <td>
59         <input type="submit" value="注册"  />
60       </td>
61     </tr>
62   </table>
63 </form>

6.网站后台页面展示

6.1需求分析:

我们前面已经做完了首页商品展示, 那么我们需要一个页面用来编辑我们的商品信息, 还有商品分类, 用户购买之后,还得有订单管理页面

6.2技术分析

框架标签: frameset

注意: 使用了frameset必须将body删掉,否则页面会有问题

frame 常用属性:

? src: 引入的html文件路径 ? name: 指定框架的名称

6.3步骤分析

6.4代码实现

扩展

框架中点击跳转

常用的快捷键

Ctrl + D                    删除光标当前所在的行
Ctrl + Shift + R            复制当前行到下一行
Ctrl + Enter                将光标移动到下一行
Ctrl + Shift + Enter        将光标定位在上一行
Ctrl + Shift + /            注释当前行
Ctrl + R                    运行当前网页/刷新当前网

posted @ 2019-05-21 14:17 Domefy 阅读(933) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）

公告

昵称： Domefy
园龄： 6年4个月
粉丝： 21
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六