HTML一些常用基本标签

最新推荐文章于 2024-07-24 16:53:23 发布

大学生编程地

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量626

点赞数 7

分类专栏：网页文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_46500711/article/details/122202823

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这些是我在学html入门时写的笔记，分享出来，希望可以帮助到大家
前面讲的比较详细，文章最后会有一个总的html文件，包含了常用的标签

html中注释的格式是 

这个是创建html文件时，自动拓展的

<!DCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
        <!--此处可以写各种页头属性设置、CSS格式和JavaScript脚本等...-->
    </head>
    <body>

    </body>
</html>

<hn>  </hn> 其中n为1-6的值，标题标签（加粗、独立行）
<i>   </i>斜体
<em>  </em>强调斜体
<b>   </b>加粗
<strong> </strong>强调加粗
<cite>  </cite>作品的标题（引用）（微微倾斜）
<sub>  </sub>下标
<sup>  </sup>上标
<del>  </del>删除线标签

格式化标签
<br/> 换行单标签
<p> </p> 换段
<hr/> 水平分割线

列表：
    <ul> </ul> 无序列表
    <ol> </ol>有序列表 其中type类型值：A a l i start属性表示起始值
    <li> </li> 列表项
    <dl> </dl> 自定义列表
    <dt> </dt> 自定义列表头
    <dd> </dd> 自定义列表内容
<div> </div> 常用于组合块级元素，以便通过CSS来对这些元素进行格式化 
<span> </span>常用于包含的文本，可以使用CSS对其定义样式，或使用JavaScript对它进行操作

图片标签
<img/>在网页中插入一张图片
属性：
    src 图片名及url地址
    alt 图片加载失败时的提示信息
    title 文字提示属性
    width 图片宽度
    height 图片高度
    border 边框线粗细

超链接标签
<a herf= ""> </a> 超链接标签
属性：
    herf:必须，指的是链接跳转地址
    target：表示链接的打开方式
        _blank 新窗口
        _parent父窗口
        _self 本窗口（默认）
        _top 顶级窗口
        framename 窗口名
    title:文字提示属性（详情）
锚点链接:
    定义一个锚点：<a id="al"></a> 以前使用的是<a name="al"></a>
    使用锚点：<a herf="#al">跳到al处</a>

表格标签：
    <table> </table> 表格标签 属性：border（表格线）、width（表格宽度）、cellspacing（单元格距离）、cellpadding（格内字与单元格距离）
    <caption> </caption> 表格标题
    <tr> </tr> 行标签
    <th> </th> 列头标签
    <td> </td> 列标签 跨行属性：rowspan 跨列属性：colspan align = "center"

    <thead> </thead> 表头
    <tbody> </tbody> 表体
    <tfoot> </tfoot> 表尾

表单标签
    <form action = ".html" method = "post/get"> </form> 表单标签
    <input type="text/password/submit -> value="登录" name = ""/>  表单项标签input定义输入字段，用户可在其中输入数据
    <select> </select> 标签创建下拉列表
    <textarea> </textarea> 多行的文本输入区域
    <button> </button> 标签定义按钮
    
    <fieldset> </fieldset> 元素可将表单内的相关元素分组  
    <legend> </legend> 标签为<fieldset>、<figure>以及<details>元素定义标题
    <datalist>html5标签 <datalist> 标签定义可选数据的列表
    <outgroup>html5标签 </outgroup> 标签定义选项组

这个完整的html代码，包含了一些常用的html标签，运行结果在最后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <h1>HTML表单标签</h1>
    <form>
        <input type="hidden" disabled name="id"  value="100"/>
        姓名：<input tpye="text" disabled name="uname" maxlength="8" size="10" value="name"/><br/><br/>
        密码：<input type="password" name="upass"/> <br/><br/>
        性别：<input type="radio" name="sex" value="1"/>男
              <input type="radio" chexked name="sex" value="0"/>女<br/><br/>
        爱好：<input type="checkbox" name="likes" value="1"/>看书
              <input type="checkbox" checked name="like" value="2"/>爬山
              <input type="checkbox" name="likes" value="3"/>游泳
              <input type="checkbox" checked name="like" value="4"/>唱歌<br/><br/>
        头像：<input type="file" name="pic"/><br/><br/>
        邮箱：<input type="email" placeholder="请输入你的邮箱" name="pic"/><br/><br/>
        年龄：<input type="number" min="18" max="80" name="pic"/><br/><br/>
        指数：<input type="range" min="18" max="80" name="pic"/><br/><br/>
        网址：<input type="url" value="http://www.baidu.com" readonly name="pic"/><br/><br/>
        日期：<input type="date" name="pic"/><br/><br/>
        颜色：<input type="color" name="pic"/><br/><br/>
        学历：<select  name="education" id="">
                <option value="1">大专</option>
                <option value="2" selected>本科</option>
                <option value="3">硕士</option>
                <option value="4">研究生</option>
                <option value="5">博士</option>
              </select><br/><br/>
        简历：<textarea rows="10" cols="100" name="contents">Hello World!</textarea>
                <br/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        <input type="button" value="普通按钮"/>
        <input type="image" src="./p.png"/>
    </form>
</body>
</html>

在这里插入图片描述

大学生编程地

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML一些常用基本标签

这些是我在学html入门时写的笔记，分享出来，希望可以帮助到大家前面讲的比较详细，文章最后会有一个总的html文件，包含了常用的标签html中注释的格式是 这个是创建html文件时，自动拓展的<!DCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title>
复制链接

扫一扫