WEBBASIC-HTML01

开发的网站包含哪些内容：

1.页面

2.业务逻辑

3.数据存储

网站架构

-BS：Browser Server 浏览器——服务器

优点：跨平台，不用下载客户端，升级方便

缺点：操作不方便，响应速度较慢，功能较少

-CS:Client Server 客户端-服务器

优点：操作方便，访问速度相对快（客户端本身存在

一些数据），提供用户体验度

缺点：功能升级需下载新版本，开发成本高

HTML

-HyperText Markup Language超文本标记语言：最

简单的语言

-超文本：指不仅仅包含文本，还包含颜色，字体

，图片，音视频

常用标签

1.文本标签

标题<h1><h2>......<h6>

段落标签：<p></p>

水平线<hr> 网页中一条水平分割线

标签中的align为对齐方式，若align="center"，则表示对齐

方式为居中对齐

<dt> </dt>difine list 定义列表

中间放小标题名字

<dd></dd>dedine tdata定义内容

中间放内容

无序列表

<ul> 无序列表

<li>内容

有序列表

<ol>有序列表

<li>内容

区别：有序列表会在表内容前面加序号

在ol中添加属性type：可以设置标签li前面的样式

ol中属性start：设置标签li开始的数

列表的嵌套：在无序li标签中加入有序或者无序列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>层级列表</h2>
<dr><!-- difine list 定义列表 -->
<dt>一级标题</dt><!-- dedine title 定义标题 -->
<dd>数据内容</dd><!-- define data 定义数据 -->
<dd>数据内容</dd>
<dd>数据内容</dd>
<dt>一级标题</dt>
<dd>数据内容</dd>
<dd>数据内容</dd>
<dd>数据内容</dd>
<dt>
</dr><hr><h2>菜单</h2>
<dl>
<dt>凉菜</dt>
<dd>拍黄瓜</dd>
<dd>木耳凉拌</dd>
<dd>凉拌黄瓜</dd>
<dt>炒菜</dt>
<dd>鱼香肉丝</dd>
<dd>香菇肉丝盖浇饭</dd>
<dd>青椒牛柳</dd>
</dl><hr><h2>无序列表</h2>
<ul type="circle"><!-- type控制显示样式，有none：没有样式、
disc：默认实心圆、circle：空心圆 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul><hr><h2>掌握技能</h2>
<ul>
<li>Java全懂</li>
<li>最强王者</li>
<li>把把吃鸡</li>
</ul><hr><h2>有序列表</h2>
<ol type="I"><!-- type的类型：默认数字，a：小写字母
A:大写字母  i：小写罗马字母  I：大写罗马字符 -->
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol><hr><h2>把大象装冰箱分几步</h2>
<ol type="I" start="3">
<li>打开冰箱门</li>
<li>把大象装进去</li>
<li>关上冰箱门</li>
</ol><hr><h2>列表嵌套菜单</h2>
<ul>
<li>凉菜</li>
<ol typy="I">
<li>拍黄瓜</li>
<li>老醋花生</li>
</ol>
<li>炒菜</li>
<ol type="a">
<li>烧茄子</li>
<li>木耳肉丝</li>
</ol><li>炖菜</li>
<ol type="A">
<li>水煮肉片</li>
<li>东北乱炖</li>
</ol>
</ul><hr><!-- 练习 -->
<h2>课程介绍</h2>
<ol>
<li>java基础</li>
<ul>
<li>变量</li>
<ol type="I">
<li>int</li>
<li>long</li>
<li>double</li>
<li>boolean</li>
<li>char</li>
<li>short</li>
<li>float</li>
<li>byte</li></ol><li>数据基础</li>
<li>运算符</li>
<ul type="square">
<li>+</li>
<li>-</li>
<li>*</li>
<li>/</li>
<li>+=</li>
<li>-=</li>
<li>*=</li>
<li>+/=</li>
</ul>
<li>流程控制</li>
<ul>
<li>if</li>
<li>switch</li>
<li>while</li>
<li>for</li>
</ul>
</ul>
<li>面向对象</li>
<li>javaAPI</li>
</ol><hr>
<!-- 练习 -->
<ul>
<li>我的订单</li>
<ul>
<li>我的订单</li>
<li>待付款</li>
<li>待收货</li>
<li>待评价</li>
<li>退款退货</li>
</ul>
<li>我的优惠券</li>
<li>收货地址</li>
<ul>
<li>更改地址</li>
<li>删除地址</li>
</ul><li>账号管理</li>
<ul>
<li>我的信息</li>
<li>安全管理</li>
</ul>
</ul></body>
</html>

