day07 HTML学习

最新推荐文章于 2024-05-18 20:57:08 发布

hqc_xds

最新推荐文章于 2024-05-18 20:57:08 发布

阅读量114

点赞数

分类专栏： java技术

本文链接：https://blog.csdn.net/hqc_xds/article/details/84442201

版权

java技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

# 今日内容

1. web概念概述
2. HTML

## web概念概述
* JavaWeb：
* 使用Java语言开发基于互联网的项目

   * 软件架构：
       1. C/S: Client/Server 客户端/服务器端
           * 在用户本地有一个客户端程序，在远程有一个服务器端程序
           * 如：QQ，迅雷...
           * 优点：
               1. 用户体验好，例如玩游戏。
           * 缺点：
               1. 开发、安装，部署，维护麻烦
       2. B/S: Browser/Server 浏览器/服务器端
           * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
           * 优点：
               1. 开发、安装，部署，维护简单
           * 缺点：
               1. 如果应用过大，用户的体验可能会受到影响
               2. 对硬件要求过高

   * B/S架构详解
       * 资源分类：
           1. 静态资源：
               * 使用静态网页开发技术发布的资源。
               * 特点：
                   * 所有用户访问，得到的结果是一样的。
                   * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                   * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
           2. 动态资源：
               * 使用动态网页及时发布的资源。
               * 特点：
                   * 所有用户访问，得到的结果可能不一样。
                   * 如：jsp/servlet,php,asp...
                   * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

* 我们要学习动态资源，必须先学习静态资源！

       * 静态资源：
           * HTML：用于搭建基础网页，展示页面的内容
           * CSS：用于美化页面，布局页面
           * JavaScript：控制页面的元素，让页面有一些动态的效果

## HTML
   1. 概念：是最基础的网页开发语言
       * Hyper Text Markup Language 超文本标记语言
           * 超文本:
               * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
           * 标记语言:
               * 由标签构成的语言。<标签名称> 如 html，xml
               * 标记语言不是编程语言

   2. 快速入门：
       * 语法：
           1. html文档后缀名 .html 或者 .htm
           2. 标签分为
               1. 围堵标签：有开始标签和结束标签。如 <html> </html> 。

2.自闭合标签。<br/> 开始结束在一起。

3. 标签可以嵌套。但是需要正确嵌套。

4. 开始标签中还可以定义属性。属性是由键值对构成，值需要用引号（单引号，双引号都可以）；

5. html标签不区分大小写，建议小写。

<!DOCTYPE html> H5特别标记

<html>
	<head>
		<title>这是标题书写位置</title>
	</head>
	<body>
		<font 	color = "red">HELLO WORLD</font> <br/>
		<font 	color = "blue">HELLO WORLD</font>
	</body>
<html>

效果图

3. 标签学习

1.文件标签。构成html最基本的标签
   html： html根标签。
head: 头标签。用于指定html文档的一些属性；引入外部的资源。
title:
   body :体标签
   meta 标签，用以说明主页制作所使用的文字以及语言
   <!DOCTYPE html> html5中定义该文档是html文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--用以说明主页制作所使用的文字以及语言-->
    <title>Title</title>
</head>
<body>

</body>
</html>

2.文本标签，和文本相关的标签

标题标签，h1 最大，h6最小
   <h1></h1>
   <h2></h2>
   <h3></h3>
   <h4></h4>
   <h5></h5>
   <h6></h6>
   <p> 段落标签
   <br/> 换行标签
   <hr> 一条水平直线
   属性： color 颜色
   width 宽度
           size 高度
           align :对齐方式
                   center :居中
                   left:左对齐
                   right:右对齐

   <b> 字体加粗
   <i> 字体斜体
   <font> 字体标签
       属性：color 颜色
       size 字体大小
           face 字体


   属性定义：
       color ：
               方式1：英文单词： red ，green，blue
               方式2：rgb(红值1，绿值2，蓝值3) 值的范围：0~255 如rgb(0,0,255)表示蓝色。通过配比来
               方式3：#红值绿值蓝值值的范围：00-ff之间。如：#00FF00 表示绿色
       width:
               数值 width='20' 数值的单位是px,像素
               数值% ：占比相对于父元素的比例
