首页 > > 网页制作 > css >

【2020Python修炼记】前端开发之 HTML常用标签汇…

2020-05-12 16:00:45来源：博客园阅读 ()

【2020Python修炼记】前端开发之 HTML常用标签汇总

【目录】标签&标签属性

1、HTML 注释

2、HTML 文档基础结构

3、head 内常用标签

4、body 内常用标签

常用文本标签

特殊符号

div / span 分块标签

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

1、HTML 注释（选中内容或者光标置于注释行，快捷键 ctrl+/ ）

# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->

# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->

<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

2、HTML 文档基础结构（编辑器里搭建HTML格式文件 !(英文感叹号)+tab ）

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

</body>
</html>

3、head 内常用标签

<title>Title</title>  网页标题
<style>
        h1 {
            color: greenyellow;
        }
</style>  内部用来书写css代码

<script>
        alert(123)
</script>  内部用来书写js代码

<script src="myjs.js"></script>  还可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件

<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,
人工智能培训,云计算培训,
Linux运维培训,Python自动化运维,Python全栈开发,IT培训">  

<!-- 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户;
网页的描述性信息 -->

4、body内常用标签

【补充】

标签默认具有的两个重要属性

1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性，也可以有自定义的属性

<p id="d1" class="c1" username="jason" password="123"></p>

编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键

例如：span 标签

span>（然后按tab键）
最后效果如下：
<span></span>

（1）格式排版/文本标签

格式排版标签

文本标签

<!--一下文本标签  作为了解-->
<cite>    用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性  (IE6以上)
<bdo>  来覆盖默认的文本方向 dir属性 值: lrt  rtl
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small> 标签定义小型文本（和旁注）
<b>    粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。
<i>    斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u>    下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。
<s>  删除线
<q>  签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address>  定义地址 通常为斜体 (注意非通讯地址)  块状元素

<font>    H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt>    H5已删除 打字机文字
<big>    H5已删除 大型字体标签
<acronym>  H5已删除 首字母缩写 请使用<abbr>代替

<bdi>      H5新增 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用)
<mark>     H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面
<meter>    H5新增 定义预定义范围的度量
<progress> H5新增 标签标示任务的进度（进程）
<time>     H5新增 定义时间和日期 
<wbr>        H5新增    规定在文本中的何处适合添加换行符。Word Break Opportunity

其他文本标签

（2）特殊符号

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&amp;  & 
&yen;  ¥   人民币符号
&copy; ©   版权
&reg;  ®   商标

（3）分块标签

div 块儿级标签
span 行内标签

上述的两个标签是在构造页面初期最常使用的

# 页面的布局一般先用div和span占位之后再去调整样式

尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签

（4）img 标签

# 图片标签
<img src="" alt="">

#【属性】

src=" 图片路径"
1.图片的路径可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据

alt="图片描述信息"
当图片加载不出来的时候给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会等比例缩放
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

（5）a 标签

# 链接标签
<a href=" " target=" " ></a>

"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

#【属性】

href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target=" "
默认a标签是在当前页面完成跳转 target="_self"

你也可以修改为新建页面跳转 target="_blank"

# a标签的锚点功能——使用 id 属性和 href 属性
eg:点击一个文本标题页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>

<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

（6）列表标签

无序列表(使用较多) —— 快捷语法 ul>li*4

<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签

有序列表(了解) —— 快捷语法 ol>li*3

<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

标题列表(了解)

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

（7）table 表格标签

<!-- 表格标签
<thead> 表头
<tbody> 表单数据
<tr> 一个<tr> 就是一行
<th> 加粗文本，一般用于表头标题
<td> 正常文本，一般用于其他表格内容
    
属性（一般加在 开始标签里）
<table border="1">  加外边框
<td colspan="2"></td>  水平方向占2个单元格（合并同一行中的单元格）
<td rowspan="2"></td>   垂直方向占2个单元格（合并同一列中的单元格）
-->
    <table>  /* 表格标签里，由<thead></thead>和<tbody></tbody> 组成*/
        <thead>
            <tr>
                <th>uername</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>mili</td>
                <td>1314</td>
            </tr>
            <tr>
                <td>cc</td>
                <td>520</td>
            </tr>
        </tbody>
    </table>

（8）form 表单标签　

<!-- 表单标签 
#能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

1\
form 标签的默认属性 action:
    控制数据提交的后端路径(给哪个服务端提交数据)
        1.什么都不写  默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com  朝百度服务端提交
        3.只写路径后缀action='/index/'  
            自动识别出当前服务端的ip和port拼接到前面
        host:port/index/
    form表单提交文件需要注意
        1.method必须指定为 post
        （form表单默认提交数据的方式是get请求，数据是直接放在url后面的，
　　　　　　无法保证数据安全 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on）
        2.enctype="multipart/form-data"
            enctype类似于数据提交的编码格式
            默认是urlencoded 只能够提交普通的文本数据
            formdata 就可以支持提交文件数据
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

2\
# label 和 input都是行内标签。ps:input不跟label关联也没有问题
label 标签的默认属性 for：
    for的值要与相关联的 input标签的 id值一致

/* 第一种:直接将input框写在label内 */
<label for="d1"> 
    username:<input type="text" id="d1">
</label>

 /* 第二种 通过id链接即可 无需嵌套 */
<label for="d2">password:</label>
<input type="text" id="d2">   

input标签 就类似于前端的变形金刚 ，通过type属性变形
    text:普通文本
    password:密文
    date:日期    
    submit:用来触发form表单提交数据的动作
    button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
    reset:重置内容
    radio:单选
        默认选中要加checked='checked'
        <input type="radio" name="gender" checked='checked'>男
        当标签的属性名和属性值一样的时候可以简写
        <input type="radio" name="gender" checked>女

    checkbox:多选
        <input type="checkbox" checked>DBJ
    
    file:获取文件 也可以一次性获取多个
        <input type="file" multiple>
    hidden:隐藏当前input框     钓鱼网站伎俩    

