python爬虫-学习记录day01HTML页面的构成 1. 什么是HTML HTML是用来描述网页的一种语言。 HTM

HTML页面的构成

1. 什么是HTML

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
HTML使用标记标签来描述网页

2. HTML标签

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

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

3. 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
</body>
</html>

例子解释：

<html>与</html>之间的文本描述网页
<body></body>之间的文本时可见的页面内容
<h1>与</h1>之间的文本被显示为标题
<p>之间的文本被显示为段落</p>

4. HTML常用标签

4.1 标题标签（h1-h6）

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

4.2 段落标签（p）

<p>第一个段落</p>
<p>第二个段落</p>

主要用于将一段内容裹起来，便于后期的统一设置 p标签本身没有效果，标签内的内容与标签外的内容空一行（自动换行）

4.3 换行标签（br）

<br/>

此标签属于单标签

4.4 水平线标签（hr）

<hr/>

此标签属于单标签

4.5 图片标签（img）

<img src='图片地址'/>

4.6 超链接标签（a）

<a herf='xxx.html'>我的第一个超链接</a>

超链接：使用超链接可以访问另一个页面

4.7 列表标签

有序列表

<ol>
    <li>登录</li>
    <li>注册</li>
    <li>退出</li>
</ol>

无序列表

<ul>
    <li>登录</li>
    <li>注册</li>
    <li>退出</li>
</ul>

<li>表示列表项

4.8 文本格式标签

<strong></strong>加粗
<em></em>倾斜
<del></del>删除线
<ins</ins>下划线

在网页中，有时需要为文字设置粗体、斜体或者下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

4.9 表格（table）

<h1>一列:</h1>
    <table >
      <tr>
        <td>100</td>
      </tr>
    </table>

<h1>一行三列:</h1>
    <table >
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
    </table>

<h1>两行三列:</h1>
    <table>
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
</table>

4.10 表单

一般用于搜集用户的信息。在HTML中，一个完整的表单通常由表单控件、提示信息、表单域3个部分组成。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
表单控件：表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

1 表单域

是一个包含表单元素的区域
<form></form>标签用于定义表单域，会把范围内的表单元素信息提交给服务器

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

2 表单控件

input：输入表单元素
- type属性设置不同的类型（文本、单选、复选、按钮等）
- type属性的属性值及描述如下：

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

select：下拉列表单元素
- <select>中至少包含一对<option>
- 在<select>中定义selected='selected'时为默认选项
textarea：多行文本域元素
- cols="每行中的字符数"
- rows="显示的行数"
- 以上两个操作实际开发中用的很少
表单元素总结
- 表单元素我们学了三大组
  - input输入表单元素
  - select下拉表单元素
  - textarea多行文本域表单元素

4.11 特殊字符

4.12 div标签与span标签

div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
span标签：和div的作用一致，但不换行。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。 span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。

5. 练习

实现如下样式的表单：

html实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <p>
            用户名: <input type="text">
        </p>
        <p>
            密&emsp;码: <input type="password">
        </p>
        <p>
            年&emsp;龄: <input type="text">
        </p>
        <p>
            性&emsp;别: 男<input  type="radio" name="sex" value="男">
            女<input  type="radio" name="sex" value="女">
        </p>
        <p>
            技&emsp;能: python<input type="checkbox" >
            java<input type="checkbox" >
            php<input type="checkbox" >
            c++<input type="checkbox" >
        </p>
         <p>
            城&emsp;市: <select>
             <option>长沙</option>
             <option>南京</option>
             <option>厦门</option>
         </select>
             <p>自我介绍: <textarea maxlength="500"></textarea></p>

        </p>
        <p>
            <button>重置</button>
            &emsp;<button>清空</button>
        </p>
    </form>

</body>
</html>

html实现效果：