2.分区标签（元素） div

用来装显示的内容的，元素本身没有显示效果，使用分区标签

将页面内容分为几块，好处是便于对内容批量管理

-div ：独占一行

-span：一行可以有多个

-html5的标准中新增了几个分区标签为了提高代码的可读性

1.header 头

2.article 文章/正文

3.footer 脚

标签分类

1.块级元素：独占一行的元素

-例如：div，p，h1-6，hr

2.行内元素：可以和其他行内元素攻占一行的元素

例如：span

<i>和<em>标签，放在其中的文本为斜体

<b>和<strong>字体加粗

<u>下划线

<del>和<s>删除线

常见特殊字符：

空格：行内元素的空格折叠现象：多个空格合并成一个空格

若想显示多个空格，则需使用： &nbsp；

空格：&nbsp ；

< :&lt

> :&gt

换行： <br>

图片标签：

alt：表示图片不能正常显示的时候显示的文本

src：图片的路径

title：当查看图片时鼠标移动到图片上提示的内容

width/height：设置图片的宽高，单位为px像素或者百分比

如果只设置宽则高度会按照原比例缩放（宽直接设置像素，单位px，高设置百分比）

支持的图片格式：jpg（不支持透明色，图片四周矩

形），gif（支持透明色），gif（动图）

例如：<img alt="龟兔赛跑" src="../b.jpg" title="龟兔赛跑">

1.相对路径：相当与当前的页面文件，如果是同级文件直接写文件名

如果是上级文件则../文件名如果是下级文件夹名/文件名

2.绝对路径：完整路径，如果访问的图片是站外资源，必须使用绝对路径

这种成为盗链，好处是不战自家资源，坏处别人换地址自己就不显示

<map>图像地图：可以将图片的某个区域作为可以点击的链接

页面中添加一张图片，鼠标悬停在图片的指定区域时，点击图片，页面

调转到map中给定路径的图片上

<map>中的name和id属性：表示地图的唯一表示，把地图给到图片的时候使用

shape：表示指定区域的形状圆，矩形...

coords：表示坐标

href：链接地址，可以是相对路径，也可以是绝对路径

href可以指向的内容有：1.可以指向一张图片 2.可以指向一个页面3.给定一个非图片任意文件会自动下载

（系统能查看的格式则自动显示，不能查看的格式则自动下载，例如压缩包）

例：

含义：在查看图片img中的路径src为a.jpg图片时，当鼠标悬停在以50.50为原点

半径为40的圆内时，点击该区域，将跳转至herf（路径），查看b.jpg图片（如果

写的是某网址，也可以直接跳转）。当鼠标移动到对角线坐标为110.110与330.330

矩形内时，点击区域则直接跳转herf路径查看c.jpg

超链接

链接其他网页

在<a>标签中加入href属性，后面为相对路径或者绝对路径，则点击a标签内容时则自动跳转

href中的路径。href中如果是#则代表当前页面

如果加入target属性，target=“_blank”时，则打开的该路径会新创一个窗口

链接本网页：返回顶部

<a id="top" name="top"> </a> 下锚，即设置返回的地方

注：标签中的id或者name属性为了让本页中某处迅速找到该处，href则可以实现链接作用，当用户点了

标签中间的文字时，可以迅速跳转至href处网址

表格<table>

