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

【目录】 标签&标签属性

1、html 注释

2、html 文档基础结构

3、head 内常用标签 

4、body 内常用标签

文本标签

 

特殊符号

div / span 分块标签 

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

1、

# 注释:注释是代码之母
<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

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

 

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 内常用标签

文本标签

（3）body内常用标签

<h1>我是h1</h1>  标题标签 1～6级标题
<b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <p>段落</p>
    <br>  换行
    <hr>  水平分割线

特殊符号

div / span 分块标签 

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

　　input 必备属性 —— name  value , 这样表单获取的数据，后端才能够完整地以键值对的形式 接收并显示

5、特殊符号

   空格
>   大于号
<   小于号
&  & 
¥  ¥   人民币符号
© ©   版权
®  ®   商标

6、其他常用标签

（1）分块标签

div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签

 （2）img 标签

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

#【属性】

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

alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息

title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" 

width=""

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

（3）a 标签

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

#【属性】

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

target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank

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

 　【补充】

　标签默认具有的两个重要书写

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

 　　标签既可以有默认的书写也可以有自定义的书写

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

（4）列表标签

无序列表(使用较多) —— 快捷语法  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>