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


本文摘自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属性

这里写图片描述

阅读剩余部分

相关阅读 >>

前端页面有哪三层

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

更多相关阅读请进入《小白》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...