python-HTML初始-1

一、HTML文档结构

HTML基本格式：

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

</body>
</html>

1、<!DOCTYPE html>：声明为HTML5标签；

2、<html>,</html>是HTML开始结束标签，它里面包括<head><body>；

3、<head>标签定义HTML的头部，这里面的内容不会显示在浏览器正文，它里面包含一些meta数据；

4、<body>标签定义HTML的主体，是网页的主体内容；

5、<title>标签定义HTML标题，在浏览器标题栏显示；

注意：charset="UTF-8"是申明编码，避免出现乱码，特别是对于中文，要声明为UTF-8或者GBK。

二、HTML注释

HTML注释采用如下格式：

<!-- 注释内容 -->

三、HTML标签格式

1、HTML标签格式

HTML标签是<>包含的关键字，比如<html>，<head>，<body>等；
HTML标签通常是成对出现的，比如<html>...</html>；
也有部分HTML是单独出现的，这种标签称为自闭和标签，比如<hr/>，<br/>等；
标签中有很多属性，比如<img src=" " id=" "/>，属性都是键值对组成；

2、HTML标签语法

<标签名属性名=“属性”>内容</标签名>
<标签名属性名=“属性”/>

3、HTML标签重要属性

id：定义标签的唯一ID
class：为html元素定义一个或者多个类名
style：定义元素的样式

4、HTML常用的标签

（1）、head内常用的标签

<title></title>：定义网页标题
<style></style>：定义内部样式
<script></script>：定义JS代码或者引用外部JS
<link/>：引用外部样式
<meta/>：定义网页原信息

其中：meta标签可提供页面的原信息，可供搜索引擎的更新频度的描述和关键词，它位于文档的头部，不包含任何内容，它提供的信息是用户不可见的。

meta表示包括两种属性：

http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值；
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

（2）、body内常用的标签

a、基本标签

<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>

b、特殊字符

空格  &nbsp;
>    &gt;
<    &lt;
&    &amp;
¥    &yen;
版权    &copy;
注册    &reg;

c、重要标签

（1）、div和span标签

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

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

注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。p标签不能包含块级标签，p标签也不能包含p标签。

（2）、img标签

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

（3）、a标签

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

例如：

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

其中target属性值有：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

（4）、列表

列表包括：

有序列表
无序列表
标题列表

<!--无序列表-->
<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
</ul>
<!--有序列表-->
<ol>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
</ol>
<!--标题列表-->
<dl>
    <dt>AAAA</dt>
    <dd>aaaa</dd>
</dl>

（5）、表格

表格的基本结构如下：

<!--表格-->
<table border="1px">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>小白</td>
        <td>18</td>
        <td>99</td>
    </tr>
    </tbody>
</table>

其中属性为：

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

猜你喜欢