前端的开始

一,HTML介绍

web服务的本质

浏览器作为客户端,发出请求,--http协议,---服务端接收信息,---服务端回应----

服务端把html文件内容一bytes形式发送给浏览器,------浏览器开始渲染页面

import  socket
sk=socket.socket()
sk.bind(('127.0.0.1',8090))
sk.listen()
while 1:
    conn,add=sk.accept()
    conn.recv(1024)
    conn.send(b'http/1.1 40 ok\r\n\r\n')
    conn.send(b'hello')
    conn.close()

HTML:html就是超文本标记语言,是一种用于创建网页的标记语言

本质上是浏览器可以识别的规则,我们呢就按照规定的规则别写网页,对于不同的浏览器同一个

标签可能会有不同的解释,这就涉及到兼容性的问题了

 

网页的扩展名:HTML,或者htm

注意:

html只是一种标记语言并不是编程语言,它的主要作用是使用标签来描述网页的

最基本html文档的样式,对于pycharm来说,新建的时候选择html格式,就会自动弹出

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

</body>
</html>

解释:

<!DOCTYPE html>这一句是默声明为HTML5文档
<html>、</html> 是文档的开始标记和结束标记,是根本,在它们之间的是头部,head和主体,body
<head>、</head> 定义文档的开头,它们之间的内容不会在浏览器窗口显示,包含了文档的元(meta数据

<title>、</title> 定义网页标题,在浏览器标题栏显示
<body>、</body>一般写的就是文本的主要内容
注意:对于中文网页需要使用<meta charset=‘utf-8’>来声明,不然的话会乱码
HTML标签一般都是成对出现的。<div>开始 </div>结束
也有些是单个出现的:
<br/>换行
<hr/>
<img src=/>等
标签里可以有属性,也可以没有
  • id:定义标签的唯一ID,HTML文档树中唯一
  • class:为html元素定义一个或多个类名(classname)(CSS样式类名)
  • style:规定元素的行内样式(CSS样式)

 

在HTML里的注释还是control加?

 

title标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dajiahao</title>
</head>

<body>

</body>
</html>

 

meta标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--指定编码类型-->
    <meta charset="UTF-8">
    <!--设置关键字-->
     <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="百度">
    <!--设置标题-->
    <title>dajiahao</title>
    <!--设置时间后自动跳转到指定页面-->
    <meta http-equiv="refresh" content="3;URL=http://www.iqiyi.com" >
    <!--gaosu IE以最高等级渲染页面-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">



</head>


<body>

</body>

h1标签

<h1>hello s9!</h1>
<h2>hello s9!</h2>
<h3>hello s9!</h3>
<h4>hello s9!</h4>
<h5>hello s9!</h5>
<h6>hello s9!</h6>

style标签

<style>
        a {
            color: yellow;
        }
    </style>

<script></script>标签

提示作用,就是弹出页面

 <script>alert("niyoubing")</script>
在head里

<link/>   引入外部样式表文件

<link rel="stylesheet" href="22.css">

img标签

<img
id="i1"src="1.jpg" alt="出错了" title="亲爱滴"> 
设置唯一id 图片路径 提示信息 当鼠标在上面显示

a标签超链接

<a href="http://www.duba.com/xiaoshuowz.html?f=dh_ksrk" target="_blank">贱人</a>
设置在新的窗口打开   设置新的连接名

本页跳转

<a href="#a2">kk</a>
<div style="height:1000px;background-color: red"></div>
 <a href="" id="a2"></a>
<b>天王盖地虎</b>加粗
<i>天王盖地虎</i>倾斜
<u>天王盖地虎</u>下划线
<s>天王盖地虎</s>删除
<p>天王盖地虎</p>段落标签
<p>好吧VB不不不不不<br>不不不不不不<hr/>不过不不扩军不vsdvbmxcnmxn,不是</p>

 

br换行

hr水平线

如果在文本直接打空格那么无论你打几个,最后显示的都是一个,所以如果需要空格

那么我们就用&nbsp;来代替,需要注意的是,不加尖括号

左右括号

1&lt;a&gt;
&lt;左括号
 &gt;右括号
&amp; &
&yen; $
&copy; 版权
&reg;  注册

 

div标签---块级标签

 

span标签  内联标签

 

标签分类

块儿级标签 h1~h6 div p hr
默认占浏览器宽度
能设置长和宽
内联标签(行内标签) a img u s i b span
根据内容决定长度
不能设置长和宽

 

注意:

关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。

p标签不能包含块级标签。

 

 

列表

 

无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

 

 

有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

 

标题列表

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

 

表格

<table border="" >
    <thead>
    <tr>
        <th>
            序号
        </th>
        <th>
            姓名
        </th>
        <th>
            性别
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            1
        </td>
        <td>
            二狗
        </td>
        <td></td>
    </tr>
    </tbody>
</table>

属性:

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

 form表单

 功能:

表单用于向服务器传输数据,从而实现用户与web服务器的交互

表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等等

表单还可以包含textarea,select,fieldest和label标签

 

 

属性描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

表单的属性

action:规定向何处提交后面跟地址

注意:如果提交里的有文件那么 格式应该为:

<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data"

method当提交数据里包含文件的话就要用post,enctype:是规范提交文件的格式

name:规定识别表单的名称

input    里的type的属性

text:单行输入文本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form实例</title>
</head>
<body>
<form action="">
    <p>用户名:<input name="name" type="text">
    </p>

</form>




</body>
</html>

password:密码输入框

date:日期输入框

checkbox:复选框

radio:单选框

submit:提交

reset:重置按钮,就是同一个页面,填到一半的时候,想要重新写入,一键清除

button  普通按钮

hidden:隐藏输入框

file:文本选择框

<p>&nbsp; 码:<input nanme="npass"type="password">
</p>
    <p>&nbsp; 日:<input name="date"type="date">
    </p>
    <p>&nbsp;&nbsp;别:<input name="sex"type="radio"><input name="sex"type="radio"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;好:
        <input name="hobby"type="checkbox">女人
        <input name="hobby"type="checkbox">男人
        <input name="hobby"type="checkbox">篮球
        
    </p>
    <p>
        上传头像:
        <input name="file"type="file">
    </p>
    <p>
        <input name="submit" type="submit" value="提交">
    </p>
    <p>
        <input name="reset" type="reset" value="重置">
    </p>
    <p>
        <input type="button" value="普通按钮">
    </p>
<p>
    <input type="hidden">
</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;箱:<input type="email">
    </p>

 

属性需注意:

name:表单提交时的键和id是有区别的,

value:表单提交时,对应项的值

checked标签的应用:

用来设置,单选框,复选框的默认值

<p>&nbsp;&nbsp;别:
       
        <input  checked input name="sex"type="radio"><input name="sex"type="radio"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;好:

        <input checked name="hobby"type="checkbox">女人
        <input name="hobby"type="checkbox">男人
        <input checked name="hobby"type="checkbox">篮球
        
    </p>

readonly:text和password设置只读

<p>&nbsp; 码:<input readonly nanme="npass"type="password">
</p>

disabled标签,将所有input都变成灰色的,且禁止只读

<p>&nbsp; 码:<input disabled nanme="npass"type="password">
</p>

 

文本框:textarea标签

 <p>
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>

slect标签:

设置地址:

  地址:
        <select name="from" id="f1">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
    </select>                                               横向
        地址:
        <select name="from" id="f2" multiple>#multiple纵向
            <option value="bj">北京</option>
            <option value="sh">上海</option>
    </select>

三级菜单

<select name="from1" id="f3">
            <optgroup label="北京">
                <option value="cc">昌平</option>
                <option value="cc">该店</option>
            </optgroup>
        </select>

selectedmoren值在select里

 <select name="from" id="f1">
            <option  value="bj">北京</option>
            <option selected value="sh">上海</option>
    </select>

label标签

定义:label标签为input元素定义标注(标记)

1,label元素不会显示任何特殊效果

2,label标签的for属性值应当与相关元素的id相等

 <label for="l1"></label>
        <input id="l1" checked name="hobby"type="checkbox">女人
        <input name="hobby"type="checkbox">男人
        <input checked name="hobby"type="checkbox">篮球

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
。。。。。。。。。
</textarea>

name:名称

rows:行数

cols:列数

设置用户输入框里的灰色字   placeholder

<p>用户名:<input  name="name" type="text" placeholder="二狗">
    </p>

去掉输入框里的提示autocomplete

<form action="" autocomplete="off">

 

posted @ 2018-03-05 17:47  许光宗  阅读(125)  评论(0编辑  收藏  举报