likes
comments
collection
share

HTML常用标签(示范加说明)

作者站长头像
站长
· 阅读数 28

HTML常用标签

标题标签<h1>-<h6>

  • H标签为head的缩写,作为网页标题使用
  • 依据1-6字号缩减

代码范例:

<h1>一级标题</h1>

注意:

  1. 加了h标签的字体会加粗
  2. 一个标题独占一行

段落标签<p>

  • P标签为网页中的段落标签,独占一行上下有空白行

代码范例:

<p>段落</p>

注意:

  1. 上下有空白行
  2. 根据浏览器窗口大小自动换行

换行标签<br />

  • br是用于强制换行的单标签

代码范例:

<p>段落</p>

注意:

  1. 单标签

文本格式化标签

  • 文本格式化标签用于设置文本加粗、斜体、下划线等效果
语义标签
加粗<strong></strong>或者<b></b>
倾斜<em></em>或者<i></i>
删除线<del></del>或者<s></s>
下划线<ins></ins>或者<u></u>

注意:

  1. 常用为“加粗”和“倾斜”

盒子标签<div>与<span>

  • 用来装内容的盒子标签,用于网页分区使用

代码范例:

<div>每日要点</div>
<span>今日头条</span>

注意:

  1. div每行只能放一个
  2. span一行可以放多个

图片标签<img>

  • 用来往网页中插入图片

代码范例:

    <img src="logo.jpg"/>

img标签属性:

属性属性值属性说明
src图片路径指定图片文件路径,必须值
alt文本图片不能显示时显示的文本
title文本指针放置图像上显示的文字
width像素值图像宽度
height像素值图像高度
border像素值设置图像边框粗细

注意:

  1. src为必须属性,用于指定图片文件路径
  2. 图像标签可以有多个属性,属性不分前后顺序,多个属性之间以空格分开

img的相对路径:

路径符号
同级文件名
下一级/
上一级../

音频与视频标签<audio>与<video>

  • 用来在网页中插入音频的标签

代码范例:

  <audio src="url"></audio>  
  <video src="url"></video>    

注意:

  1. src为必须属性,用于指定音视频文件路径
  2. 音视频标签可以有多个属性,属性不分前后顺序,多个属性之间以空格分开

    属性:

属性说明
autoplay自动播放
controls播放控件
loop循环播放
muted静音
  • 以上属性可不以键值对输入,直接加属性就可以
  • “autoplay自动播放”属性在谷歌浏览器无效,配合“muted静音”属性可自动播放
  • 不加“controls播放控件”网页为空

超链接标签<a>

  • 用来添加网页超链接元素
  • 使用“href”属性设置目标路径
属性说明
href链接目标路径
target点击链接打开方式

代码范例:

    <a href="url">百度</a>

注意:

  1. “href”属性必填
  2. 可设置内部链接和外部链接
  3. “href”属性内填写“#”可设置空链接
  4. 默认为“_self”在当前窗口打开,设置“_blank”可在新窗口打开

表格标签<table>

  • 用来制作网页中的表格
  • 用来展示数据使用

表格内属性:

属性说明
border边框
width
height
cellspacing单元格与单元格的距离
height单元格与内容的距离

table标签内结构:

  1. thead 表格头部
  2. tbody 表格主体
  3. tfoot 表格尾部
  • 表格使用tr设定行
  • td设定单元格
  • th替换首行td设定表首行,td会居中并加粗

代码范例:

    <table border="1" width="100" height="100">
      <tr>
        <th>首行<th>
      </tr>
      <tr>
        <td>第二行<td>
      </tr>
    </table>

注意:

  1. 跨行合并:使用rowspan属性写在合并的第一个单元格中,再删除合并的单元格
  2. 跨列合并:使用colspan写在合并的第一个单元格中,再删除合并的单元格

表单标签<input>

  • 写在form里用来收集用户信息的一系列表单控件
  • 用来展示数据使用

input属性:

属性说明
type决定使用那种表单类型
name设定name值,设定单选框时使用
id设定id值,设定label绑定使用

type属性内容:

type属性内容说明input附加属性作用
text文本输入框placeholder属性可设置提示文本
password密码输入框placeholder属性可设置提示文本
radio单选框设置相同name属性之能选择一项,checked设置默认选中项目
checkbox checked设置默认选中项目
submit提交按钮
reset重置按钮
file文件上传控件multiple属性可多文件上传

表单相关标签:

  • select 下拉框双标签

    • 标签内使用option设置下拉选项
  • textarea 文本域双标签
  • label 绑定控件标签

    • 使用for属性与input中id属性进行绑定
    • 使用标签包含控件,删除for属性

代码范例:

    <form>
        文本框:<input type="text">
        多选框:<input type="radio">
    </form>

转载自:https://segmentfault.com/a/1190000041601348
评论
请登录