当前位置: article > 正文

html常用标签及其属性_html标签

作者：凡人多烦事01 | 2024-03-23 19:51:02

踩

html标签

html定义

超文本标记语言（Hyper Text Markup Language）不是一种编程语言，而是一种标记语言，描述网页的语言。HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。

html标签关系

嵌套关系：类似父亲和儿子之间的关系。


<html>
    <head></head>
    <body></body>
</html>

并列关系：类似与兄弟之间的关系。


<head></head>
<body></body>

html基本标签及其属性

标题标签：

写法：<h1>-<h6> 标签，标号越大，标题字体越小。

作用：是标明文章、作品等内容的简短语句。

段落标签：

标签写法：<p> 标签。

作用：在网页中描述具有一个相对完整的内容。

斜体标签：

标签写法：<em> 标签。

作用：实现的一种倾斜的字体样式。

粗体标签：

标签写法：<strong> 标签。

作用：实现的一种加粗的字体样式。

水平线标签：

标签写法：<hr/> 标签。

作用：在网页中加入平行线用来区分上下文。

换行标签：

标签写法：<br/> 标签。

作用：跳到下一个新行。

特殊符号：

空格：

引号："

大于号：>

小于号：<

注册商标： ®

图像标签：

图片路径：src 引用图片的路径；替换文本：alt 在图片不能正常加载时候显示的提示语；

提示内容：title 鼠标划上去显示的内容；宽度高度：width/height 设置图片的宽度和高度。

<img src="图片.jpg" alt="该图片无法加载" title="强生健体竺天菜" width="100px" height="50px"/>

超链接：

html使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面。

页面间链接：<a href="链接地址" ></a> A页到B页，网上常见链接。

锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记。

target = "目标窗口位置"属性值： _self：自身窗口

_blank：新建窗口


<a href="链接地址" >点击了解</a>//创建跳转链接
<a name =“maker” >跳转位置</a>//创建跳转标记

html列表和表格

html列表分为三种：无序列表、有序列表、自定义列表。

无序列表：

<ul>用来声明无序列表。 <li>用来表示列表项。

<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。

<ul>标签和<li>标签配合使用，不能单独使用。

type属性：用于控制列表项符号。可以改变type属性值来调整列表项符号。

type属性值：

disc 默认值，实心圆“●”；circle 空心圆“○”；square 实心正方形“■”；none 没有列表符号。


<ul type="none">
    <li>强生健体竺天菜</li>
    <li>强生健体竺天菜</li>
    <li>强生健体竺天菜</li>
    <li>强生健体竺天菜</li>
 
</ul>

有序列表：

<ol>用来声明有序列表。 <li>用来表示列表项。

有序列表的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束，中间的列表项是<li>标签内容。

<ol>标签和<li>标签是配合使用，没有单独使用，而且<ol>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签。

type属性：用于控制列表项符号。可以改变type属性值来调整列表项符号。

type属性值：

1-------->数字1、2、3……

a/A -------->小/大写英文字母

i/I-------->小/大写罗马数字

html自定义列表：

<dl>用来声明自定义列表。 <dt>用来表示列表标题。 <dd>用来表示列表内容。

<dl>标签和<dt><dd>标签是配合使用，没有单独使用，而且<dl>标签内部不能存在任何其他标签。

ps：各种列表之间可以互相嵌套。

HTML表格的基本语法：

<table> 标签定义表格。

<tr> 标签表格均有若干行组成使用tr定义。

<td> 标签每行被分割为若干单元格使用td定义。

<th> 标签：定义html表格中的表头单元格。

rowspan跨行：属性规定单元格可横跨的行数。

colspan跨列：属性规定单元格可横跨的列数。


<table width = "100%" border = "1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td colspan="3"></td>  </tr>//跨列
    <tr>
        <td rowspan="2"></td>  </tr>//跨行
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
......
 
</table>

html表格美化：

borde：设置边框

bgcolor：设置背景颜色

align：设置表格在网页中的对齐方式

cellspacing：设置单元格与单元格之间的距离

cellpadding：设置文字与单元格之间的距离

width/height：表格的宽度/表格高度

html表单

表单在网页中主要负责数据采集，定义采集数据的范围。

表单的分类：文本域、按钮、单选框、复选框、选项菜单。

表单基本结构：

发送表单数据的方式：标签属性：method 常用值：get | post

向何处发送表单数据：标签属性：action

<form  method="post" action="xxx.html"></form>

表单元素属性：

文本输入：属性值：text,password

                  作用：text,表单中输入字母、数字等内容。

                           password，输入密码字段。

文件选择：属性值：file 作用：file,定义了文件选择。

按钮：属性值：button 作用：button,定义了普通按钮。

选择：属性值：checkboxes,radio

作用：checkboxes,表单复选框。

                                 radio,表单单选框。

提交按钮：属性值：submit，image

                  作用：submit,定义了提交按钮。

                                 image,定义了图片提交按钮。

重置按钮：属性值：reset 作用：reset,定义了重置按钮。

size属性：元素的宽度，当 type 为 text 或 password时。

maxlength：type为text 或 password 时，输入的最大字符数。

checked ：type为radio或checkbox时，指定按钮是否是被选中。

下拉列表：

<select> 标签：select 标签用于声明下拉列表；option 标签用于声明列表项。

多行文本域：

可见行数：标签属性：rows rows 属性规定 textarea 的可见高度。

可见宽度：标签属性：cols cols 属性规定 textarea 的可见宽度。

最大长度：标签属性：maxlength maxlength 属性规定文本区域的最大长度（以字符计）。

名称：标签属性：name name 属性为文本区规定名称。

<textarea rows="3" cols="20" maxlength="50" name="demo"></textarea>

表单的高级应用：

隐藏域： type="hidden”

只读：readonly=“readonly”

禁读：disabled="disabled"

语义化表单：

域：使用<fieldset>来定义。将一组表单元素放到域中。

域标题：使用<legend>。所谓的域标题就是给创建的域设置个标题。

表单元素标注：对表单元素进行标注，这样做的目的是为了增强鼠标的可用性。

创建<label>标签写入相关内容。

在<label>标签中加入 for 属性实现 label 绑定到哪个表单元素。

对应在input中加入 id 属性进行关联。

end

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】