html常用标签

最新推荐文章于 2024-07-22 11:58:10 发布

咩Kakao

最新推荐文章于 2024-07-22 11:58:10 发布

阅读量65

点赞数

分类专栏： HTML 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_52142992/article/details/126371635

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（一）文本标签

1、标签列表：h1~h6、div、span、p、br、hr、strong（定义语气更为强烈的强调文本）、i、pre

2、其他文本标签： b、em（强调文本）、ins（被插入的文本）、u（下划线文本）、s（加删除线的文本）、del（被删除的文本）、sub（下标文本）、sup（上标文本）、code（计算机代码文本）

例1：

<!-- 标题标签：h1~h6 数字越大显示的字体越小-->
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
    ```
#### 例2：
```html
<!-- 区块标签：div（大），span（小） -->
    <div>web前端</div>
    <span>web前端</span>

例3：

<!-- 段落标签：p -->
    <p>你是猪你是猪你是猪你是猪你是猪你是猪你是猪你是猪你是猪你是猪</p>
    ```
#### 例4：
```html
<!-- 换行 -->
    <br>
    <!-- 水平线 -->
    <hr>
    <!-- 预格式文本：保持原来的文本格式 -->
    <pre></pre>
    ```
## （二）列表
### 1、有序列表
```html
 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    ```
### 2、无序列表
```html
<ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    ```
### 3、自定义列表
```html
 <dl>
        <dt>
            <dd></dd>
            <dd></dd>
            <dd></dd>
        </dt>
    </dl>

(三）链接

链接标签：a （#：回到顶部、#aa 回到一个id=“aa” 的元素那里），target（在何处打开目标URL）：_self（默认，本页面）、_blank（在新的页面）

 <a href="#">这是一个链接</a>

(四）图片

1、图片路径

绝对路经：

当前目录：./
上级目录：…/
上上级目录：…/…/
…以此类推

2、图片格式

web前端常见图片格式：png, jpeg, jpg, gif, webp, base64。

3、属性

src：图片路径
alt：图片无法显示时替换的内容

<img src="./handsome.html" alt="无法显示">
    <img src="./img/gif.gif" alt="">
    <img src="./img/jpeg.jpeg" alt="">
    <img src="./img/jpg.jpg" alt="">
    <img src="./img/png.png" alt="">
    <img src="./img/webp.webp" alt="">
    <!-- 转换base64后编码太长 -->
    <img src="" alt="">

（五）输入框

常见输入框：input，type属性:text（文本），checkbox（复选框），radio（单选按钮），submit（提交按钮）,reset（重置）。

<input type="text">
    <input type="button" value="">
    <input type="checkbox" name="" id="">
    <!-- 类相同就能实现单选 -->
    <input type="radio" name="" id="">
    <input type="submit" value="">
    <input type="email" name="" id="">
    <input type="date" name="" id="">
    <input type="datetime" name="" id="">
    <input type="file" name="" id="">
    <input type="password" name="" id="">
    <input type="search" name="" id="">
    <input type="reset">

(六）按钮

<button>这是一个按钮</button>

(七）文本域

1、属性：

rows：行数
cols：列数
placeholder：占位符

<textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>

（八）转义字符

	实体名称	实体编号
空格	&nbsp ;	&#160 ;
小于	&lt ;	&#60 ;
大于	&gt ;	&#162 ;
元	&yen ;	&#165 ;

（九）表格

<!-- 表格，属性：cellspacing内边距-->
    <table border="1" cellspacing="0" align="">
        <caption>表格标题</caption>
        <!-- 表头 -->
        <thead>
            <tr>一行
                <!-- th自动居中加粗 -->
                <th>单元格（加粗）</th>
                <th>单元格（加粗）</th>
                <th>单元格（加粗）</th>
            </tr>
        </thead>
        <!-- 主体, 单元格属性：rowspan设置单元格所横跨的行数，colspan设置单元格所横跨的列数-->
        <tbody>
            <tr>行
                <td rowspan="" colspan="">单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <!-- 脚注，不管放在table中哪个位置都会在最后显示 -->
        <tfoot>
            <tr>
                <td>脚注</td>
                <td>脚注</td>
                <td>脚注</td>
            </tr>
        </tfoot>
    </table>

(十）表单

1、属性：

action规定当提交表单时向何处发送表单数据；
method发送表单数据的HTTP方法，get/post；
target在何处打开action URL，取值_blank,_self。

2、表单内的input属性

placeholder占位符
value:控件的输入值
disabled禁用元素
readonly文本只读
maxlength最大长度
name:元素名称

3、表单规则

提交按钮submit 可以触发<form>向服务器端发送请求。(了解)
表单提交时当前页面会刷新。(了解, 这种方式现在几乎不用了)。
<form>通常不会使用 action等属性向服务器发送数据，现在使用 ajax将表单数据发送到服务器。
表单控件需要设置name,id等属性。
重置按钮reset 只有在 <form>中才可以重置表单控件中数据。
表单控件可以不在<from>中单独使用。

 <form action="" method="" target="">
       <input type="text" name="" id="" placeholder="" disabled="" readonly="" maxlength="">

        <!-- for:规定 label 与哪个表单元素绑定, 主要针对单选框和多选框 -->
        男<input type="radio" name="" id="man">
        女<input type="radio" name="" id="woman">
        <label for="man">选择男的</label>
        <label for="woman">选择女的</label>
        <!-- 下拉列表 -->
        <!-- select：disabled禁用，name元素列表 -->
    </form>

（十一）下拉列表

属性：

select：disabled禁用，name元素列表；
optgroup定义下拉列表中的选项组，属性：disabled禁用该选项组，label为选项组规定元素；
option定义下拉列表中的选项，属性：value值，disabled禁用，selected默认该选项。

<select name="" id="">
            <optgroup label="">
                <option value="" disabled selected></option>
                <option value="" disabled></option>
                <option value=""></option>
                <option value=""></option>
            </optgroup>
</select>

（十二）网页中的网页

iframe标签：

<!DOCTYPE html>
<html lang="en">  
<body> 
    <h3>我的网页</h3>
    <iframe width="600" height="400" src="http://zl.huruqing.cn" frameborder="0"></iframe>
</body> 
</html>