【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>  换行    &l在家上网赚钱的项目t;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标签是在当前页面完成跳转 _lf
你也可以修改为新建页面跳转 _blank

# a标签的锚点功能
“””eg:点击一个文本标题 页面自动跳转到标题对应的内容区域”电影雷锋观后感221;”
<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" urname="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>