html onclick用法_HTML+CSS 基础知识-入门概述-CSDN博客

本文链接：https://blog.csdn.net/weixin_28888459/article/details/113537476

一、HTML+CSS

阶段 1：入门概述

一、概述

1、什么是HTML

HTML 是个缩写形式，其全称为 Hyper Text Markup Language，翻译成中文的含义为超文本标记语言。HTML 不是一门编程语言，而是一门标记语言，因为 HTML 是由一系列的元素组成，这些元素可以包含文本、超链接等不同内容。

例：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML基本结构</title>
</head>

<body>
  <h1>这是最基本的HTML结构</h1>
</body>

</html>

细究：概念分成超文本和标记语言两部分进行分别学习。

2、什么是超文本

通过浏览器运行后缀名为.html或.htm文本，浏览器运行并显示这个文本的内容

3、什么是标记语言

标记语言中的标记指的就是 HTML 中的元素（Element），而 HTML 就是由这样的一系列元素组成的，所以被称为标记语言。

HTML 的元素是给定的。无论是 HTML 元素的数量，还是 HTML 元素的作用都是固定不变的。换句话讲，我们学习 HTML 简单来说就是学习 HTML 元素的含义、作用以及用法等内容。

4、HTML版本

在 HTML 版本发展历程中，大部分的版本都离我们远去了，也就是说我们并不关心，而需要关心的是 4.01 和 5 这两个版本。5 版本是 HTML 目前最新版本，也就是我们现在常说的 HTML5，而且现在学习 HTML 都是针对 5 这个版本进行学习的。
反而需要特别关心的是 4.01 版本。因为 4.01 版本依旧存在于一些较老的网站或者系统中，如果将来你的工作是对这些网站或者系统进行升级工作的话，那么就需要了解 4.01 这个版本的内容。

二、框架

1、基本概念

1、<!DOCTYPE>  
声明、元素和注释等内容
<!DOCTYPE html>在HTML5版本，基本结构的第一行，这块内容被称为 HTML 声明。HTML 声明的作用是浏览器运行该 HTML 页面时，告知浏览器当前 HTML 页面的版本。这样浏览器会准确地进行解析并展示其内容。

2、<html> 元素：表示当前 HTML 页面的根元素，用来包含所有其他 HTML 元素。
<html lang=""en">   en为（english）英文网站，可以输出为中文,只是会让你的浏览器提示你要不要翻译此页,如果改成zh-cn（中文）就没有翻译的选项了 

3、<head> 元素：表示当前 HTML 页面的头部，用来定义当前 HTML 页面的基本信息，例如标题、关键字、作者等内容。

4、<body> 元素：表示当前 HTML 页面的主体，用来定义最终显示在浏览器窗口的内容。

2、HTML元素

除了 HTML 声明之外，其他内容都是 HTML 元素
元素（Element）：是用来包含文字、图片或者音视频的内容，一般是由标签+内容组成。
标签（Tag）：是元素的组成部分，一般分为开始标签和结束标签。

HTML 元素可以分为闭合元素和空元素两种类型

闭合元素：具有开始标签和结束标签，而且开始标签和结束标签是成对出现的
空元素：只有开始标签，而没有结束标签。

注意：<html> 元素是比较特殊的元素，称为根元素。在一个 HTML 页面中只能存在一个 <html> 元素，即使编写了多个 <html> 元素，运行 HTML 页面时浏览器也会自动忽略。

3、简单标签（了解）

一、双标签
1、“ol”有序列表
2、 “ul”无序列表 
3、 “h1~h6‘’递减标题标签
4、‘’html‘’超文本标记语言
5、‘’超文本‘’指页面内可以包含图片、链接、音乐、程序等非文字元素。一种静态的前端，可以说是前端的基础，web是动态前端。
6、‘’body‘’主体的意思。，部分提供网页的内容。
7、‘’head‘’开头，提供网页的信息。
8、‘’p‘’段落标签
9、‘’u‘’字体下划线
10、‘’s‘’中间一条删除线
11、‘’b‘’加粗 
12、‘’i‘’ 倾斜
13、‘’ol‘’组合列表标签有序，‘’li‘’是子列表，建立列表必要代码 ‘’ul‘’无序列表标签

