首页 > 编程语言> 文章详细

学习笔记【JavaWeb-第一节：HTML标签】

2020-12-31 20:33:43 阅读：146 来源： 互联网

标签：JavaWeb 标签指定定义 html 第一节 HTML 资源属性

Web

JavaWeb

使用Java语言开发基于互联网的项目。

软件架构

C/S：Client/Server 客户端/服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
优点：用户体验好
缺点：开发、安装、部署、维护麻烦。

B/S：Browser/Server 浏览器/服务器端

只需要一个浏览去，用户通过不同的网址（URL），客户访问不同的服务器端程序
优点：开发、安装、部署、维护麻烦。（相对而言）
缺点：如果应用过大，用户的体验可能受到影响；对硬件要求过高。

B/S

两种资源

Server服务器端中有两种资源，分为动态资源和静态资源。

静态资源：

使用静态网页开发技术开发的资源
特点：所有用户访问，得到的结果是一样的，如文本、图片、音频、视频、HTML、CSS、JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。

动态资源：

使用动态网页开发技术开发的资源
特点：所有用户访问，得到的结果可能是不一样的
如：jsp/servlet，php，asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

要学的静态资源：

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

HTML

概念

最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本：时使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言：由标签构成的语言。<标签名称> 如 html,xml。不是编程语言。

快速入门

html文档后缀名 .html 或者.htm
标签分为

围堵标签：有开始标签和结束标签。如
自闭和标签：开始标签和结束标签在一起。如

标签可以嵌套：
需要正确，不能你中有我，我中有你。
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来。
html的标签不区分大小写，但是建议使用小写。

<html>
	<head>
		<title>
			title
		</title>
	</head>
	<body>
		<font color='red'>HelloWorld</font><br/>
		<font color='green'>HelloWorld</font>
	</body>
</html>

标签（简单介绍，很多都已不用）

文件标签：构成html最基本的标签

html：html文档的根标签
head：头标签。用于指定html文档的一些属性。引入一些外部的资源
title：定义标题的标签
body：定义文档的主题
< !DOCTYPE html >

文本标签：和文本有关的标签

注释：< !-- 注释内容 -->
<h1> to <h6>：标题标签，1为最大，有自动换行
<p>：段落标签
<br>：换行标签
<hr>：显示一条水平线，可修改样式，但早就不推荐了
<b>：字体加粗
<i>：字体斜体
<font>（HTML5不建议使用）：字体标签，有属性如color、size、face等
<center>:文本居中

属性定义：
color：

英文单词：如red、green、blue等
rgb（值1，值2，值3）
#值1值2值3：值的范围：00-FF之间

width：

数值：width=‘20’，值的单位，默认是px即像素
数值%：占比相对于父元素的比例

图片标签

<img>

src 路径
align 对齐方式
alt 名称
width 宽度
height 高度

主要掌握src：
相对路径：以. 开始的路径，./当前目录，…/代表上一级目录

列表标签

有序列表：
ol：

type：样式
start：从几开始

无序列表：
ul：

type：样式

链接标签

定义一个超链接标签<a>，默认在本页面打开

href：指定访问资源的URL（统一资源定位符），若内容为mailto:邮箱，则是打开系统邮箱
target：_self：在本页面打开； _blank：在空白页面打开。

<a href="http://www.baidu.com">点我</a><br>

<a href="http://www.baidu.com" target="_blank">点我</a><br>

<a href="mailto:809415308@qq.com">联系我们</a><br>
    
<a href="http://www.baidu.com" target="_blank"><img src="1.jpg"></a><br>

div和span

没有任何样式，往后和css联合使用
span： 文本信息在一行展示，行内标签，内联标签
div： 每一个div占满一整行。块级标签

语义化标签（HTML5）

HTML5中为了程序的可读性，提供了一些标签，结合css联合使用
<header>头
<footer>脚

表格标签

<table>：定义标签

width：宽度
border：边框
cellpadding：内容和单元格的距离
cellspacing：单元格之间的距离，若为0则为一条线
bgcolor：背景色
align：对其方式

<tr>：定义行

bgcolor：背景色
align：对其方式

<td>：定义单元格

colspan：合并行
rowspan：合并列

<th>：定义为表头单元格

<caption>：表格标题

<thead>:表示表格的头部分

<tbody>:表示表格的体部分

<tfoot>:表示表格的尾部分

注意： 在具体中经常在单元格中嵌套表格。

表单标签

表单：用于采集用户输入的数据的。用于和服务器进行交互。

<form>：用于定义表单的，可以定义一个范围，范围代表用户数据的范围。

action：指定提交数据的URL
method：指定提交方式。共七种，常用的两种：
get：请求参数会在地址栏中显示，会封装在请求行中。请求参数的长度有限制。不太安全。
post：请求参数不会在地址栏中显示，会封装在请求体中。请求参数的长度没有限制。较为安全。

表单项中的数据要想被提交：必须指定其name属性。

<input>：通过type属性值，改变元素展示的样式。
type:

text：文本输入框，默认为text。属性placeholder为提示信息。
password：密码输入框。
radio：单选框。name属性的值必须一样。一般会给单选框提供value属性，指定齐被选中后提交的值；属性checked可指定默认值。
checkbox：复选框。和单选框差不多。
file：文件选择框。
hidden：隐藏域。
submit：提交按钮，可提交表单。
button：普通按钮，后面回合javascript联合使用。
image：图片提交按钮。通过src指定路径。
color：取色器。
data：年月日。
datatime_local：年月日小时分钟。
email：邮箱。
number：只能输入数字。

<label>：指定输入项的文字描述信息，for属性会和<input>的id属性对应。

<select>：下拉列表

option:子元素，指定列表项。

<textarea>：文本域

cols：指定列数。
rows：指定行数。

例子：

<body>
    <form action="#" method="get">
        <label for="123">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="123"> <br>
        密码：<input type="text" name="username" placeholder="请输入密码"> <br>
        性别：<input type="radio" name="gender" value="male" checked> 男
        <input type="radio" name="gender" value="female"> 女 <br>

        爱好：<input type="checkbox" name="hobby" value="shopping"> 购物
        <input type="checkbox" name="hobby" value="java"> Java
        <input type="checkbox" name="hobby" value="eating"> 吃东西 <br>

        图片：<input type="file" name="file"><br>

        隐藏域：<input type="hidden" value="aaa"><br>

        取色器：<input type="color" name="color"><br>

        生日：<input type="date" name="birthday"><br>

        邮箱：<input type="email"><br>

        年龄：<input type="number" name="age" min="0"><br>

		出生地：<select name="province" id="">
            <option selected>--请选择--</option>
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>
            <option value="shanghai">上海</option>
        </select><br>
        
        自我描述：<textarea cols="20" rows="5" name="des"><br></textarea>

        <input type="submit" value="登录">
    </form>
</body>

标签：JavaWeb,标签,指定,定义,html,第一节,HTML,资源,属性
来源： https://blog.csdn.net/qq_53273362/article/details/111938804

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9