HTML学习笔记

from_0 to_1

已于 2023-03-03 11:17:33 修改

阅读量161

点赞数

分类专栏： Web学习笔记（Django+前端+Python）文章标签： html 学习前端

于 2023-03-03 11:13:38 首次发布

本文链接：https://blog.csdn.net/weixin_46038290/article/details/129315250

版权

Web学习笔记（Django+前端+Python）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.快速上手：基于Flsak Web框架让你快速搭建一个网站

浏览器可以识别很多标签+数据，例如：
如果我们把浏览器能识别的标签都学会，我们在网站就可以控制页面到底长什么样

<!-- 浏览器看见加大加粗 -->
<h1>中国</h1>   
 
<!-- 浏览器看见字体变红 -->                          
<span style = ‘color :red;’>联通</span>

Flask框架为了让咱们写标签更方便，支持将字符串写入到文件里。

2.浏览器能识别的标签

2.1编码(head)

<meta charset="UTF-8">

2.2 title(head)

<head>
    <meta charset="UTF-8">
    <title>爱的网站</title>
</head>

2.3标题（body）：默认占一整行

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>

2.4 div和span

它俩比较素。因此+CSS样式，应用非常广泛

<!--div块级标签，占一整行-->
<div>我爱你</div> 

<!--span行内标签、内联标签，有多大占多少-->         
<span>爱着你</span>        
<span>就像老鼠爱大米</span>

2.5 超链接

<!--跳转到别人的网站-->
<a href= https://y.qq.com/n/ryqq/player >点击跳转</a>

<!--跳转到自己网站的其他地址-->
<a href= 'http://127.0.0.1:5000/get/news' >更多信息</a>

<!--当前页面打开-->
<a href= '/get/news' >更多信息</a>

<!--新的Tab页面打开-->
<a href= '/get/news' target=’_blank’>更多信息</a>

2.6 图片

<!-- <img src=”图片地址” /> -->


<!-- 直接显示别人的图片地址（防盗链） -->
<img style="height:200px" src="https://t7.baidu.com/it/u=3934956932,3631135405&fm=193&f=GIF">

<!-- 
显示自己的图片：
    -自己项目中创建：static目录，图片要放在该目录下
    -在页面上引入图片-->
<img style="height:100px" src="/static/AD.jpg">

<!-- 关于设置图片的高度和宽度
    -px：像素
    -% ：按原比例缩放 -->
<img style="height:100px; width:200px" src="图片地址">
<img src="/图片地址" style="height:10%; width:20%;">

小结

学习的标签

<h1></h1>

<div></div>

<span></span>

<a></a>

<img />

划分

<!-- 块级标签 -->
<h1></h1>
<div></div>

<!-- 行内标签 -->
<span></span>
<a></a>
<img />

2.7 列表

嵌套使用

<div>
    <sapan>xxx</sapan>
    <img src="xxx">
    <a></a>
</div>

<!-- ul：无序列表， ol：有序列表 -->
<!-- li:列表第一个、二个... 块级标签 -->

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

<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

2.8 表格

<!-- table:表格标签， border:表格边框 -->
<!-- thead:表头，     tbody:内容 -->
<!-- tr:一行，    	  th:表头内容   td:数据的内容 -->

<table border="1">
    <thead>
    <tr> <th>ID</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
    <tr> <td>11</td> <td>张宁</td> <td>女</td> <td>22</td> </tr>
    <tr> <td>12</td> <td>张三</td> <td>男</td> <td>19</td> </tr>
    <tr> <td>13</td> <td>李四</td> <td>男</td> <td>20</td> </tr>
    <tr> <td>14</td> <td>王麻子</td> <td>男</td> <td>25</td> </tr>
    </tbody>
</table>

2.9 input系列(7个标签)

<!-- 1.简单文本（用户名： -->
<input type="text">

<!-- 2.密码 -->
<input type="password">

<!-- 3.选择文件 -->
<input type="file">

<!-- 4.互斥选择(性别： -->
<input type="radio" name="n1">男
<input type="radio" name="n1">女

<!-- 5.多项选择(爱好： -->
<input type="checkbox" >吃饭
<input type="checkbox">睡觉
<input type="checkbox" >打豆豆

<!-- 6.普通提交按钮 -->
<input type="button" value="提交">button提交

<!-- 7.表单提交按钮 -->
<input type="submit" value="提交">submit提交

2.10 下拉框

<!-- 择其一 -->
<select>
    <option>成都</option>
    <option>重庆</option>
    <option>长沙</option>
</select>

<!-- 多选 -->
<select multiple>
</select>

2.11 多行文本

<textarea></textarea>

总结：

HTML标签（HTML：超文本传输协议，与浏览器适配）
HTML标签（默认格式样式，以后可通过手段修改）

HTML标签与编程语言无关

# Java + HTML
# C# + HTML
# PHP + HTML
# Python + HTML

from_0 to_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

基于FLask快速搭建一个网站
复制链接

扫一扫

专栏目录

HTML学习笔记

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