Python学习之路---前端--入门知识--HTML标签--常用标签

本文链接：https://blog.csdn.net/chengyinman0078/article/details/94402013

更详细的内容，请点击这里！！

什么是C/S架构，什么是B/S架构？

C/S结构是Client/Server的简称，指客户/服务器模式。它是软件系统体系结构，通过它可以充分利用两端硬件环境的优势，将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构。

B/S结构是Browser/Server的简称，指浏览器/服务器模式。这种模式只要客户机上安装一个浏览器，如Internet Explorer，服务器安装Oracle、MYSQL等数据库。浏览器通过Web Server 同数据库进行数据交互。

WEB服务的本质

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

HTML是什么？

•超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
•本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
•网页文件的扩展名：.html或.htm

HTML不是什么？

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

HTML使用标签来描述网页。

HTML文档结构--HTML5

<!DOCTYPE html>  <!-- 声明这是一个HTML文件 -- >
<html lang="zh-CN">  <!-- 声明使用什么语言 -->
<head> <!-- 这是定义HTML文档的开头部分 -->
  <meta charset="UTF-8"> <!-- 声明编码类型 -->
  <title>css样式优先级</title> <!-- HTML的网页标题 -->
  <style>CSS样式</style> 
       
</head><!-- 头部结束 -->
<body><!-- 可见的网页主体内容写在body里 -->

</body>
</html>

<!DOCTYPE html>声明为HTML5文档。
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
5.<body>、</body>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML标签格式

1、HTML标签是由尖括号包围的关键字，如<html>\<div>等；

2、HTML标签通常是成对出现的，比如<htlm></html>一个是开始，一个是结束，通常结束标签都会带一个‘’/‘’；

3、也有一部分标签是单独呈现的，比如<br/>换行符、<hr/>水平线、<img src=‘’‘’ />等等；

4、标签里面可以有若干属性，也可以不带属性；

标签的语法

<!-- 示例 -->
<标签名 属性1="属性值1" 属性2=“属性值2” ...> 内容部分 </标签名>
<标签名 属性1="属性值1" 属性2=“属性值2” ... />

几个很重要的属性：所有标签都可以用到的属性

id:定义标签唯一ID，HTML文档树中唯一；
class:为HTML元素定义一个或多个类名（classname）（CSS样式类名）;
style:规定元素的行内样式(CSS样式)；

HTML注释

<!-- 注释内容 -->

<! DOCTYPE>标签

<!DOCTYPE> 申明必须是HTML文档的第一行，位于<html>标签之前；

<!DOCTYPE>声明的不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML常用标签

head内常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

meta标签

meta标签介绍：

1、<meta>元素可以提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词；

2、<meta>标签位于文档的头部，不包含任何内容；

3、<meta>提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能；

1、http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地宣誓网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值；

<!--2秒后跳转到对应的网址，注意引号--><!-- 页面自动刷新后，跳转到某个网页 -->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2、name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的；

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="How to study Python">

body内常用标签

基本标签（块标签、内联标签）

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

块标签	内联标签
<p> <div><h1-h6><hr><ul><ol><dl><table><form>...	<a><span><br><img><i><u><inpuy><select><textarea>

块级标签和内联标签的区别：
所谓块级标签，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

标签嵌套规则

1、内联标签不能包含块级标签,只能包含其他内联标签，块级标签可以包含内联标签或某些块级标签；
2、P标签不能包含块级标签，p标签也不能包含p标签；

div 标签和span标签

div标签用来定义一个块级元素，并没有实际意义。主要是通过CSS样式为其赋予不同的表现；
span标签用来定义内联标签，并无实际意义。主要是通过CSS样式为其赋予不同的表现；

img标签 -- 图片标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签--超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址可以有几种类型：
•绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
•相对URL - 指当前站点中确切的路径（href="index.htm"）
•锚URL - 指向页面中的锚（href="#top"）
target属性：
._blank表示在新标签页中打开目标网页；
._self表示在当前标签页中打开目标网页；

列表（无序列表ul、有序列表ol、标题列表dl）

1、有序列表

<ul type="disc">
    <li>no.1</li>
    <li>no.2</li>
    <li>no.3</li>
</ul>
<!--
type属性：
    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）
-->

2、无序列表

<ol type="1" start="2">
    <li>no.1</li>
    <li>no.2</li>
    <li>no.3</li>
</ol>
<!--
type属性：
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马
-->

3、标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其他的表格等内容

表格最重要的目的是显示表格类数据。

表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构：

<table><!-- 标准的写法是包含了thead 和tbody的 -->
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>
<!-- 
属性:
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
    width: 像素 百分比.（最好通过css来设置长宽）
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列（即合并单元格)
-->