我们要学习的是B/S架构!
我们要学习的是资源分类,先学习的是静态资源的HTML!
B/S架构详解(B/S架构如何进行访问?)
资源分类:
我们要学习动态资源,必须要先学习静态资源!
静态资源有哪些?(静态网页技术三剑客)
效果展示:
<html>
<head>
<title> titletitle>
head>
<body>
<font color='red'> Hello Worldfont><br/>
<font color='green'> Hello Worldfont>
body>
html>
这里需要借助一个文档《W3cschool菜鸟教程》
文件标签:构成html最基本的标签。
文本标签:和文本有关的标签
:段落标签。自带换行。
* width:宽度。
1. 数值:width='20',数值的单位,默认时px(像素)。表示20个像素。
2. 数值%:占比相对于父元素的比例。
图片标签:
列表标签:
链接标签:
div和span:块级标签和行内标签(结合CSS一起使用)
语义化标签:html5中为了提高程序的可读性,提供了一些标签(结合CSS一起使用)
表格标签:
代码1:文件标签。IDEA中创建模块。新建module–> Web --> 新建HTML file
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<font color='red'> Hello Worldfont><br/>
<font color='green'> Hello Worldfont>
body>
html>
代码2:文本标签
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签title>
head>
<body>
<font color='red'> 白日依山尽font><br/>
<font color='green'> 黄河入海流font>
<h1>黑马旅游网h1>
<h2>标题2h2>
<h3>标题3h3>
<h4>标题4h4>
<h6>标题6h6>
<p>盼望着,盼望着,东风来了,春天的脚步近了。 p>
<p>一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。p>
<p>小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草软绵绵的。p>
<hr color="red" width="200" size="10" align="left"/>
<hr color="red" width="20" size="10" align="left"/>
<hr color="red" width="50%" size="10" align="left"/>
<hr>
没加粗<br>
<b>加粗bb>
<br><br>
不是斜体<br>
<i>斜体ii>
<br><br>
<font color="aqua" size="5" face="宋体">
你看看我是什么字体呢!--宋体
font><br>
<font color="#FF00FF">
我的颜色很奇特哦!
font><br>
<center>
我能让文本居中哦!
center><br>
<center>
<font color="aqua" size="5" face="宋体">
包裹居中
font><br>
center>
body>
html>
代码3:文本标签案例:案例1_公司简介
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rFHU0ay-1662904835298)(en-resource://database/5731:1)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4MpZETpw-1662904835298)(en-resource://database/5733:1)]
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马程序员简介title>
head>
<body>
<h1>公司简介h1>
<hr color="#ffd700">
<p><font color="#FF0000">"中关村黑马程序员训练营"font>是由<i><b>传智播客b>i>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。<br>
目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。p>
<p>黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。p>
<p>一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。p>
<hr color="#ffd700">
<center><font color="#a9a9a9" size="2">江苏传智播客教育科技股份有限公司font>center>
<center><font color="#a9a9a9" size="2.5">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
body>
html>
代码4:图片标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签title>
head>
<body>
<img src="image/jingxuan_2.jpg" align="left" alt="古镇" width="500" height="500"/>
<img src="./image/jiangwai_1.jpg" height="500"/>
body>
html>
代码5:列表标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签title>
head>
<body>
早上起床干的事情:有序版
<ol type="1" start="5">
<li>1. 睁眼瞎li>
<li>2. 看手机li>
<li>3. 穿衣服li>
<li>4. 洗漱li>
<li>5. 这是一个有顺序的列表li>
ol>
早上起床干的事情:无序版
<ul type="disc">
<li>1. 睁眼瞎li>
<li>2. 看手机li>
<li>3. 穿衣服li>
<li>4. 洗漱li>
<li>5. 这是一个有顺序的列表li>
ul>
早上起床干的事情:无序版
<ul type="square">
<li>1. 睁眼瞎li>
<li>2. 看手机li>
<li>3. 穿衣服li>
<li>4. 洗漱li>
<li>5. 这是一个有顺序的列表li>
ul>
早上起床干的事情:无序版
<ul type="circle">
<li>1. 睁眼瞎li>
<li>2. 看手机li>
<li>3. 穿衣服li>
<li>4. 洗漱li>
<li>5. 这是一个有顺序的列表li>
ul>
body>
html>
代码6:链接标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接标签title>
head>
<body>
<a href="http://www.baidu.com">点我a><br>
<a href="1_HelloWorld.html" target="_self">点我a><br>
<a href="1_HelloWorld.html" target="_blank">点我哦a><br>
<a href="mailto:2079930908@qq.com">联系我们a><br>
<a href="http://www.baidu.com" target="_blank"> <img src="image/jiangxuan_3.jpg">a>
body>
html>
代码7:div和span
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签title>
head>
<body>
<span>黑马程序员span>
<span>传智播客span>
<hr>
<div>黑马程序员div>
<div>传智播客div>
body>
html>
代码8:语义化标签
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马程序员简介title>
head>
<body>
<header>
<div id="header">
<h1>公司简介h1>div>header>
<hr color="#ffd700">
<p><font color="#FF0000">"中关村黑马程序员训练营"font>是由<i><b>传智播客b>i>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。<br>
目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。p>
<p>黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。p>
<p>一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。p>
<hr color="#ffd700">
<footer>
<div id="footer">
<center><font color="#a9a9a9" size="2">江苏传智播客教育科技股份有限公司font>center>
<center><font color="#a9a9a9" size="2.5">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
div>footer>
body>
html>
代码9:表格标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签title>
head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" align="center">
<tr>
<th>编号th>
<th>姓名th>
<th>成绩th>
tr>
<tr>
<td>1td>
<td>小龙女td>
<td>100td>
tr>
<tr>
<td>2td>
<td>杨过td>
<td>50td>
tr>
table>
body>
html>
代码10:表格标签2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签title>
head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" align="center">
<tr>
<th>编号th>
<th>姓名th>
<th>成绩th>
tr>
<tr>
<td>1td>
<td>小龙女td>
<td>100td>
tr>
<tr>
<td>2td>
<td>杨过td>
<td>50td>
tr>
table>
<hr>
<thead>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" align="center">
<caption>学生信息表caption>
<tr>
<th>编号th>
<th>姓名th>
<th>成绩th>
tr>thead>
<tbody>
<tr bgcolor="#7fffd4" align="center">
<td>1td>
<td>小龙女td>
<td>100td>
tr>tbody>
<tfoot>
<tr>
<td>2td>
<td>杨过td>
<td>50td>
tr>tfoot>
table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" >
<caption>学生信息表caption>
<tr>
<th rowspan="2">编号th>
<th>姓名th>
<th>成绩th>
tr>
<tr>
<td>小龙女td>
<td>100td>
tr>
<tr>
<td>2td>
<td colspan="2">杨过td>
tr>
table>
body>
html>
代码11:综合案例 旅游网站首页
作业:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xccEC2pL-1662904835299)(en-resource://database/5747:1)]
分析:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网title>
head>
<body>
<table width="100%" align="center">
<tr>
<td>
<img src="image/top_banner.jpg" width="100%">
td>
tr>
<tr>
<td>
<table width="100%" align="center">
<tr align="center">
<td><img src="image/logo.jpg" alt="">td>
<td><img src="image/search.png" alt="">td>
<td><img src="image/hotel_tel.png" alt="">td>
tr>
table>
td>
tr>
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45">
<td>
<a href="">首页a>
td>
<td>门票td>
<td>门票td>
<td>门票td>
<td>门票td>
<td>门票td>
<td>门票td>
<td>门票td>
<td>门票td>
<td>门票td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
td>
tr>
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
黑马精选
<hr color="#ffd700">
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#ffd700">
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700">
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
td>
tr>
<tr>
<td>
<center><font color="#a9a9a9" size="2">江苏传智播客教育科技股份有限公司font>center>
<center><font color="#a9a9a9" size="2.5">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
td>
tr>
table>
body>
html>

——此文档为学习笔记!