HTML

HTML是一种弱势语言,不区分大小写,

HTLM结构:

声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
body部分：我们所写的代码必须放在此标签內

一.HTML的基本语法特征

(1)HTML对换行不敏感,对tab不敏感

(2)空白折叠现象:文字之间,如果有空格,换行,tab都将被折叠为一个空格

(3)标签之间要严格封闭

二.HTLM结构详解

新建文件,输入 ! 按下tab键后,自动生成如下代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

1.头标签(head)

head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

<title>：指定整个网页的标题，在浏览器最上方显示。
<meta>：提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
<style>:定义内部样式表与网页的关系

1.1.http-equiv属性

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

1.2.name属性

(1)name="Keywords"

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

(2)name="Description"

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、
游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，
网聚人的力量。"

(3)name=viewport

下面这个标签，是让我们网页支持移动端，移动设备优先（了解即可）

<meta name=viewport content="width=device-width, initial-scale=1">

1.3.title标签

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。如博客后台管理

二.body标签中相关标签

1.字体标签

(1).h1-h6:(独占一行)

<h1>哈哈</h1>
<h2>哈哈</h2>
<h3>哈哈</h3>
<h4>哈哈</h4>
<h5>哈哈</h5>
<h6>哈哈</h6>

(2).粗体标签(不会自动换行)<b>(已废弃)<strong>

<body>
<span>哈哈哈</span> <br>     #br换行
<h3><b>哈哈哈</b></h3><hr>   #hr分割线
<strong>哈哈哈</strong>

<u>哈哈</u>   #加下划线


</body>

哈哈

(3).斜体标签<em> (已废弃) <i>

<em>哈哈哈</em>

哈哈哈

(4).上标<sup>下标<sub>

b的意思是bottom：底部

5<sup>2</sup>
8<sub>2</sub>

2.特殊字符

&nbsp:空格

&lt:小于号(左边的小)

&gt:大于号

三.排版标签

　　HTML标签是分等级的:HTLM将所有的标签分两种:

　　文本级标签:p.span. a. b(加粗),i(斜体).u(下划线),

　　容器级标签:div h系列 li dt dd ,容器器级标签里可以放任何东西

　　p标签是一个文本及标签,p里面只能放文字,图片.表单元素,其他一律不可以放,p里面可以放a标签,a的语义小,a就可以当做文本处理,所以p里面相当于放的纯文字

1.段落标签<p>:块级,里面不可以放p标签

　　属性:align='属性值':对齐方式. 属性值包括:left center right

2.块级标签:

　　(1)div:把标签中的内容作为一块来对待,必须独占一行

　　　　align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

