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请求一般用来提交数据
相关文章
|
2天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
8天前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
10 0
|
15天前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
394 1
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js的基于HTML5的问卷调查系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的基于HTML5的问卷调查系统附带文章和源代码设计说明文档ppt
19 0
|
18天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
25天前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
23 0
|
1月前
|
JavaScript 搜索推荐 UED
一种将 Vue 组件渲染为 HTML 字符串的技术
【5月更文挑战第8天】Vue 的服务器端渲染(SSR)技术在服务器上将组件渲染为 HTML,提升首屏加载速度和 SEO。优点包括更快的用户体验、更好的搜索引擎优化及减轻客户端负担。然而,SSR也带来服务器压力增大、开发复杂性和额外的构建配置需求。vue-server-renderer 包支持 Vue SSR,但是否采用取决于项目需求和资源。
20 1
|
1月前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
1月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
1月前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。