图片，超链接，有无序标签，表格，表单

最新推荐文章于 2024-10-04 00:46:18 发布

@动感superman

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量403

点赞数 8

文章标签：前端 html

本文链接：https://blog.csdn.net/2301_80208072/article/details/142674341

版权

文章目录

1.图片。

2.超链接是HTML中的一个重要标签。

3.标签常用标签。

4.表格格式。

5.HTML表单用于收集用户的输入信息。

一、图片

1.插入图片

要在 HTML 页面中显示一张图片，你只需使用 <img> 标签。下面是一个简单的例子：

<img src="C:\图片\OIP-C.jpg" alt="描述文字">

src 属性：指定图片的路径或 URL。这是图片的来源，浏览器会根据这个路径加载图片。
alt 属性：提供图片的替代文本。当图片无法加载时，替代文本会被显示。此外，这对于网页的无障碍性（例如，屏幕阅读器）也非常重要。

2.图片属性

title=(鼠标放上去有字提醒)

width=宽度

height=高度

border=边框宽度

hspace=水平边距

vspace=垂直边距

left=居左

right=居右

<body>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="文字描述"    width="200px"    height="200px">
</body>

运行效果

二、超链接

href ：指定要跳转到的具体目标。

 <a href="跳转网址">文字描述</a>

跳转锚点：

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
 
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</

三、有无序标签

1.有序标签

       <ul  type="标号">
         <li>
             <ol></ol>
         </li>
        </ul>

有序标号：

1：表示列表项目用数字标号(1,2,3...)；
a：表示列表项目用小写字母标号(a,b,c....)；
A：表示列表项目用大写字母标号(A,B,C...)；
i：表示列表项目用小写罗马数字标号(i,ii,iii...)；
I：表示列表项目用大写罗马数字标号(1II...) ；

2.无序列表

       <ul type="标号">
         <li>
             <ol></ol>
         </li>
        </ul>

无序标号：

disc：默认实心圆
circle：空心圆
square：小方块
none：不显示

四、表格

1.HTML表格由<table>标签来定义。

    <table border="1" >

2.表格格式

tr：表示表格的一行

td：表示表格的数据单元格

th：表示表格的表头

3.表格属性

align="centen" 水平居中垂直居中

height="数值" 高

width="数值" 宽

    <table border="1" height="200" width="400">
       <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
       </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

运行效果：

4.合并单元格

colspan="数值"，跨列合并单元格

rowspan="数值"，跨行合并单元格

    <table align="centen" border="1" height="200" width="400"> 
        <tr align="centen">
            <th></th>
            <th>教师人数</th>
            <th>学生人数</th>
            <th>总人数</th>
        </tr>
        
        <tr align="centen">
            <th>2021年</th>
         <td colspan="2"></td>
         <td rowspan="2"></td>
        </tr>

        <tr align="centen">
            <th>2022年</th>
         <td></td>
         <td></td>
        </tr>

运行效果：

五、表单

表单用form标签：

    <form>
        <!-- 可输入框 -->
       账号: <input type="text"><br>
       密码: <input type="password"><br><br>
       &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
       &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp;  <ins>忘记密码</ins><br>
       &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; 
       <!-- 按钮  -->
       <input type="submit"  value="注册">
        <input type="submit"  value="登录"><br>
        <!-- 空白框 -->
        <input type=“file”><br>
        <!-- 勾选方框 可多选 -->
        <input type="checkbox">阅读斌接受云中医的用户协议和隐私政策<br>
        <input type="checkbox">阅读斌接受云中医的用户协议和隐私政策<br>
         <!-- 勾选圆框 可多选 -->
       爱好： <input type="radio">篮球  &nbsp; &nbsp; &nbsp; &nbsp;
              <input type="radio">跳舞 &nbsp; &nbsp; &nbsp; &nbsp;
              <input type="radio">唱歌  &nbsp; &nbsp; &nbsp; &nbsp;
              <input type="radio">跳舞 &nbsp; &nbsp; &nbsp; &nbsp;<br>
         <!-- 勾选圆框 单选 -->
     性别： <input type="radio" name="sex">女 &nbsp; &nbsp; &nbsp; &nbsp;
            <input type="radio"name="sex">男 &nbsp; &nbsp; &nbsp; &nbsp;
            
    </form>

运行效果：