HTML技术文章

简介: HTML技术文章

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请求一般用来提交数据
相关文章
|
8月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
140 6
|
8月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
99 3
|
8月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
142 2
|
9月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
96 0
|
11月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
192 2
|
11月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
78 1
|
11月前
|
编解码 移动开发 前端开发
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
75 1
|
前端开发
技术经验分享:html生成印章
技术经验分享:html生成印章
123 1
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
139 0
|
移动开发 JavaScript 开发工具
技术经验分享:html5游戏引擎
技术经验分享:html5游戏引擎

热门文章

最新文章