参考:https://www.runoob.com/html/html-tutorial.html
目录
Wed 概念概述及HTML基础~
JavaWed
使用java语言开发基于互联网的项目
- Java Web 其实b就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件(SSH等) JavaWeb其实做什么都可以,你可以通过JavaWeb制作一个软件,一个ERP,一个网页,甚至是一个网络游戏都可以。
软件架构
1、 C\S : Client / Server 客户端 / 服务器端
-
在用户本地有一个客户端程序,在远程有一个服务器端程序
-
是计算机软件协同工作的一种模式
-
如:QQ、迅雷、我们手机中安装的微信、qq、王者荣耀等应用程序就是C/S结构。
-
优点:用户体验好
-
缺点:开发、安装、部署、维护麻烦
-
C\S结构图:
2、 B/S : Browser / Server 浏览器 / 服务器端
-
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
-
在手机或电脑上用浏览器上百度搜索、看新闻等就是在使用“B/S”结构进行数据交互。
-
优点: 开发、安装、部署、维护 简单
-
缺点:
1、如果应用过大,用户的体验可能会受到影响 2、对硬件的要求过高
B\S结构图:
B/S架构详解
资源分类
1. 静态资源
使用静态网页开发技术发布的资源。
特点: 所有用户访问,得到/看到的结果是一样的
如:文本、图片、音频、视频、**HTML、CSS、JavaScript**
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。
浏览器内置了静态资源的解析引擎,可以展示静态资源
HTML:用于搭建基础网页,展示页面的内容
CSS :用于美化页面,布局页面
JavaScript : 控制页面的元素,让页面有一些动态的效果
2. 动态资源
使用动态网页技术发布的资源。
特点:所有用户访问,得到/看到的结果可能不一样
如:JSP / servlet 、PHP 、asp...
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,
再发送给浏览器 (浏览器只能去解析静态资源)
HTML
1. 概念 :最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本:是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言:由标签构成的语言。<标签名称> 如 html ,xml
标签语言不是编程语言
2. 快速入门:
语法:
html 文档后缀名 : .html 或者 .htm
标签分为:
1. 围堵标签 :有开始标签和结束标签。如` <html> </html>`
2. 自闭和标签 :开始标签和结束标签在一起。如`<br/>` 换行标签
标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
正确:`<a><b></b></a>`
在开始标签中可以定义属性。属性由键值对构成,值需要用引号(单双都可)引起来
最基础的html代码:
<html>
<head>
<title></title>
</head>
<body>
<font color="blue"> Hello World </font><br/>
</body>
</html>
标签
文件标签
构成html 最基本的标签
<html>
标签告知浏览器这是一个 HTML 文档 , 是 HTML 文档中最外层的元素。
<body>
标签定义文档的主体 , 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)
<title>
标签定义文档的标题 ,一个 HTML 文档中不能有一个以上的 <title>
元素。
<head>
头标签 ,用于指定html 文档的一些属性 ,引入外部资源。
文本标签
和文本有关的标签
<h1> <h6>
标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<p></p>
段落标签
<p>这是一个段落。</p>
<br/>
换行标签
<p>
使用 br 元素<br>在文本中<br>换行。
</p>
<hr>
显示为一条水平线。标签定义 HTML 页面中的主题变化(比如话题的转移)
<hr>
的属性 color :颜色 width :宽度 size :高度
align :对齐方式 ——> center 居中 、 left 左对齐 right 右对齐
<hr color= "red" width="200" size="10" align="left"/>
<b>
字体加粗
<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>
<i>
字体斜体
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
<font>
字体标签
<font face="verdana" color="green">这是一些文本!</font>
<!-- -->
注释
<!--这是一个注释,注释在浏览器中不会显示-->
图片标签
<img>
图片标签
相对路径的表示方法:
以 .开头的路径 * ./:
代表当前目录 * ../:
代表上一级目录
列表标签
<ol>
定义一个有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
定义一个无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
链接标签
<a></a>
链接标签
href :指定访问资源的URL(统一资源定位符)
target :指定打开资源的方式
_self :默认值,在当前页面打开
_ blank : 在空白页面打开
<a href="https://www.runoob.com">这是一个链接</a> <!--在当前页面打开-->
<a href="https://www.runoob.com" target="_blank">这是一个链接</a> <!--在空白页面打开-->
<a href="./本地标签.html"> 本地标签</a> <!--打开本地标签-->
div 和 span
<div>
标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。块级标签
每一个div占满一整行。块级标签
<span>
用于对文档中的行内元素进行组合。行内标签 ,内联标签
文本信息在一行展示
语义化标签
html5 中为了提高程序的可读性,提供了一些标签。
<header>
标签定义文档或者文档的一部分区域的页眉。
注释:<header>
标签不能被放在 <footer>
、<address>
或者另一个 <header>
元素内部。
<footer>
标签定义文档或者文档的一部分区域的页脚。
表格标签
<table>
定义表格
<tr>
定义行
<td>
定义单元格
colspan : 合并列
rowspan : 合并行
<th>
定义表头单元格
表单标签
<form>
用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
属性: 1、action : 指定提交数据的URL
2、methon:指定提交方式
分类:一共7种,2种比较常用
get : 请求参数会在地址栏中显示,会封装到请求行中
请求参数大小/长度是有限制的
不太安全
post : 请求参数不会在地址栏中显示,会封装在请求体中
请求参数的大小/长度没用限制
较为安全
表单项中的数据要想被提交:必须指定其name属性
* 表单项标签:
* input:可以通过type属性值,改变元素展示的样式
* type属性:
* text:文本输入框,默认值
* placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
* password:密码输入框
* radio:单选框
* 注意:
1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
3. checked属性,可以指定默认值
* checkbox:复选框
* 注意:
1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
2. checked属性,可以指定默认值
* file:文件选择框
* hidden:隐藏域,用于提交一些信息。
* 按钮:
* submit:提交按钮。可以提交表单
* button:普通按钮
* image:图片提交按钮
* src属性指定图片的路径
* label:指定输入项的文字描述信息
* 注意:
* label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
* select: 下拉列表
* 子元素:option,指定列表项
* textarea:文本域
* cols:指定列数,每一行有多少个字符
* rows:默认多少行。
其他的标签我们后续再发啦~!