热门标签 | 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社区 其它相关文章!


推荐阅读
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 并发编程:深入理解设计原理与优化
    本文探讨了并发编程中的关键设计原则,特别是Java内存模型(JMM)的happens-before规则及其对多线程编程的影响。文章详细介绍了DCL双重检查锁定模式的问题及解决方案,并总结了不同处理器和内存模型之间的关系,旨在为程序员提供更深入的理解和最佳实践。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • MySQL 数据库迁移指南:从本地到远程及磁盘间迁移
    本文详细介绍了如何在不同场景下进行 MySQL 数据库的迁移,包括从一个硬盘迁移到另一个硬盘、从一台计算机迁移到另一台计算机,以及解决迁移过程中可能遇到的问题。 ... [详细]
  • 深入理解Java泛型:JDK 5的新特性
    本文详细介绍了Java泛型的概念及其在JDK 5中的应用,通过具体代码示例解释了泛型的引入、作用和优势。同时,探讨了泛型类、泛型方法和泛型接口的实现,并深入讲解了通配符的使用。 ... [详细]
  • 本文介绍如何在Linux服务器之间使用SCP命令进行文件传输。SCP(Secure Copy Protocol)是一种基于SSH的安全文件传输协议,支持从远程机器复制文件到本地服务器或反之。示例包括从192.168.45.147复制tomcat目录到本地/home路径。 ... [详细]
  • 随着网络安全威胁的不断演变,电子邮件系统成为攻击者频繁利用的目标。本文详细探讨了电子邮件系统中的常见漏洞及其潜在风险,并提供了专业的防护建议。 ... [详细]
  • 本文介绍如何通过SSH协议使用Xshell远程连接到Ubuntu系统。为了实现这一目标,需要确保Ubuntu系统已安装并配置好SSH服务器,并保证网络连通性。 ... [详细]
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • TechStride 网站
    TechStride 成立于2014年初,致力于互联网前沿技术、产品创意及创业内容的聚合、搜索、学习与展示。我们旨在为互联网从业者提供更高效的新技术搜索、学习、分享和产品推广平台。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 微软Exchange服务器遭遇2022年版“千年虫”漏洞
    微软Exchange服务器在新年伊始遭遇了一个类似于‘千年虫’的日期处理漏洞,导致邮件传输受阻。该问题主要影响配置了FIP-FS恶意软件引擎的Exchange 2016和2019版本。 ... [详细]
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社区 版权所有