3\
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected

4\
textarea标签  获取大段文本

ps:
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
        1、<input type="submit" value="注册">
        2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
    name就类似于字典的key
    用户的数据就类似于字典的value

# 针对用户选择的标签 用户不需要输入内容，但是你需要提前给这些标签添加内容value值
# 针对用户输入的标签。如果你加了value 那就是默认值
    <label for="d1">
        username:<input type="text" id="d1" name="username" value="默认值">
    </label>

其他input标签属性
    disable 禁用
    readonly 只读

-->

示例代码

<form action="">
        <!-- 用户输入框 -->
        <p>
            <label for="d1">username:<input type="text" id="d1"></label>
        </p >
        <p>
            <label for="d2">password:<input type="password" id="d2"></label>
        </p >
        <!-- 日期选择功能 -->
        <p>birthday:
            <input type="date">
        </p >
        <!-- input标签-单选 (将 name 的值设为一样的，就可实现 单选) -->
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender" checked>女
            <input type="radio" name="gender">其他
        </p >
        <!--input标签-多选 -->
        <p>hobby:
            <input type="checkbox">read
            <input type="checkbox" checked>DBJ
            <input type="checkbox" checked>JBD
            <input type="checkbox">hecha
        </p >

        <!-- select标签-单选 -->
        <p>province：
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option>
                <option value="">深圳</option>
            </select>
        </p >
         <!-- select标签-多选 使用 multiple 属性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>
        </p >
         <!-- select标签-多级单选列表 嵌套 <optgroup>标签 -->
       <p>province1:
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦东</option>
                   <option value="">黄埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝阳</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
       </p >
       <!-- 上传文件 multiple属性可支持用户能上传多种文件 -->
        <p>文件:
            <input type="file" multiple>
        </p >
        <!-- 文本输入框 -->
        <p>自我介绍:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p >
        <input type="submit" value="注册">
        <!--  当你没有使用 value属性 指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <button>点我</button>
    </form>

使用python 本地后端接收表单信息（了解即可）

from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求

@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
    print(request.files)  # 获取文件数据
    file_obj = request.files.get('myfile.png')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()

表单HTML 的form 需要加上相应属性：

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

原文链接:https://www.cnblogs.com/bigorangecc/p/12874484.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：【教程干货】前端学习网站资源

下一篇：【2020Python修炼记】前端开发之 CSS基础和CSS选择器

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

【2020Python修炼记】前端开发之 HTML常用标签汇…

【目录】 标签&标签属性

1、HTML 注释

2、HTML 文档基础结构

3、head 内常用标签

4、body 内常用标签

常用文本标签

特殊符号

div / span 分块标签

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

1、HTML 注释 （选中内容或者光标置于注释行，快捷键 ctrl+/ ）

2、HTML 文档基础结构 （编辑器里 搭建HTML格式文件 !(英文感叹号)+tab ）

3、head 内常用标签

4、body内常用标签

【补充】

标签默认具有的两个重要属性

1.id值类似于标签的身份证号，在同一个html页面上id值不能重复2.class值该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性，也可以有自定义的属性

编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键

例如：span 标签

（1）格式排版/文本标签

格式排版标签

文本标签

（2）特殊符号

（3）分块标签

div 块儿级标签span 行内标签

上述的两个标签是在构造页面初期最常使用的

# 页面的布局一般先用div和span占位之后再去调整样式

尤其是div使用非常的频繁div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可而普通的文本先用span标签

（4）img 标签

# 图片标签<img src="" alt="">

#【属性】

src=" 图片路径" 1.图片的路径 可以是本地的也可以是网上的2.url 自动朝该url发送get请求获取数据

alt="图片描述信息"当图片加载不出来的时候 给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" width=""

高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

（5）a 标签

# 链接标签<a href=" " target=" " ></a>

"""当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色如果点击过了就会是紫色（浏览器给你记忆了）"""

#【属性】

href=" "1.放url，用户点击就会跳转到该url页面2.放其他标签的id值 点击即可跳转到对应的标签位置

target=" "默认a标签是在当前页面完成跳转 target="_self"

你也可以修改为新建页面跳转 target="_blank"

# a标签的锚点功能——使用 id 属性 和 href 属性eg:点击一个文本标题 页面自动跳转到标题对应的内容区域

（6）列表标签

无序列表(使用较多) —— 快捷语法 ul>li*4

有序列表(了解) —— 快捷语法 ol>li*3

标题列表(了解)

（7）table 表格标签

（8）form 表单标签

示例代码

使用python 本地后端接收表单信息（了解即可）

表单HTML 的form 需要加上相应属性：

【目录】标签&标签属性

1、HTML 注释（选中内容或者光标置于注释行，快捷键 ctrl+/ ）

2、HTML 文档基础结构（编辑器里搭建HTML格式文件 !(英文感叹号)+tab ）

1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

div 块儿级标签
span 行内标签

尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签

# 图片标签
<img src="" alt="">

src=" 图片路径"
1.图片的路径可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据

alt="图片描述信息"
当图片加载不出来的时候给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会等比例缩放
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

# 链接标签
<a href=" " target=" " ></a>

"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target=" "
默认a标签是在当前页面完成跳转 target="_self"

# a标签的锚点功能——使用 id 属性和 href 属性
eg:点击一个文本标题页面自动跳转到标题对应的内容区域

（8）form 表单标签　