Web前端技术的基础知识

最新推荐文章于 2024-05-02 15:42:51 发布

#%^*$&

最新推荐文章于 2024-05-02 15:42:51 发布

阅读量313

点赞数

文章标签： web

本文链接：https://blog.csdn.net/fyj___/article/details/108039940

版权

本文详细介绍了Web前端开发的基础知识，包括HTML的元素、标签和属性，行级与块级元素的区别，超链接和表格的使用。接着讲解了CSS的样式引入方式、盒子模型和DIV+CSS布局。最后，介绍了JavaScript的基本概念，以及在HTML中的三种使用方式和函数、事件的处理。

摘要由CSDN通过智能技术生成

HTML

HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；

基础语法

元素(Element)

元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。

<p>这是一个段落</p>

<div>
    <a href="http://www.softeem.com">c++</a>
    <a href="http://www.ruandy.com">java</a>
    <a href="http://www.guaqivip.com">python</a>
</div>

标签(Tag)

标签（tag）指示元素的起始与结束。所有标签都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。一般说来，有两种标签——首标签（start tag）（如<html>）和尾标签（end tag）（如</html>）。它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。

<div></div>
<a></a>

单标签
<br/>
<img/>

属性(Attibute)

一般为开始标签之内，用于设置当前标签的相关的属性配置，通常由属性名以及属性值构成，属性值使用双引号包裹，一个标签中可以包含多个属性，具体如下:

<a href="" target="_blank" title="百度一下，你就知道">百度</a>

以上属性有:

href
target
title

行级元素和块级元素

行级元素（inline）

行级元素也称之行内元素，即元素中的内容所占据的宽度由内容决定，后面跟随的行内元素会紧邻之前的元素显示。常见的行级元素：

b
i
strong
img
a
span

块级元素（block）

块级元素不论元素中内容的宽度是多少，始终会占满整个一行

h1~h6
p
div

超链接和iframe标签

html中使用a标签作为一个超链接标签，通过对a标签中的href设置关联的超文本资源可以实现页面跳转，另外也可以通过设置锚链接的方式实现页面内跳转

表格标签

<table></table>定义表格
包含属性：border,bgcolor,bordercolor,width,height,cellspacing,cellpadding

<caption></caption>(非必须)定义表格名称，必须跟在table标签之后

表格通常分为三部分：thead、tbody、tfoot；这个三个字标签为非必须，不写时默认全部位于tbody中，具体如下：
<thead></thead>(非必须) 表示表格头部区域
<tbody></tbody>(非必须) 表示表格内容区域
<tfoot></tfoot>(非必须) 表示表格底部区域

<tr></tr>定义行，属性：align,valign,bgcolor…
<td></td>定义列，属性：width,height,align,valign.clospan,rowspan,…
<th></th>定义表头

表单标签

<!--
表单标签form,

最低0.47元/天解锁文章

#%^*$&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端技术的基础知识

HTMLHTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；基础语法元素(Element) 元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。<p>这是一个段落</p><div> <a href="http://www.softeem.com">c+
复制链接

扫一扫