HTML常见标签的使用

前端开发环境：VSCode

HTML代码是通过标签组织的，一个标签通常是成对存在的，标签可以嵌套使用，构成“树形结构”，在开始标签中，给标签赋予属性（相当于是键值对）。

XML标签化格式，标签的名字、属性、作用由程序员根据需求场景自己决定，HTML是XML的一种具体表现形式，具体的内容已经定义好了，HTML不支持自定义标签。

html HTML文件最顶层标签，树根节点

head 存放页面的一些属性（元数据）

body 页面包含的内容

HTML常见标签

• 注释标签  <!-- 这是注释 -->    快捷键：ctrl + /
• 标题标签 h1-h6   <h1>一级标题</h1>  <h2>二级标题</h2>  <h3>三级标题</h3>

• 段落标签 p    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum velit, perferendis asperiores soluta, praesentium quidem inventore blanditiis accusantium, consectetur at beatae odit ipsa maxime. Dolor vitae dolore quam voluptate recusandae.</p>    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum velit, perferendis asperiores soluta, praesentium quidem inventore blanditiis accusantium, consectetur at beatae odit ipsa maxime. Dolor vitae dolore quam voluptate recusandae.</p> 

lorm为随便生成 的文本

• 换行 br   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br> Ipsum velit, perferendis asperiores soluta, praesentium quidem inventore blanditiis accusantium, consectetur at beatae odit ipsa maxime. <br> vitae dolore quam voluptate recusandae.</p>  

  

• 格式化标签   <strong>变粗</strong>   <b>变粗</b>   <em>倾斜</em>   <i>倾斜</i>   <del>删除线</del>   <s>删除线</s>     <ins>下划线</ins>     <u>下划线</u>

• 图片标签   <img title=""  src="" alt=""  width="" height="">  src为图片的路径，alt为在图片没有加载出来时显示的文字  title为鼠标悬停在图片上给出的提示   width和height设置图片大小，单位为px
• 超链接  <a href="https://www.baidu.com/">百度</a>

<a target="_blank"  href="https://www.baidu.com/">百度</a>  可以在新的页面打开

• 表格标签 table表示整个表格， tr表示一行， td表示一个单元格，th表示表头中的一个单元格

 <table width="200px" height="80px" border="1px" cellspacing="0">

 <style> td{ text-align: center;} </style>（CSS）

•  列表标签  <ul></ul> 无序列表， <ol></ol> 有序列表，<li></li>用于表示列表里的条目

• <form action=""></form> 进行前后端交互 

• <input type="text"> 表示单行文本框，<input type="password">密码框

• 单选框  <input type="radio" name="gender">男   <input type="radio" name="gender">女  ，name属性相同的单选框是互斥的，只能选一个

• 复选框 <input type="checkbox">红色  <input type="checkbox">蓝色

• 按钮  <input type="button" value="按钮">

• 提交按钮  <input type="submit" > 可以触发form和服务器的交互

• 文件选择框   <input type="file" >

• 下拉框  <select >    <option>北京</option>    <option>上海</option>   <option>深圳</option>   <option>西安</option>   </select>

• 多行编辑框 <textarea name="" id="" cols="30" rows="10"></textarea>

• 无语义标签  <div></div>默认独占一行，块级元素， <span></span>默认不独占一行，行内元素

div是html里面的一个标签，没有特定的含义, 作为容器，一般用于配合css完成网页的基本布局

span也是一个标签，没有特定含义，一般作为“文本容器 ”