HTML常用标签及web服务

web服务：

　　顺序：浏览器发送请求------服务端收到请求并处理----------返回处理结果--------------浏览器展示

　　我们可以使用socket模拟一个后端，前端html页面直接在form表单中指向该地址和端口

import socket

sk=socket.socket()
sk.bind(('127.0.0.1',10055))
sk.listen()

while 1:
    conn,addr=sk.accept()
    data=conn.recv(1024)
    # 前后端 使用http格式交互数据，在浏览器直接访问
    print(data)
    # with open('data','rb')as f:
    #     msg=f.read()
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    conn.send(b'ok')
    conn.close()

sk.close()

html常用标签：

<!DOCTYPE html>          声明为html5
<html lang="zh-CN">      文件开始
<head>                   头部 定义了html文件的开头部分
    <meta charset="UTF-8"> 在头部 声明 编码方式
    <title>Title</title>   定义了网页标题
</head>
<body>                     html文件主体部分

</body>
</html>

　　head内常用标签：


title	定义网页的标题
style	定义内部样式（css）
script	定义js代码或引入外部js文件
link	引入外部样式相当于python中的import
meta	定义网页元文件

　　　　meta标签：

　　　　　　1： http-equiv 属性：相当于http的文件头，像浏览器传送一些有用的信息，以帮助浏览器正确的网页内容

　　　　　　　　3秒后跳转指定网站　　

<meta http-equiv="refresh" content="3;http://www.baidu.com">

　　　　　　　　指定html文件的编码类型

<meta http-equiv="content-Type" charset="UTF8">

　　　　　　　　告诉IE以最高级模式渲染文档

<meta http-equiv="x-ua-compatible=" IE=edge">

　　　　　　2:name属性，用于描述网页，便于爬虫的查找和分类信息用

<meta name="keywords" content="前端学习，css，html">

　　body内标签：

　　　　基本标签：

b	加粗
i	斜体
u	下划线
s	删除
p	段落标签
h1--h6	标题
br	换行
hr	水平线

　　　　特殊字符：

&nbsp	空格
&gt	大于
&lt	小于
&amp	&
&yen	人民币标识￥
&copy	版权
&reg	注册

　　　div和span标签

　　　　　　这俩个标签并没有实际的意义，主要是利用css为其赋予不同的样式。div是块级标签，span是行内标签。

一个行内标签是不能内嵌块级标签的。块级标签则则可以内嵌块级标签和行内标签，但是块级标签p不能

　　　　　　内嵌div标签。

　　　img标签和a标签：

　　　　　　img标签是图片标签，常用属性 src alt title

<img src="http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg" alt="ssss" title="nihao">
其中src 指定图片路径，也可以指向内部图片路径
alt 是当指定的图片不存在的时候的显示
title 是当鼠标放到图片上的显示内容

　　　　　　a标签是超链接常用属性href target

<a href="www.baidu.com" target="_blank">百度</a>

targe属性控制跳转网页是否重新打开一个浏览器窗口_self  _blank
href除了相对路径和绝对路径之外，还可以指定为锚链接，通常指向网页中的标签的id属性
（href="#id1"）

　　　　列表中的标签;

　　　　　　ul 无序列表：

<ul type="cirle">
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
</ul>

type属性：
        disc      实心圆点
        circle    空心圆点
        square  实心方块
        none     无样式

　　　　　　ol 有序列表：

<ol type="1" start="2">
    <li>aaaa111</li>
    <li>aaaa222</li>
    <li>aaaa333</li>

</ol>

type属性：
        1 数字列表
        A 大写字母
        a  小写字母
        I  大写罗马
        i   小写罗马


start属性： 指定从那个序号开始

　　　　　　dl 标题列表：

<!--标题列表-->
<dl>
    <dt>标题</dt>
    <dd>safdsf</dd>
    <dt>标题2</dt>
    <dd>sdf</dd>
    <dd>sdfsdf</dd>
</dl>

　　　　　　表格：表格的结构和html文件相类似，区别就在与表头和表体列的标签不同

<table border="1" cellpadding="10" cellspacing="10">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>小强</td>
        <td>18</td>
        <td>奥特曼</td>
    </tr>
    </tbody>