　　div里面可以放div(嵌套关系)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ha{
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .ha1{
            width:100px;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="ha">
        <div class="ha1"></div>
    </div>
</body>
</html>

　　(2)span:span里面只能放置文字、图片、表单元素。

　　<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

四.超链接标签

1.外部超链接:连接外部文件

在body中连接test.htlm 点击来自测试跳转到test.htlm里

 <a href="test.html">来自测试</a>

当然也可以直接点进连接,访问一个网址

<a href="http://www.baidu.com" target="_blank">进入百度</a>

2.锚链接:

　　指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。效果如下

说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

p标签没有name 用id可以属性(一定要加#)

 <a href="#beijing">点击跳转到北京</a>

3特殊的几个连接

(1)返回页面顶部的位置

 <a href="#">跳转到顶部</a>

(2)

<a href="javascript:;">内容</a>

javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</a>

(3)超链接的属性

href：目标URL
title：悬停文本。
(id)name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self：在同一个网页中显示（默认值）
_blank：在新的窗口中打开。
_parent：在父窗口中显示
_top：在顶级窗口中显示
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，
就是在新的空白标签页中打开

五.图片标签:单边标签

(1)属性

　　src:路径图片的路径

　　width：宽度

height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

文本级的标签显示在浏览器上时，不管你的图片多高，它总会底边对齐，这是一种现象，“高矮不齐，底边对齐”。

此时大家可以给图片设置align属性，来查看效果吧！

注意:a标签里面放img图片的时候,需要给a标签设置宽高,否则会影响布局

不给a标签设置宽高

给a标签设置宽高
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        a{
            display: inline-block;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>

    <div class="box">
        <a href="javascript:void(0);">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537752361&di=eeaea9ec907f0162f3fd1f2e1ebaf9d0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F160216%2F5329500_160443_1.png" width="300" height="300">
        </a>
    </div>

    <div>
        
        <span>哈哈哈哈</span>
    </div>

</body>
</html>

三.遇到问题

1.中文乱码

在<head>中加入<meta charset="UTF-8">
2.从服务器接收到的中文乱码,引入urllib.parse

import socket
import urllib.parse
import requests
server=socket.socket()
server.bind(('192.168.13.62',80))
server.listen(5)
while 1:
    print('有人来了')
    conn,addr=server.accept()
    while 1:
        data=conn.recv(1024).decode("utf8")
        print(data)
        ret,pwd,tele,ma=data.strip().split('HTTP/1.1')[0].split('&')
        username=ret.split('=')[1]
        user = urllib.parse.unquote(username,"utf-8")
        pas=pwd.split('=')[1]
        print(user,pas)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <form action="http://192.168.13.62:80">
    <div class="header">
        <a href="http://www.baidu.com">
            <img src="https://passport.baidu.com/static/passpc-base/img/logo/baidu.gif" alt="百度稍后来">
        </a>
    </div>

    <p class="user">
            <label for="username">用户名:</label><input type="text" name="wd" id="username">
    </p>

    <p class="pwd">
            <label for="pwd">密&nbsp;&nbsp;码:</label><input type="password" name="pwd" id="pwd">
        </p>
     <p class="telephone">
            <label for="telepone">手机号:</label><input type="text" name="telepone" id="telepone">
        </p>
    <p class="yanzhengma">
            <label for="yanzhengma">验证码:</label><input type="text" name="yanzhengma" id="yanzhengma">
              <input type="submit" value="获得验证码"/>
        </p>

        <!--表单控件-->

        <input type="submit" value="注册"/>
     <!--搜索按钮-->
    </form>
</body>
</html>

六.列表标签<ul>  <ol>  <dl>
1.无序列表<ul>,无序列表中的每一项是li(容器级可以再加ul)
属性:typetype="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)
(去掉ul,ol,dl前面的点用list-style:none)

<ul>
        <li>北京
            <ul>
                <li>故宫</li>
                <li>颐和园</li>
            </ul>
        </li>

        <li>大连
            <ul>
                <li>星海公园</li>
                <li>发现王国</li>
            </ul>
        </li>

    </ul>

2.有序列表<ol>,有序列表的每一项都是li
属性:

type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

 <ol>
        <li>北京
            <ol>
                <li>故宫
                    <ol>
                        <li>东</li>
                        <li>西</li>
                    </ol>
                </li>
                <li>颐和园</li>
            </ol>
        </li>

        <li>大连
            <ol>
                <li>星海公园</li>
                <li>发现王国</li>
            </ol>
        </li>

    </ol>


3.自定义列表<dl>,自定义列表的每一项是dt(很重要)
没有属性。dl的子元素只能是dt和dd。

<dt>：definition title 列表的标题，这个标签是必须的
<dd>：definition description 列表的列表项，如果不需要它，可以不加

<dl>
    <dt>北京</dt>
    <dd>国家首都，政治文化中心</dd>
    <dt>上海</dt>
    <dd>有外滩、东方明珠塔、黄浦江</dd>
    <dt>广州</dt>
    <dd>中国南大门，有珠江</dd>
</dl>



七.表格标签<table>

<table>的属性：

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。


一个表格<table>是由每行<tr>组成的，每列是由<td>组成的。
三行两列

<table>
        <tr>
            <td>北京</td>
            <td>长城</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>东方明珠</td>
        </tr>
        <tr>
            <td>哈尔滨</td>
            <td>冰雪大世界</td>
        </tr>
    </table>

有边框的

<table border="_1_">
        <tr>
            <td>北京</td>
            <td>长城</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>东方明珠</td>
        </tr>
        <tr>
            <td>哈尔滨</td>
            <td>冰雪大世界</td>
        </tr>
    </table>

变成细的边框

<table border="1" style="border-collapse:collapse;">
        <tr>
            <td>北京</td>
            <td>长城</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>东方明珠</td>
        </tr>
        <tr>
            <td>哈尔滨</td>
            <td>冰雪大世界</td>
        </tr>
    </table>

`<tr>`：行

一个表格就是一行一行组成的嘛。
属性：

dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom

`<td>`：单元格

属性：

align：内容的横向对齐方式。属性值可以填：left right center。
如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。

单元格的合并

如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：

colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上



纵向合并

<table border="1" style="border-collapse:collapse;">
        <tr>
            <td>北京</td>
            <td>长城</td>
        </tr>
        <tr>
            <td>上海</td>
            <td rowspan="2">好地方</td>
        </tr>
        <tr>
            <td>哈尔滨</td>

        </tr>
    </table>

横向合并

<table border="1" style="border-collapse:collapse;">
        <tr>
            <td colspan="2">北京</td>

        </tr>
        <tr>
            <td>上海</td>
            <td>迪士尼乐园</td>
        </tr>
        <tr>
            <td>哈尔滨</td>
            <td>冰雪大世界</td>
        </tr>
    </table>

`<caption>`：表格的标题。使用时和`tr`标签并列

表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签

<table border="1" style="border-collapse:collapse;">
    <caption>地点介绍</caption>
    <tfoot>
        <tr>
            <td >北京</td>
            <td >长城</td>
        </tr>
    </tfoot>
    <thead>
        <tr>
            <td>上海</td>
            <td>迪士尼乐园</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>哈尔滨</td>
            <td>冰雪大世界</td>
        </tr>
    </tbody>
    </table>


八.表单表签<form>

表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

属性：

name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
method：表单数据的提交方式，一般取值：get(默认)和post

form标签里面的action属性和method属性，在后面课程给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

get提交和post提交的区别：
GET方式：
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式：
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
Multipart/form-data：上传附件时，必须使用这种编码方式。

属性：

type="属性值"：文本类型。属性值可以是：
- text（默认）
- password：密码类型
- radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
  ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
- checkbox：多选按钮，名字相同的按钮作为一组进行选择。
- checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
- hidden：隐藏框，在表单中包含不希望用户看见的信息
- button：普通按钮，结合js代码进行使用。
- submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
- reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
- image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
- file：文件选择框。
  提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
value="内容"：文本框里的默认内容（已经被填好了的）
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

posted @ 2018-09-17 00:19 2275114213 阅读(267) 评论(0) 编辑收藏举报

2275114213

HTML

一.HTML的基本语法特征

二.HTLM结构详解

1.头标签(head)

1.1.http-equiv属性

1.2.name属性

1.3.title标签

<tr>：行

<td>：单元格

单元格的合并

<caption>：表格的标题。使用时和tr标签并列

表格的<thead>标签、<tbody>标签、<tfoot>标签

公告

`<tr>`：行

`<td>`：单元格

`<caption>`：表格的标题。使用时和`tr`标签并列

表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签