HTML学习笔记

最新推荐文章于 2024-10-03 22:12:17 发布

The Long Ranger

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量122

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_37424777/article/details/102999356

版权

JavaWeb

软件架构

C/S：Client/Server 客户端/服务器端
*在用户本地有一个客户端程序，在远程有一个服务器端程序
B/S：Browser/Server 浏览器/服务器
*只需要一个浏览器，用户通过不同的网站（URL），客户访问远程不同的服务器端程序

B/S架构详解

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

静态资源

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

HTML

1. 概念：Hyper Text Markup Language 超文本标记语言
2. 快速入门：
	*html文档后缀名 .html或者.htm
	*标签分为：围堵标签（如<html></html>）和自闭和标签（如<br/>）
	*标签可以嵌套
	*在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可）引起来
	*html的标签不区分大小写，建议使用小写

3. 标签学习：
	（1）文件标签：构成html最基本的标签
		*html:html文档的根标签
		*head:头标签，用于指定html文档的一些属性，引入外部的资源
		*title:标题标签
		*body:体标签
	（2）文本标签：和文本有关的标签
		*注释：<!-- -->
		*<h1>to <h6>标题标签
		*<p>段落标签
		*<br>换行
		*<hr>显示一条水平线
		*<b>字体加粗
		*<i>字体斜体
		*<font>字体标签
		*<center>文本居中
	（3）图片标签
	（4）列表标签：
		*有序列表：
			*ol:
			*li:
		*无序列表:
			*ul:
			*li:
	（5）链接标签：
		*a:定义一个超链接
			*属性：
			*href：指定访问资源的URL（统一资源定位）
			*target：指定打开资源的方式
				*—self：默认值，在当前页面打开
				*_blank：在空白页面打开
	（6）div和span:
	（7）表格标签：
		*table：定义表格
		*tr：定义行
		*td：定义单元格
			*colspan：合并列
			*rowspan：合并行
		*th：定义表头单元格
		*<caption>：表格的标题
		*<thead>：表示表格的头部分
		*<tbody>表示表格的体部分
		*<tfoot>表示表格的脚部分

HTML标签：表单标签

*表单：
	*概念：用于采集用户输入的数据。用于和服务器进行交互
	*form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
		*属性：
		*action：指定提交数据的URL
		*method：指定提交方式
			*分类：一共7种，2种比较常用
			*get：
			1. 请求的参数会在地址栏中显示
			2. URL参数长度是有限制的
			3. 不太安全
			*post：
			1. 请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
			2. 请求参数长度是没有限制的 
			3. 较为安全
		*表单项种的数据要想被提交：必须指定其name属性

表单项标签：

*input：可以通过type属性值，改变元素展示的样式
	*type属性：
		*text：文本输入框，默认值
			*placeholder：指定输入框的提升信息，当输入框的内容发生变化，会自动清空提示信息
		*password：密码输入框
		*radio：单选框
		注意：
			1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
			2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
		*checkbox：复选框
		*file：文件选择框
		*hidden：隐藏域，用于提交一些信息
*label：指定输入项的文字描述信息
	*注意：label的for属性一般会和input的id属性值对应。如果对应了。则点击label区域，会让input输入框获取焦点
*select：下拉列表
*textarea：文本域