python之web

最新推荐文章于 2021-12-29 17:57:15 发布

pyh_yz

最新推荐文章于 2021-12-29 17:57:15 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/qq_41355482/article/details/97623173

版权

一、Web

web概述

在这里插入图片描述

Web的特点

1.易导航和图形化界面
2.与平台无关
3.分布式结构
4.动态性
5.交互性

Web工作原理

在这里插入图片描述

URL介绍

URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子：
http://www.westos.org/bbs/index.html

HTML网页结构

HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。
超文本指的是超链接
标记指的是标签
1).HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑。
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
HTML文档规范与注释
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)

HTML标签

文本标签

标题标签<h1></h1>一直到<h6></h6>，分别代表一到六级标题。
在这里插入图片描述
来看一个简单的文字效果。

<body>
<p>恩恩恩</p>
<b>呃呃呃</b><br>
<i style="color: blue">嘎嘎噶</i>
<h1>哈哈哈</h1>
<h6 style="">啦啦啦</h6>
</body>

列表标签

在这里插入图片描述
经常用的就属于无序列表了，看一个简单的例子。

代码实现：

<body>
<h1>无序列表：四大名著</h1>
<ul type="circle">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ul>
<h1>有序列表：四大名著</h1>
<ol type="a">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ol>
<h1>自定义列表：四大名著</h1>
<dl type="circle">
    <dt>四大名著</dt>
    <dd>西游记</dd>
    <dd>三国演义</dd>
    <dd>水浒传</dd>
    <dd>红楼梦</dd>
    <dt>HTML</dt>
    <dd>CSS</dd>
    <dd>JS</dd>
</dl>
</body>

图片标签img

标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
属性：src: 图片名及url地址 title：文字提示属性
alt: 图片加载失败时的提示信息 width/height：图片宽度/高度

我们来设置一个简单的图片样式。
在这里插入图片描述
代码实现：

<body>
<div style="width: 117px">
    <img src="./img/computer.jpg"
         alt="电脑"
         title="Mac Book"
         width="300px"
         height="200px"
         ><br>
    <b>Mac Book</b>
    <b style="color: red">￥8999</b><br>
</div>
</body>

超链接标签

<a href=" ">...</a> 超级链接标签

属性：
href: 必须，指的是链接跳转地址;
target: 表示链接的打开方式。
_blank 新窗口 ,
_self 本窗口（默认）
title：文字提示属性
举一个简单的例子：
在这里插入图片描述
代码实现：

<body>
<h3 style="color: midnightblue">焦点新闻</h3>
<hr>
<a href="#" style="color: black;font-size: 25px">医院被指窗口太低，回应：正整改</a><br>
<ul type="circle">
    <li><a href="#" style="color: black">医院被指窗口太低，回应：正整改</a></li>
    <li><a href="#" style="color: black">医院被指窗口太低，回应：正整改</a></li>
    <li><a href="#" style="color: black">医院被指窗口太低，回应：正整改</a></li>
    <li><a href="#" style="color: black">医院被指窗口太低，回应：正整改</a></li>

</ul>
<hr>
<a href="#" style="color:black ;font-size: 25px">移动道歉</a><br>
<ul type="circle">
    <li><a href="#" style="color: black">移动道歉</a></li>
    <li><a href="#" style="color: black">移动道歉</a></li>
    <li><a href="#" style="color: black">移动道歉</a></li>
    <li><a href="#" style="color: black">移动道歉</a></li>
</ul>
</body>

锚点链接：
1. 定义一个锚点：
百度一下
2. 使用锚点：
跳到a1处

表格标签

在 HTML 文档中,广泛使用表格来存放网页上的文本和图像；
标签:
表格标签:table；行标签:tr；单元格(表示列的概念):td；表头:th :加粗并且居中
表格标题:caption
标签合并：行合并:rowspan、列合并:colspan
标签常用属性：border:边框、width:宽度、height:高度、algin:对齐方式、center,left,right
在这里插入图片描述

<body>
<table border="1px"  width="50%" style="border: 1px;text-align:center;bordercolor:green">
    <caption>课程表</caption>
    <tr>
        <td>项目</td>
        <td colspan="5">上课</td>
        <td colspan="2">休息</td>
    </tr>
    <tr>
        <td>星期</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>

    </tr>
    <tr>
        <td rowspan="4" height="100px">上午</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td rowspan="4"></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" height="40px">下午</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td ></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <!--<td></td>-->
    </tr>
</table>
</body>

form表单标签

常用属性：
action属性:提交的目标地址(URL)
method属性:提交方式:get(默认)和post
get方式:
URL地址栏可见
长度受限制
相对不安全.
post方式:
URL地址不可见
长度不受限制
相对安全.

下拉列表标签

name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.

pyh_yz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python之web

一、Webweb概述Web的特点1.易导航和图形化界面2.与平台无关3.分布式结构4.动态性5.交互性Web工作原理URL介绍URL统一资源定位器可以理解为网址。构成如下：协议类型：//服务器地址（端口号）/路径/文件名例子：http://www.westos.org/bbs/index.htmlHTML网页结构HTML(Hyper Text Mark-up L...
复制链接

扫一扫