HTML5的常用的标签

古城微笑少年丶 2023-08-17 17:43 123阅读 0赞

HTML5对比HTML4新增了很多元素，也删除了部分元素(可以用css样式表方式替代)所以我只列出HTML5最常用的几个标签。

head标签中：

body标签中：

<a href="www.baidu.com">我是百度搜索的地址链接</a>　　这是一个超链接标签，使浏览者从一个页面跳转到另一个页面
    <a href="文件名">我是一个文件</a>　　这是一个超链接标签，使浏览者从一个页面跳转到一个文件（如果链接在同一级目录下则输入文件名称，要链接到上一级先输入"../"再输入目录名、文件名，要链接到下一级先输入目录名再输入文件名）
    <a href="#当前文件的某个id">我将跳转到</a>　　a标签当锚使用，id不允许重复
    <a href="文件名" target="目标窗口的打开方式">我是一个文件</a>　　target为_blank则在新的窗口打开
    
    <p>段落文字</p>段落标记标签（块级标签），开启一个段落，特点：（段落和段落间有换行标记）
    <br/>　　换行标记，特点：（强制换行）
    <h1></h1>　　标题标签（块级标签），标题1-6分别对应6种不一样的标题，且依次减小。特点：（加大加粗）
    
    <span></span>　　行内标签，特点：（白板，可以加入css样式以改变文本的样式）
    <div></dic>　　区隔标签（块级标签）表示一块可显示的HTML的区域，用于设置字、图片、表格等摆放位置

列表/表格：

无序列表-ul
    <ul type="">　　type取（disc为实心圆）,type取（circle为空心圆）,type取（square实心方块）
    　　<li>第一项</li>
    　　<li>第二项</li>
    　　<li>第三项</li>
    </ul>

有序列表ol
    <ol tyoe="" start="">　　type取（1为数字1234）type取（a为字母abcd）type取（A为字母ABCD）type取（i为罗马数字i，ii，iii）type取（I为数字I,II,III）,start表示从哪个数值开始如果你不想从1开始的话。
    　　<li>第一项</li>
    　　<li>第二项</li>
    　　<li>第三项</li>
    </ol>

定义列表dl
    <dl>
    　　<dt>第一项</dt>
    　　　　<dd>我的名字<dd>　　dd具有缩进作用
    </dl>
    
    table表格
    <table border="1">　　表格标记,border="1"（创建边框）
    　　<thead>
    　　　　<tr>　　行标记
    　　　　　　<th>我是第一行的表头</th>　　表头（加粗显示）
    　　　　　　<th>我是第二行的表头</th>
    　　　　</tr>
    　　</thead>
    　　<tbody>
    　　　　<tr>
    　　　　　　<td>我是第二行第一个单元格</td>　　单元格标记
    　　　　　　<td>我是第二行第二个单元格</td>
    　　　　</tr>
    　　　　<tr>
    　　　　　　<td>我是第三行第一个单元格</td>
    　　　　　　<td>我是第三行第二个单元格</td>
    　　　　</tr>
    　　</tbody>
    </table>
    #colspan="1"  向右合并一个单元格
    #rowspan="1"  向下合并一个单元格

在HTML中，<form></form>标签对用来创建一个表单，即定义表单的开始和结束位置，真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或脚本的一个完整的url

语法：

<form action="程序或脚本的一个完整的url" method="传输的形式" name="方便后台查找该表单"> #传输的形式有post、get（get比post快，get数据会附加在url上传递而post是和url分开传递的）
    　　表单控件
    </form>

input控件
    <input type="text" name="文字字段的名称，不能包含特殊字符" size="文本框在页面中显示的长度" maxlength="文本框中最多可输入的字符数" value="定义文本框中的默认值"/>　　text属性用来设定在表单的文本域中输入任何文本、数字、字母
    <input type="password" name=""...../>　　password属性使输入到该文本域中的文字均以****或圆点显示。
    <input type="radio" value="单选按钮的取值" name="单选按钮的名称" checked="checked"/>    单选按钮，以一个圆框显示。checked属性表示这一单选按钮被默认选中。
    <input type="checkbox" value="复选框的取值" name="复选框的名称" checked="checked"/>    复选框。
    <input type="button" value="按钮的取值" name="按钮的名称" οnclick="处理程序"/>    普通按钮，value设置按钮的文字  #οnclick="window.close()"
    <input type="submit" value="按钮的取值" name="按钮名"/>    提交按钮，并不需要onclick，单击该按钮可以实现表单内容的提交，value设置按钮的文字。
    <input type="reset" value="按钮的取值" name=""/>    重置按钮，可以清除表单的内容，恢复到默认值。value设置按钮的文字。
    
    image控件
    <input type="image" src="图像地址" name="图像名称" alt="" title=""/>　　添加图片
    
    file控件
    <input type="file" name=""/>　　上传文件，依赖form表单的一个属性 enctype="multipart/form-data"

菜单/列表控件
    <select name="下拉菜单的名称">
    　　#<optgroup label="">分组显示
        <option value="列表项目" name="菜单和列表名称" multiple="列表项目多选" size="显示列表数目" selected="selected'>  </option>
        <option value="列表项目">  </option>
        <option value="列表项目">  </option>
    </select>

多行文本输入框
    <textarea name="" value="文本域默认值" rows="文本域行数" cols="文本域列数">内容</textarea>

其中能给后台提交数据的只有form标签和textarea标签

HTML标签汇总：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5\_element\_list

HTML符号汇总：https://blog.csdn.net/Iversons/article/details/78996776

转载于:https://www.cnblogs.com/sunchao0709/p/11452231.html