Document

HTML技术文章

2024-02-04
dfer
312
html 前端 CSDN

HTML

概念

互联网的产生：w3c的成立，

互联网最开始设计的目的：看论文 ---->浏览器，HTML

网络三要素：HTML HTTP URL

HTML描述论文的格式

HTTP标记这个论文在网络上怎么传输

URL:指示这个论文在互联网的哪个位置：协议 ip/域名端口

结构

<html>
	<head>
	</head>
	
	<body>
	</body>
</html>

// HTML 是一个文本: 特点
// 1, HTML页面/文本,是由标签构成的, 标签成对出现, 有开始有结束
// 2, HTML文本,最外层标签是<html>标签
// 3, 整个HTML文本分为两部分, <head> 和<body>部分

实现网页的三个技术基础：HTML、CSS、JS

Body中的重要标签

hr:横线标签

<hr>是一个横线标签，可以在网页上显示一个横线，并且是一个单标签
   	属性：
    noshade:颜色是否有阴影(纯色)
	size:高度( 厚度,不同于height,不带单位时--默认px )
	width:宽度(不带单位时--默认px)
	align:对其方式

br：换行符

<br>:表示一个换行符，是一个单标签

hn:标题标签

// <h1><h2><h3><h4><h5><h6>: 标题标签
// 
// 注意: 在一个HTML页面中, h1只能出现一次, h2-h6可以出现多次
//       因为H1里面的内容是作为关键字存在的

// 标题标签的属性:
align
Left:左对齐内容（默认值）
Center:右对齐内容
Right:居中对齐内容

div

//<div>:用来对页面划分区域，是最常用的标签

p:段落标签

// <p>: 是一个段落标签, (极类似于div, 除了一个特点)
//      p标签自带上下边距

a:超链接标签

// <a>: 是一个超链接标签:在一个页面中通过连接打开一个新的页面
//  属性: 
//      href: 指示要打开页面的地址, 本质上是一个url: 统一资源定位符
//      target:
Target
超链接属性target的value值时默认是_self
_blank:在新窗口打开
_parent:在父窗口打开
_self:它使目标文档显示在超链接所在框架或者窗口中
_top:在顶级窗口打开
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口

URL

URL分为三部分(四小部分)
// http://115.29.141.32:8085/#/mall/show/index
// http://cskaoyan.com/forum.php
// https://item.taobao.com/item.htm?scm=10&pvid=71082
// 第一部分: 协议部分 https: http
// 第二部分: 域名 或者 ip+端口 部分
// 第三部分: 虚拟路径+参数: item.htm?scm=10&pvid=71082

img:图片标签

// <img> : 图片标签
//        单标签
// 属性 src: 指向图片地址: url
// 相对路径:

绝对路径不是以盘符为开头的路径，仅仅是url

相对路径和java中的一样，在用户的浏览器中进行解析运行，还是要拼接成绝对路径来发起请求，但相对路径的上层目录是有限制的，不能超过虚拟路径的最顶层

不能使用盘符的原因：html的代码是运行在用户的电脑上的，所以如果以盘符来访问就会造成不安全的问题

input: 输入框 : 表单元素

<input> 输入框
      单标签
属性 type:
    text:默认文本
    password:密码
    button:按钮
    hidden:隐藏输入框
    radio:单选框

    
reset:定义重置按钮。
submit:提交

select : 下拉选: 表单元素

// <select> 下拉选: 成套标签和option
// 
// 属性:
option:selected(selected="selected"选中状态)
select :multiple(multiple =“multiple“ 允许多选)
select :size(size =“4”下拉可见数4)

textarea: 多文本: 表单元素

// 本质上是一个输入框, 只不过可以输入多行

属性: 
Cols:列
Rows:行
Maxlength:最大
Placeholder:提示
readonly :只读

table: 表格

// <table> 表示一个表格, 也是成套的标签
// <tr>: 表示一个表格中一行
// <td>: 表示一行中的一个单元格

属性
//table标签的属性:
Bgcolor
Border
Cellpadding:规定单元边沿与其内容之间的空白。
Cellspacing:规定单元格之间的空白。
// tr标签的属性:
Bgcolor
Valign:规定表格行中内容的垂直对齐方式。
top
middle
bottom
// td 标签的属性
Colspan:横跨列数
Rowspan:横跨行数

// <th> : 表头 取代第一行的td
// <thead><tfoot><tbody>:  这三个标签出现一个别的必须出现, 除此之外顺序要注意

ol,ul 有序和无序列表

// <ol> 是一个有序列表, 和li标签共同构成成套标签
// <ul> 是一个无序列表, 和li标签共同构成成套标签

ol的属性:
Type:规定在列表中使用的标记类型(1,A,a,I,i)。
Start:规定有序列表的起始值
Reversed:规定列表顺序为降序。(9,8,7...)
    
ul的属性:
Type:
disc:默认值。实心圆。
circle :空心圆。
square :实心方块。

form表单

// < form >: 表单, 用来向后端发起请求, 提交数据
//name和value拼接完成后放在url后面，name和value构成键值对

   get请求和post请求的区别:
   1, get请求, '一般' 把参数放到url之后
      post请求, 一般 把参数放到'请求正文'里
      (url之后参数最多能拼接1kb)

   2, get请求不安全
      post请求更安全

   3, 语义化区别
      get请求一般用来获取数据
      post请求一般用来提交数据

上一篇：基于PHP实现的校友

下一篇： PHP 之ftp客户