本文摘自PHP中文网,作者烟雨青岚,侵删。

适合小白学习的前端页面知识(值得一看)
本文讲解了有关前端页面的基础知识,有html的架构、基础标签、列表、输入框、文本标签等,非常适合编程小白学习,下面就让我们一起来了解一下吧。
(一)HTML 基本结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
<!-- head部分主要做一些设置工作,比如字符集、标题等-->
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<!-- 网页内容类型的声明,让浏览器来识别网页的内容-->
<title>我的第一个网页</title>
</head>
<!--文档的主体部分,呈现给用户的信息都在此-->
<body>
带你出师,闯荡江湖!
</body>
</html>
<!--
<html>整个文档的根节点
<head>主要描述文档的设置信息,比如说字符集和标题
<meta>设置字符集
<tittle>设置标题
<body>文档的主题内容,需要在网页上呈现的内容都安排在其中
注释:快捷键 ctrl + / 或者 ctrl + shift + /
形势就是 "<!-- - ->"
作用:对代码进行说明,方便程序员阅读和理解。注释对于计算机的执行结果没有任何影响
他的作用非常重要,代码正确是前提,清晰也是非常重要的,程序员要养成写注释的习惯。
注释一般用于对一个函数或者一段代码的说明方便以后阅读,有一些变量的定义。之后会在总结
-->
|
(二)基础标签
标题标签:
标题标签用于一段文字的标题说明,他的语义就是标题。
1 2 3 4 5 6 | <h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
|
段落标签:
段落标签显示一个段落自动换行
1 2 3 4 5 | <h3>登鹳雀楼</h3>
<p>白日依山尽,</p>
<p>黄河入海流。</p>
<p>欲穷千里目,</p>
<p>更上一城楼。</p>
|
链接标签(a标签,a是anchor的缩写) :
a标签的作用就是跳转,包括页面的跳转和页内跳转。
1 2 | <a href= "http://www.huadianedu.com" title= "百度" target= "_blank" >华点</a>
<a href= "#zhangjie3" title= "章节3" target= "_blank" >章节三</a>
|
target属性:
_blank:浏览器会另开一个新窗口显示document.html文档
_parent:指向父frameset文档
_self:把文档调入当前页框
_top:去掉所有页框并用document.html取代frameset文档
tittle属性:指明连接的信息
页面内的跳转:在目标标签处指明id=”“, 连接处指定 href=”#id值” 然后点击会跳转到相应的id位置
图片标签:
1 2 | <img src= "logo.jpg" alt= "logo" title= "图片" />
<img src= "../chapter4/logo.jpg" alt= "logo" title= "图片" />
|
src 为图片的地址,也就是路径。有两种格式(1). 绝对路径 : 图片保存的地址;(2). 相对路径 : 相对于本文档的路径。上一层用../
alt为资源缺失时显示的内容。其原有的英文单词为alternative
title为鼠标停留在图片上显示的内容
(三)列表
无序列表
1 | <ul> <li>河南</li> <li>河北</li> <li>江西</li> <li>江苏</li> </ul>
|
有序列表
1 2 3 4 5 6 | <ol type= "1" start= "2" >
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ol>
|
type属性

阅读剩余部分
相关阅读 >>
前端页面有哪三层
适合小白学习的前端页面知识(值得一看)
更多相关阅读请进入《小白》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 适合小白学习的前端页面知识(值得一看)