html入门

「已注销」

已于 2023-05-16 19:10:32 修改

阅读量239

点赞数

分类专栏： python 文章标签： python

于 2023-05-15 22:20:41 首次发布

本文链接：https://blog.csdn.net/cs445579253/article/details/130687354

版权

python 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

flask快速创建网站：

from flask import Flask, render_template

app = Flask(__name__)
# 创建了网址/show/info和函数index的对应关系
# 以后用户在浏览器上访问/show/info，网站会自动执行index
@app.route("/show/info")
def index():
    return render_template("index.html")
    # Flask内部会自动打开这个文件，并读取内容，将内容返回给用户
    # 默认：取当前项目目录的templates文件夹里面找
if __name__ == '__main__':
    app.run()

浏览器能识别的标签：

# 2.浏览器能识别的标签



### 2.1 编码（head）

```html
<meta charset="UTF-8">
```



### 2.2 title（head）

```html
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
```

![image-20211119091846208](assets/image-20211119091846208.png)



### 2.3 标题

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>
```



### 2.4 div和span

```html
<div>内容</div>

<span>asdfa</span>
```

- div，一个人占一整行。【块级标签】

  ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>我的联通</title>
  </head>
  <body>
      <div>山东蓝翔</div>
      <div>挖掘机哪家强</div>
  </body>
  </html>
  ```

- span，自己多大占多少。【行内标签、内联标签】

  ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>我的联通</title>
  </head>
  <body>
      <span>山东蓝翔</span>
      <span>挖掘机哪家强</span>
  </body>
  </html>
  
  ```

  

注意：这两个标签比较素 + CSS样式。

### 2.4.5 超链接

```html
跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>
```

```html
跳转到自己网站其他的地址

<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>
```

## 2.4.6 图片

```html
<img src="图片地址" />
```

```html
直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
```

```html
<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />
```

关于设置图片的高度和宽度

```html
<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />
```

target="_blank"表示新开一个页面，如果没有表示在当前页面打开超链接

案例：商品列表

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>

<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/static/a1.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
    <img src="/static/a2.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/xiaomibuds3pro" target="_blank">
    <img src="/static/a3.jpeg" style="width: 150px">
</a>

</body>
</html>

列表标签：


```html
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>
```

```html
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>
```
# ol表示有序号的列表

表格标签：

<thead>表示头部<tr>表示一行，<th>表示一行里的一列

<tbody>表示身体<tr>表示一行，<td>表示一行里的一列

border=1，表示加上一个边框。

<table border=“1”>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
    </tbody>
</table>

input系列：

### 2.4.9 input系列（7个）

```html
<input type="text" />  #文本框
<input type="password">   # 密码框    
<input type="file">  # 选择文件框

<input type="radio" name="n1">男  # 单选框，只能选择一个，name必须相同来实现只能选择一个
<input type="radio" name="n1">女

<input type="checkbox">篮球  #复选框，可以同时选择多个
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交">  -->普通的按钮
<input type="submit" value="提交">  -->提交表单

下拉框：

### 2.4.10 下拉框

```html
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>  #多选的下拉框
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

多行文本：

### 2.4.11 多行文本

```html
<textarea></textarea>
<textarea rows="5"></textarea>  #默认是5行
```

页面上的数据，想要提交到后台：

- form标签包裹要提交的数据的标签。

- 提交方式：`method="get"`

- 提交的地址：`action="/xxx/xxx/xx"`

- 在form标签里面必须有一个submit标签。

- 在form里面的一些标签：input/select/textarea

- 一定要写name属性 `<input type="text" name="uu"/>`

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html入门

【代码】html入门。
复制链接

扫一扫

专栏目录

html入门

“相关推荐”对你有帮助么？