二、单标签
1、‘’ <hr />‘’整行下划线
2、‘’<br />‘’换行标签
3、‘’<img src=“xxx" widh=500 height=200/> img是图片标签，src是图片路径，xxx是图片文件后缀名,widh是图片宽度，hight是图片高度，（如果图片路径不在同一个文件当中，比如在log文件中，那么格式是<img src="log/xxx"）

三、表格标签
1、‘’table（双）‘’是建立列表开始标签
  <table >里加‘’border‘’表边框，加边框数值，
 例：<table border="1"> ， 叫做标签属性，=左面表属性，=右面叫做属性值
2、 <table align="center">  align，是表列表对齐格式，center表居中对齐，<table align="right">表右对齐，当然left表左对齐
3、<table width=''500''> width是表格宽度的意思，500是像素宽值
      
4、   在<table></table>里面嵌套‘’tr（双）‘’表行（双），在<tr></tr>里面嵌套‘’td（双）‘’表列  
例如俩行一列: 
<tr> <td></td> </tr>
<tr> <td></td> </tr>
俩行俩列，例：
<tr>
       <td></td>
       <td></td>
</tr>

<tr>
       <td></td>
       <td></td>
</tr>

（1）<td rowspan="2">是把俩行合并成一行（可以说是在这一行中占了俩个单元格），rowspan是一整行的单元格合并
（2）<td colspan="2">是把俩列合并成一列，是一整列的单元格合并
5、<table cellpadding="10"> cellpadding是单元格填充（可以说是一个箱子里面填了棉花或者泡沫，使箱子里面的东西到盒子内部的边，距离的变化）
6、<table cellspacing="1">cellspacing是单元格间距（可以说是一个货车里面装的每一个箱子之间的距离）

4、HTML 元素的属性

属性定义在元素的开始标签中，这样无论是闭合元素还是空元素都可以正常使用属性。属性的语法结构是键值对形式的。

属性名（attribute name）：其数量和作用都是 HTML 给定的。
属性值（attribute value）：属性对应的值，建议使用一对双引号进行包裹。

例：
<div id="box">文本内容</div>
id 为属性名，box为属性值

同一个元素是允许编写多个不同的属性，但在同一个元素中不能同时定义多个相同的属性。
再有，HTML 元素的属性可以划分为以下 4 种：
1、标准（通用）属性：HTML 元素几乎都具有的属性，例如 id、name、style 和 class 属性等。
2、专有（私有）属性：HTML 中某些元素特有的属性，例如 <form> 元素的 action 属性等。
3、事件属性：用来为 HTML 元素注册 DOM 事件的属性，例如 onclick 属性等。
4、自定义属性：第三方框架中为了完成某个特定功能而定义的属性，例如 Vue 框架的 v-if 属性等。

5、head 包括的元素

<meta> 元素：定义 HTML 页面的元数据信息，例如编码格式、作者、关键字等。
常用：<meta charset="UTF-8">

<title> 元素：定义 HTML 页面的标题，显示在浏览器的标题或标签页上。

<base> 元素：定义 HTML 页面中所有相对 URL 的根 URL。

<link> 元素：定义 HTML 页面引入的外部资源，比较常见的是引入外部 CSS 文件或图标文件等。
    
<style> 元素：定义 HTML 页面的 CSS 样式，一般称为内嵌样式表。

<script> 元素：定义 HTML 页面的可执行的脚本，一般多为 JavaScript 脚本。
    
<noscript> 元素：定义当 HTML 页面的脚本代码不被支持或者浏览器关闭了脚本执行时的替代内容。

<command> 元素：定义 HTML 页面允许用户可以调用的命令。该元素已被废弃！

6、meta 元素

<meta> 元素是用来定义不能由 <base>、<link>、<script>、<style> 和 <title> 元素定义的元数据信息。并且 <meta> 元素是个空元素。

<meta> 元素常用的用法如下所示：

为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：
<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者：
<meta name="author" content="KingJ">

每30秒中刷新当前页：
<meta http-equiv="refresh" content="30">

HTML5 版本定义编码格式：
<meta charset="UTF-8">

定义 HTML 页面的视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

7、HTML 注释

与很多开发语言类似，HTML 语言提供了编写注释的语法内容。在浏览器运行 HTML 页面时，浏览器会自动忽略注释里面的内容，用户是看不到 HTML 页面中有关注释的内容的。

当一段内容被 <!-- 和 --> 包裹起来时，那么这段内容就是一个注释内容。选中要注释内容 快捷键 Ctrl /