这些HTML标签你知道吗?

HTML基础概念

HTML (英文缩写:Hyper text Markup Languag):是一种超文本标记语言,不属于编程语言,这个概念不要混淆哦~

两种标签形式:

  • 双标签:<标签名></标签名>
  • 单标签:<标签名/>

元素和属性:

  • <标签名 属性=" 属性值 ">元素</标签名>
  • <标签名 属性= " 属性值 " />

代码结构:

!DOCTYPE html>
<html lang="en">
<head>
  <!--这是注释方式-->
  <!--head标签里面的内容不会显示在网页上-->
  <meta charset="utf-8"> <!--网页编码方式-->
  <title>网页标题</title>
</head>
<body>
  <!--body标签里面的元素内容会显示在网页上-->
</body>
</html>

常用标签的使用

段落标签:<p></p>

水平线标签:<hr/>

换行标签:<br/>

标题标签:分为 6 种,从 h1~h6,每种标题的大小依次减小 <h1>一级标题h1</h1> <h2>二级标题h2</h2> <h3>三级标题h3</h3> <h4>四级标题h4</h4> <h5>五级标题h5</h5> <h6>六级标题h6</h6>

链接标签:<a></a>

该标签包含以下属性和对应的属性值:

  • href :超链接地址
  • target = "_self " :本窗口访问(默认)
  • target = " _blank " :新窗口访问

图片标签:<img>

该标签包含以下属性和对应的属性值:

  • src = " 图片地址 "
  • alt = " 图片加载异常时用于提示图片信息的文字 "

列表标签:

包含有序列表 <ol></ol> and 无序列表 <ul></ul>,列表项由<li></li>显示,其中有序列表的列表项以数字开头,无序列表的列表项以黑圆圈开头

<ul>
  <li>有序内容1</li>
  <li>有序内容2</li>
</ul>

<ol>
  <li>无序内容1</li>
  <li>无序内容2</li>
</ol>

表格标签:<table></table>

  • border = " 像素值 " ,设置边框大小
  • width = " 像素值 " ,设置表格的宽度
  • <tr></tr> ,代表表格中的行
  • <th></th> ,代表表格中的表头(第一行)
  • <td></td> ,代表表格中的列
<table border="1px" width="300px">
  <tr>
    <th>第一列表头</th>
    <th>第二列表头</th>
  </tr>
  <tr>
    <td>普通列</td>
    <td>普通列</td>
  </tr>
</table>

表单标签:<form></form>

常用于提交表单信息,比如登录信息等

  • action = " 表单提交后的跳转地址"
  • method = " 请求方式(post / get(默认))"
  • enctype = " multipart/form-data ",当表单中需要提交文件时需写入
  • <input>标签
    • type = " text" ,填写文本
    • type = " password ",填写密码
    • type = " radio ",单选框
    • type = " checkbox ",多选框
    • type = " file ",上传文件
    • type = " button ",按钮
    • type = " submit ",提交表单
    • type = " reset ",重置表单
<form action="跳转路径" method="post/get",enctype="multipart/form-data">
用户名:
<input type="text" name="username">
密码:
<input type="password" name="password" value="">

单选框:
男<input type="radio" name="sex" value="0">
女<input type="radio" name="sex" value="1">

复选框:
篮球<input type="checkbox" name="hobby" value="web">
游泳<input type="checkbox" name="hobby" value="spider">

上传文件:
<input type="file" name="file">

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

提交表单:
<input type="submit" value="提交按钮">

重置
<input type="reset" value="重置按钮">
</form>
  • 下拉框标签:<select></select>
  • 文本框标签:<textarea></textarea>
<select name="学历">
  <option value="本科">本科</option>
  <option value="研究生">研究生</option>
</select>
<textarea name="comment" cols="40" rows="20"></textarea>

常见的无意义标签:

  • <div></div>相当于一个容器,占用整行,会自动换行
  • <span></span>不占用整行,其长度由内部元素的长度决定,不会自动换行

特殊符号:

  • 空格:&nbsp;
  • 大于:&gt;
  • 小于:&lt;

大家可以通过本文快速入门HTML,但可能不会用,所以之后我会发些实战给大家参考

原文发布于微信公众号 - 佛系编程人(py520llj)

原文发表时间:2019-08-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券