HTML、CSS、JS简单介绍以及HTML的标签

不想秃头的林染染

已于 2022-04-08 00:31:09 修改

阅读量4k

点赞数 5

文章标签：前端 javascript css html

于 2022-04-08 00:25:38 首次发布

本文链接：https://blog.csdn.net/m0_63163990/article/details/124027344

版权

一、HTML--结构

1.了解网页

网站（web site）是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页（web page）是网站中的一“页”，通过超链接联系在一起，通常是HTML格式的文件，它要通过浏览器来阅读。其中进入网站看到的第一页又称为主页（homepage）。

网页是构成网站的基本元素，它通常由照片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或者.html后缀结尾的文件，因此俗称为HTML文件。

2.了解HTML

HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。

HTML是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

HTML不是一种编程语言，而是一种标记语言（markup language）。

标记语言是一套标记标签（markup tag）。

超文本含义：

1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

2.它还可以从一个文件跳转到另一个文件，与世界各地的主机的文件连接（超级链接文本）。

二、CSS--样式

1、CSS-网页的美容师

CSS是层叠样式表（Cascading Style Sheet）的简称，通常又称为CSS样式表或者级联样式表。

CSS也是一种标记语言，它是主要用来设置HTML页面中的文本内容（字体、大小、对齐方式等）、图形的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如，它可以美化HTML，让HTML更加漂亮，让页面布局更加简洁大方。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2、CSS 的规则

CSS由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值用冒号分开。

3、CSS的格式

（1）一般定义在头文件里面

（2）需引入<style type="text/css"><style>

（3）样式的定义必须在style标签内

三、JavaScript--行为

1.JavaScript的历史

JavaScript是由布兰登·艾奇（Brendan Eich）在1995年仅仅利用10天完成设计的。它最早是用来做表单校验的，由网景公司（Netspace）创造，最初命名为LiveScript，后来在与Sun合作之后改名为JavaScript，ECMA（欧洲计算机工协会）制定标准。

2.JavaScript的简介

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思），现在也可以基于Node.js技术进行服务器端编程。

ps：脚本语言不需要编译，运行过程中由JS解释器（JS引擎）逐行来进行解释并执行

3.JavaScript的作用

（1）表单动态校验（密码强度检测）——JS产生的最初目的

（2）网页特效

（3）服务端开发（Node.js)

（4）桌面程序（Electron）

（5）App（Cordova）

（6）控制硬件-物联网（Ruff）

（7）游戏开发（Cocos2d-js）

4.JavaScript的组成

（1）ECMAScript（JavaScript语法）规定了JS的编程语法和基础核心知识是所有浏览器厂商共同遵守的一套JS语法工业标准。

（2）DOM（document object model 页面文档对象模型）是W3C组织推荐的处理可扩展标记语言的标准编程接口。

（3）BOM（browser object model 浏览器对象模型），它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

四、HTML的标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1.文档<html>

告知浏览器其自身是一个 HTML 文档。

2.主体<body>

body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。)

3.头部<head>

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

4.标题<title>

<title> 元素可定义文档的标题。

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
内容
</body>
</html>

5.HTML标题<h1>-<h6>

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

6.段落<p>

<p> 标签定义段落。

<p>这是段落。</p>

7.段内换行<br>

<br> 可插入一个简单的换行符。

<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

8.预留格式<pre>

pre 元素可定义预格式化的文本。被包围在 pre 元素中的

文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

9.段内分组<span>

<span> 标签被用来组合文档中的行内元素。

10.水平线<hr>

<hr> 标签在 HTML 页面中创建一条水平线。

<html>
<body>
这是水平线
<hr />
</body>
</html>

11.文档分区<div>

<div> 可定义文档中的分区或节（division/section）。

<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
</body>
</html>

12.超链接<a>

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<html>
<body>
<a href="https://www.csdn.net/">CSDN</a>
</body>
</html>

13.图像<img>

img 元素向网页中嵌入一幅图像。

<html>
<body>

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

</body>
</html>

14.标签<li>

<li> 标签定义列表项目。

15.有序列表

<ol> 标签定义有序列表。

<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

16.无序列表

<ul> 标签定义无序列表。

<html>
<body>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

17.表格

<table> 标签定义 HTML 表格。

18.表头<th>

<th>定义表格内的表头单元格。

19.表格行<tr>

<tr> 标签定义 HTML 表格中的行。

20.表格单元<td>

<td> 标签定义 HTML 表格中的标准单元格。

21.空单元格<&nbsp>

<html>
<body>
<table border="1">
<tr>
  <td>周一</td>
  <td>周二</td>
  <td>周三</td>
  <td>周四</td>
  <td>周五</td>
</tr>
<tr>
  <td>离散数学</td>
  <td>英语</td>
  <td>离散数学</td>
  <td>算法与程序设计实践</td>
  <td>英语</td>
</tr>
<tr>
  <td>数字电路与数字逻辑</td>
  <td>中文写作</td>
  <td>高等数学</td>
  <td>高等数学</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>算法与程序设计实践</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>近现代史纲要</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>近现代史纲要</td>
  <td>&nbsp;</td>
  <td>计算机新技术讲座</td>
  <td>网页设计与开发</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>面向对象程序设计</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
</table>
</body>
</html>

22.表单

<form> 标签用于为用户输入创建 HTML 表单

23.输入

<input> 标签用于搜集用户信息。

常见属性: type, value, name.

<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
</body>
</html>

24.下拉列表框

select 元素可创建单选或多选菜单。option 元素定义下拉列表中的一个选项（一个条目）。

<html>
<body>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select> 
</body>
</html>

25.输入框

<textarea> 标签定义多行的文本输入控件

<html>
<body>
<textarea cols="50" rows="10">
（不少于50字）
</textarea>
</body>
</html>

不想秃头的林染染

关注

5
点赞
踩
55

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS、JS简单介绍以及HTML的标签

目录一、HTML--结构1.了解网页2.了解HTML二、CSS--样式1、CSS-网页的美容师2、CSS 的规则3、CSS的格式三、JavaScript--行为1.JavaScript的历史2.JavaScript的简介3.JavaScript的作用4.JavaScript的组成四、HTML的标签1.文档2.主体3.头部4.标题5.HTML标题6.段落7.段内换行8.预留格式9.段内分组10.水平线11.文档分区
复制链接

扫一扫