</table>
<!--
table 中通常包含thead tbody
thead 使用tr标识行    行内通常使用th标识列
tbody 使用tr标识行    行内通常使用td标识列


属性值:
board  外边框
cellpadding    内边距
cellspacing    外边距
width          像素 百分比 （一般通过css样式  来设置长度）
rowspan        单元格竖跨多少行
colspan        单元格横跨多少列（合并单元格）

　　　　　　form表单：用于向服务器传输数据，实现前后端的交互

　　　　　　　　form表单属性：

accept-charset	表单提交中使用的字符集
action	指向对应的后端地址
autocomplete	自动填充
enctype	调教数据的编码
method	请求方法
name	表单的名称
novalidate	不验证表单内数据
target	规定action属性中地址的目标

　　　　　　　　input：input标签有多种形态，主要靠type属性值来定义

text	单行输入框	<input type="text">
password	密码输入框	<input type="password">
date	日期	<input type="date
checkbox	多选框	<input type="checkbox">
radio	单选框	<input type="radio">
submit	提交按钮	<input type="submit">
reset	重置	<input type="reset">
button	按钮，通常和js的事件绑定	<input type="button">
hidden	隐藏	<input type="hidden">
file	文件选择框	<input type="file">

　　　　　　　　input标签属性说明：

　　　　　　　　　　name：input里，name充当键名的作用，与实际输入的值，形成键值对，提交的时候发送到后端。在radio单选框中用name做为一组

　　　　　　　　　　value：表单提交时对应项的值。

　　　　　　　　　　　　　 button reset submit 时，为按钮上显示的文本内容

　　　　　　　　　　　　　 text password hidden时为输入框默认值

　　　　　　　　　　　　　 checkbox radio file 时为输入相关联的值

　　　　　　　　　　checked：radio和checkbos默认被选中的项

　　　　　　　　　　readonly：text和password为只读

　　　　　　　　　　disabled：素有input均使用

　　　　　　　　select标签：　　

<select name="addr" id="s2" multiple>
<!--        multiple 属性 限定多选或者单选-->
        <option value="bj">北京</option>
        <optgroup label="上海">
            <option value="pudong">浦东新区</option>
            <option value="minhang">闵行区</option>
            <option value="huangu">黄埔区</option>
        </optgroup>
    </select>



multiple  布尔属性，设置后为多选，否则默认单选
disabled  禁用
selected  默认选中
value      定义提交时的选项值

　　　　　　　　label标签：label标签为input元素定义标注，并不会呈现任何的效果，for属性关联对应标签id值

<!--         lable 标签用于关联的input框 除了用for关联id 也可以直接将input框直接写在lable框内-->
        <lable for="'i1'">用户名：</lable>
        <input id="i1" name="username" type="text" readonly value="usename"></p>

　　　　　　　　textarea多行文本：

  <textarea cols="30" rows="10" ></textarea>>

name:      名称
rows:       行数
cols:        列数
disabled：禁用

　　　　　　　　文件类型：

<!--    如果表中有file 文件类型 那么在表单标签位置要指定请求类型
和数据封装类型      form action="http://127.0.0.1:10055" method="get" enctype="multipart/form-data"
并且只有 指定了数据封装类型 后台才能拿到文件 -->
    <p><input type="file" value="备注"></p>

补充：

　　　　1 pycharm提供了代码补全插件:

  
h1*3>a.c1[id=a$,name=d$]{a标签$}

$代表序号  a.c1  这个c1默认是class  {}中的内容是内包标签的内容



执行后效果如下
<h1><a href=""  class="c1" id="a1" name="d1">a标签1</a></h1>
<h1><a href="" class="c1" id="a2" name="d2">a标签2</a></h1>
<h1><a href="" class="c1" id="a3" name="d3">a标签3</a></h1>

　　 2 pycharm提供了代码格式化插件:

　　　　　　code-----》refeformat code

posted @ 2020-02-04 19:05 Yuan_x 阅读(252) 评论(0) 收藏举报

刷新页面返回顶部

摩羯男

HTML常用标签及web服务

web服务：

html常用标签：

head内常用标签：

body内标签：

补充：

公告