3.图片标签

   ./代表当前目录。默认可以不写，即 ./image 和image是一个意思
   <img src="./image/a.jpg">
   <img src="../image/a.jpg">
4 列表标签

有序列表 ol order list 显示时会有序号 type默认为1 2 3 4.。。
       <ol type="a">
           <li>第一部</li>
           <li>第二部</li>
           <li>第三部</li>
           <li>第四部</li>
       </ol>
   无序列表   显示时无序号
       <ul>
           <li>第一部</li>
           <li>第二部</li>
           <li>第三部</li>
           <li>第四部</li>
       </ul>

5 链接标签

	<!--在本页面打开 -->
	<a href="http://www.baidu.com" target="_self">点我</a>
	   <!--新开一个页面用于展示-->
	<a href="http://www.baidu.com" target="_blank">点我</a>
	<!--链接本地资源 -->
	<a href="./jvm.png" >点我</a>
	<!--绑定图片链接-->
	<a href="http://www.baidu.com"> <image src="./jvm.png"></a>

6 div 和 span
   div 标签：每一个div占满一整行。这种叫块级标签。
   span 标签：文本信息在一行展示，行内标签内联标签
7 语义标签 html5为了提高程序的可读性，提供了一些标签
   <header></header>
   <footer></footer>

8表格标签
   table :定义表格
   border:边框
   cellpadding 定义内容与表格单元格之间的距离
   cellspacing 定义单元格之间的距离。如果指定为0，则相邻的两个单元格的边就成了一条公共的线
   bgcolor :背景色
   align:对齐方式
   tr: 定义行
   td: 定义单元格
       colspan 合并列
       rowspan 合并行
   th：定义表头单元格
   <caption>表格标题
   <thead> 表格的头部分
   <tbody> 表示表格的体部分
   <tfoot> 表示表格的尾部分

表单
   概念：用户采集用户输入的数据。用于和服务器进行交互。
   form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
   属性：
       action：指定提交数据的URL;
       method: 指定提交方式
       分类一共有7种，其中post和get常见。
           get:请求参数会在地址栏中进行显示。会封装到请求行中（http协议讲解）
               请求参数的大小是有限制的。
               不太安全。
           post:
               请求参数不会再地址栏中显示。
               请求参数的大小没有限制
               较为安全
       在form标签内的input标签中的name中的数据会被提交。因此一定要有name属性

   input 可以通过type属性的取值来展示不同的效果
           type="text" 文本输入框
           type="password" 密码输入框
               placeholder="如果需要提示，可以使用这个属性"，当输入框发生改变，会自动清空提示
           type = "radio" 单选框
               1.要想多个单选框实现单选的效果，则多个单选框的name需要是一个值。
               2.一般会给每一个单选框提供value属性，指定其被选中后被提交的值。
                   提交的时候提交的就是value值
               3.check属性，可以指定默认
               <hr>默认选中男
               男<input type="radio" name="sex" value="male" checked><br/>
               女<input type="radio" name="sex" value="female">
               <hr>
           type="checkbox"
               一般会给每一个单选框提供value属性，指定其被选中之后提交的值。
               check属性可以指定默认

       label :指定输入项的文字描述信息。主要for属性会和input的id属性值对应，如果对应，则当我们点击lable区域的时候，input输入框会获得焦点。
       如： <label for="pname"><input id="pname"type="text" name="name" placeholder="请输入姓名"> <label>
       select   下拉列表
       textArea 文本域

hqc_xds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day07 HTML学习

# 今日内容 1. web概念概述 2. HTML ## web概念概述 * JavaWeb： * 使用Java语言开发基于互联网的项目 * 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 *...
复制链接

扫一扫

专栏目录