热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

适合小白学习的前端页面知识(值得一看)

本文讲解了有关前端页面的基础知识,有html的架构、基础标签、列表、输入框、文本标签等,非常适合编程小白学习,下面就让我们一起来了解一下吧。

适合小白学习的前端页面知识(值得一看)

本文讲解了有关前端页面的基础知识,有html的架构、基础标签、列表、输入框、文本标签等,非常适合编程小白学习,下面就让我们一起来了解一下吧。

(一)HTML 基本结构




    
    
    



带你出师,闯荡江湖!


(二)基础标签

标题标签:

标题标签用于一段文字的标题说明,他的语义就是标题。

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

段落标签:

段落标签显示一个段落自动换行

登鹳雀楼

白日依山尽,

黄河入海流。

欲穷千里目,

更上一城楼。

链接标签(a标签,a是anchor的缩写) :

a标签的作用就是跳转,包括页面的跳转和页内跳转。

华点
章节三

target属性:

_blank:浏览器会另开一个新窗口显示document.html文档
_parent:指向父frameset文档
_self:把文档调入当前页框
_top:去掉所有页框并用document.html取代frameset文档
tittle属性:指明连接的信息

页面内的跳转:在目标标签处指明id=”“, 连接处指定 href=”#id值” 然后点击会跳转到相应的id位置

图片标签:

logo
logo

src 为图片的地址,也就是路径。有两种格式(1). 绝对路径 : 图片保存的地址;(2). 相对路径 : 相对于本文档的路径。上一层用../

alt为资源缺失时显示的内容。其原有的英文单词为alternative
title为鼠标停留在图片上显示的内容

(三)列表

无序列表

  • 河南
  • 河北
  • 江西
  • 江苏

有序列表

  1. 第一章
  2. 第二章
  3. 第三章
  4. 第四章

type属性

start属性:决定列表初始值,他的取值为自然数。

自定义列表

列表的标题
列表项的描述
河北
河北又称燕赵大地

(四)表单

表单:收集用户填写的信息并将其提交给服务器

form有两个属性

Action 表单提交的地址。

提交的方式有两种,get和post。两者的区别:(1)提交的内容的长度,get不能超过2KB,post无限制;(2)安全性,get将内容拼接到字符串后面,不够安全。

(五)输入框

文本框

属性为maxlength 表示输入的最大长度。 size为输入框的长度; value为默认的值

密码框

属性为maxlength 表示输入的最大长度。 size为输入框的长度; value为默认的值

单选按钮


属性为name将单选按钮分组这样就可以选择只能选择一个;checked默认选中; value表示他的值

复选框

checked 表示默认选中 name表示checkbox的名字,也是将复选框进行分组

提交按钮

submit为提交按钮,value为按钮上显示的文字。点击时会将参数添加在form Action的路径后面

重置按钮

普通按钮

普通按钮,value值为按钮上显示的文字,onclick是单击按钮触发的事件,可用js去处理

图片按钮

图片按钮 src为图片的路径其属性可以和 类似

文件按钮

上传文件在点击按钮后可以打开本地的文件,后面的accept是可以选中的文件的类型一般 .xls为excel表格 .docx为word文档。.jpg 为图片等等

下拉框

(六)Html p介绍






    

第一个p

第二个p

第三个p

p标签使用说明

在html中布局使用最多标签为p,

我们通常将网页重构说成p css制作。

p本身没有什么特别之处,只是p标签替代了以前table标签布局。

我们通过对p标签对象设置不同样式实现我们要的美化效果。

通常一对未设置任何样式的p,独占一行。

p作用

p起分割作用,是分割内容常使用的标签。p+CSS更是起到分割与设置对应样式作用。

感谢大家的阅读,大家在读后对html有所了解了吗?

本文转自:https://blog.csdn.net/xiaofeng10330111/article/details/105413134

推荐教程: 《HTML教程》

以上就是适合小白学习的前端页面知识(值得一看)的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 利用Cookie实现用户登录状态的持久化
    本文探讨了如何使用Cookie技术在Web应用中实现用户登录状态的持久化,包括Cookie的基本概念、优势及主要操作方法,并通过一个简单的Java Web项目示例展示了具体实现过程。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文详细介绍了跨站脚本攻击(XSS)的基本概念、工作原理,并通过实际案例演示如何构建XSS漏洞的测试环境,以及探讨了XSS攻击的不同形式和防御策略。 ... [详细]
  • LoadRunner中的IP欺骗配置与实践
    为了确保服务器能够有效地区分不同的用户请求,避免多人使用同一IP地址造成的访问限制,可以通过配置IP欺骗来解决这一问题。本文将详细介绍IP欺骗的工作原理及其在LoadRunner中的具体配置步骤。 ... [详细]
  • 本文详细介绍了如何在Windows和Linux系统上配置Openfire服务器,包括安装步骤、数据库配置及端口映射等关键环节。 ... [详细]
  • 本文详细对比了HashMap和HashTable在多线程环境下的安全性、对null值的支持、性能表现以及方法同步等方面的特点,帮助开发者根据具体需求选择合适的数据结构。 ... [详细]
  • 本文详细探讨了如何根据不同的应用场景选择合适的PHP版本,包括多版本切换技巧、稳定性分析及针对WordPress等特定平台的版本建议。 ... [详细]
  • Java虚拟机及其发展历程
    Java虚拟机(JVM)是每个Java开发者日常工作中不可或缺的一部分,但其背后的运作机制却往往显得神秘莫测。本文将探讨Java及其虚拟机的发展历程,帮助读者深入了解这一关键技术。 ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 利用无代码平台实现高效业务应用开发
    随着市场环境的变化加速,全球企业都在探索更为敏捷的应用开发模式,以便快速响应新兴的商业机遇。然而,传统的软件开发方式不仅成本高昂,而且耗时较长,这往往导致IT与业务部门之间的合作障碍,进而影响项目的成功。本文将探讨如何通过无代码开发平台解决这些问题。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 软件测试行业深度解析:迈向高薪的必经之路
    本文深入探讨了软件测试行业的发展现状及未来趋势,旨在帮助有志于在该领域取得高薪的技术人员明确职业方向和发展路径。 ... [详细]
  • 问题描述现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能;在实际开发过程中 ... [详细]
author-avatar
大树沧海凝神的天空
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有