当前位置:  首页  >  前端开发  >  HTML

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

本文讲解了有关前端页面的基础知识,有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介绍




web学习一路向前,?裙767891015等你?


    

第一个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社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有