python之路_前端之HTML初始

一、html定义

　　html是用来描述网页的一种语言，需注意如下几点：

　　　　（1）html指的是超文本标记语言（Hyper Text Markup Language)。

　　　　（2）html‘不是一种编程语言，而是一种标记语言。

　　　　（3）标记语言是一套标记标签。

　　　　（4）html是使用标记标签来描述网页。

二、html结构

<!DOCTYPE html>          "告诉浏览器使用什么样的html或者xhtml来解析html文档"
<html></html>            "是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。"
<head></head>            "元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。"
<title></title>          "定义网页标题，在浏览器标题栏显示。 "
<body></body>            "之间的文本是可见的网页主体内容"

三、标签介绍

1、标签格式

1、标签是由尖括号包围的关键字,如<html>。
2、标签一般是成对出现的，比如<div> </div>。
3、标签不用区分大小写，推荐小写。
4、标签分为两部分，开始标签<a>和结束标签</a>，两标签之间的部分称为标签体，有些标签功能比较简单，使用一个标签即可，这种标签称为自闭和标签。
5、标签可以有若干个属性，也可以不带标签。
6、标签可以嵌套，但是不能交叉嵌套。

标签语法：

　　（1）成对标签：<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

　　（2）自闭和标签：<标签名属性1=“属性值1” 属性2=“属性值2”…… />

2、标签分类

　　按照标签主体内容所占的行数，标签可以分为：（1）块级标签：独占一行，如<h>系列、<p>、<div>；（2）内联标签：按照内容进行扩展，如<b> < em> <sup> <sub> <span> <a>

　嵌套规则：块级可以嵌套块级和内联；但是内联只可以嵌套内联。

四、常见标签

（一）<head>内常用标签

（二）<body>内常用标签

1、标题标签<h>

　　标题标签共分为六个等级，分别为：<h1> - <h6> ，属于块级标签，一个标题独占一行。如下实例：

2、段落标签<p>

　　段落标签，包裹的内容被换行，并且上下内容之间有一行空白，属于块级标签。实例如下：

3、超链接标签<a>　所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。（1）绝对链接（2）相对链接

　（3）页内抛锚

4、图像标签

5、表格标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<table border="2" cellpadding="5" cellspacing="10" align="center">
'''border: 表格边框. cellpadding: 内边距 cellspacing: 外边距.'''
    <tr >                                                           #  <tr > 表的行
        <th align="center" bgcolor="blue">项目</th>
        <th align="center" colspan="5" bgcolor="aqua">上课</th>     # colspan:  单元格横跨多少列（即合并单元格）
        <th align="center" colspan="2" bgcolor="#8a2be2">休息</th>
    </tr>
    <tr>
        <th>星期</th>                                               # <th>表的列项目
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
    </tr>
    <tr>
        <td rowspan="4" bgcolor="#ffd700">上午</td>
        <td>语文</td>                                              # <td>表的列内容
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4" bgcolor="#8a2be2">休息</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机</td>
        <td>英语</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="#ffd700">下午</td>            #rowspan:  单元格竖跨多少行
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="2" bgcolor="#8a2be2">休息</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>

</table>

</body>
</html>

6、表单标签<form>

　　表单工作原理：访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。主要包含两个属性分别为：a. action：表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理。b. method：表单的提交方式 post/get默认取值就是get。

　　表单标签包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。以及textarea、select、fieldset和 label标签，分别介绍如下：

（1）<input>系列标签

'''
<1> 表单类型

type:        text 文本输入框
             password 密码输入框
             radio 单选框
             checkbox 多选框  
             submit 提交按钮            
             button 按钮(需要配合js使用.) button和submit的区别？
             file 提交文件：form表单需要加上属性enctype="multipart/form-data" 
             　　上传文件注意两点：请求方式必须是post；enctype="multipart/form-data"

 <2> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；
           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本
                 
                type="text", "password", "hidden" - 定义输入字段的初始值
                 
                type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

'''

　　text、password、submit类型实例：

　　checkbox与radio实例：

　　file 、reset 、button实例：

（2）select系列

　　具体实例如下：

（3）<textarea>多行文本框

（4）<lable>标签

　　定义：<label> 标签为 input 元素定义标注（标记）。说明：1 label 元素不会向用户呈现任何特殊效果。2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

7、列表标签

（1）无序列表<ul>

 上述type属性包含如下几种类型：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)。（2）有序列表<ol>（3）自定义列表<dl>8、<div>和<span>标签　　<div>是一个块级标签，独占一行；<span>是一个内联标签。无实际意义。主要是通过css为其赋予不同的表现的形式。9、其他标签

'''
<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

'''

来源：https://www.cnblogs.com/seven-007/p/7773563.html

标签

html语言