table属性：

border属性：使表格有外边框，其值影响边框线的粗细，默认值为0

cellspacing属性：单元格间距和单元格距外边框的距离

cellpadding属性：内容与单元格边框的距离

td属性：

在td标签中加入colspan属性，其值等于2时，合并两列的宽度，相当于合并单元格

在tr标签中加入rowspan属性，其值等于2时，合并两行的高度，相当于横向合并单元格

小练习：环形图

<table  cellspacing="0" cellpadding="5" border="2">
<tr >
<td rowspan="2">1-1</td>
<td colspan="2">1-2</td>
</tr>
<tr>
<td>2-1</td>
<td rowspan="2">2-3</td>
</tr>
<tr>
<td colspan="2">3-1</td>
</tr>
</table>

课程表：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td>项目</td><td colspan="5" align="center">上课</td><td colspan="2" align="center">休息</td>
</tr><tr>
<td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td>
</tr><tr>
<td rowspan="4">上午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="4">休息</td>
</tr><tr>
<td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td>
</tr><tr>
<td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td>
</tr><tr>
<td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td>
</tr><tr>
<td rowspan="2">下午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="2">休息</td>
</tr><tr>
<td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td>
</tr></table></body>
</html>

转载于:https://www.cnblogs.com/chenzhiwei/p/9591625.html

WEBBASIC-HTML01相关推荐

Java小白修炼手册--第三阶段--WebBasic( Web前端)--CSS
目录 WebBasic 网页编程基础 CSS: 引入方式: 选择器: 颜色赋值背景图片文本和字体相关元素显示方式display 圆角盒子模型 CSS的三大特性定位方式: 行内元素的垂直对齐 ...
WEBBASIC Unit01 Web概述、 HTML概述、文本处理、图像和超链接、表格、表单
转载:https://blog.csdn.net/qq_38131668/article/details/73505925 参考:https://www.cnblogs.com/xiaziteng/p ...
Java（HTML01）
Java(HTML01) 参考视频:HTML5完整教学通俗易懂(狂神) 1. 初识HTML 1.1 什么是HTML HTML Hyper Text Markup Language(超文本标记语言) 1 ...
WEBBASIC Unit02 CSS 概述、 CSS 语法、 CSS 选择器、 CSS声明
一.RGB 补充1:W3C中文官方手册 www.w3school.com.cn 案例: my.css p {color: yellow; } demo1.html <!DOCTYPE html& ...
day27 学习HTML-01天
1 HTML入门 1.1 初识HTML 1.1.1 概述网络世界已经跟我们息息相关,当我们打开一个网站,首先映入眼帘的就是一个个华丽多彩的网页.这些网页,不仅呈现着基本的内容,还具备优雅的布局和丰富 ...
前端-html-01
1. 前端开发自学html.css学习笔记 1.1 绝对路径链接一张图的图片 <img src="网页链接/本地连接"/> 1.2 文本格式化 <!-- 文本 ...
WEBBASIC Unit03 CSS声明
一.box 二.line-height 二.选择器的优先级元素选择器: 1 类选择器: 10 ID选择器: 100 .content>div : 10+1=11 .data : 10 .con ...
java学习笔记-HTML01
课程相关内容 0. 前端的学习和目标为什么要学习前端的技术 /*后台程序员,肯定会和前端程序员沟通.没办法正常开展工作.所以要对的基础的前端知识要一个了解. */ 前端学习的内容 /*前端三剑客先 ...
HTML-01基础知识
<!doctype html>  <html><head><!-- 在head处通过meta 设置网页字符集 ...
docker初体验：docker部署nginx负载均衡集群
Docker 是一个用于开发,交付和运行应用程序的开放平台.Docker 使您能够将应用程序与基础架构分开,从而可以快速交付软件.今天来为大家演示一下docker部署nginx负载均衡集群环境 ce ...

WEBBASIC-HTML01

WEBBASIC-HTML01相关推荐

最新文章

热门文章