web基础（第一期——HTML语法介绍下）

最新推荐文章于 2023-05-21 23:02:44 发布

我能突破限制.

最新推荐文章于 2023-05-21 23:02:44 发布

阅读量1k

点赞数 3

分类专栏：笔记文章标签：前端 html

本文链接：https://blog.csdn.net/kun12343/article/details/122703087

版权

笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前言：

接上文啊，上篇文章没看的先看上篇文章web基础（第一期——HTML语法介绍上）

正文：

3.图片标签：

<img/>      <!--在网页查入一张图片-->

属性	含义
src	图片名及url地址
alt	图片加载失败时的提示信息
title	文字提示属性（当放入鼠标时提示信息）
width	图片宽度
height	图片高度
border	边框线粗细

示例代码：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
    <h1>图片标签</h1>
    <img src="./image/picture1.jpg" alt=" 人间小苦瓜 " border="1" width="200"/>
    <img src="./image/picture2.jpg" alt=" 仓鼠 " width="200"/>
    <img src="https://www.baidu.com/img/bd_logo1.png" title=" 百度照片 " width="200"/>
    </body>
</html>

我来解释一下文件路径的问题，前两个文件使用的是相对路径，我是在我项目文件下创建了一个image文件夹，然后文件夹中存放的为照片。第三个为互联网绝对路径。
运行截图：
在这里插入图片描述
4.超级链接标签

<a href="">...</a>       <!--超级链接标签-->

相关属性：

属性	功能
href	跳转链接
traget	链接打开方式：
_blank	打开新窗口
_parent	打开父窗口
_self	本窗口（默认）
_top	顶级窗口
framename	窗口名
title	文字提示属性（详情）

锚点链接：
在一个页面点击跳转到该页面的某一处位置。

<a id="a1">  </a>               <!--定义一个锚点-->
<a href="#a1">跳到a1处</a>      <!--使用锚点-->

5.表格标签：

<table>...</table>           <!-- 表格标签 -->
<caption>...</caption>       <!-- 表格标题 -->
<tr>...</tr>                 <!-- 行标签 -->
<th>...</th>                 <!-- 列头标签 -->
<td>...</td>                 <!-- 列标签 -->
<thead>...</thead>           <!-- 表头 -->
<tbody>...</tbody>           <!-- 表体 -->
<tfoot>...</tfoot>           <!-- 表尾 -->

属性	含义
border	有无表格线
width	厚度
cellspacing	表示单元格之间的缝隙
cellpadding	表示内容离单元格之间的最小距离
rowspan	跨行属性
rolspan	跨列属性

<!DOCTYPE html>
<html、>
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!-- 表格标签  border=0没有表格线 cellspacing 表示单元格之间的缝隙 cellpadding 表示内容离单元格之间的最小距离-->
    <table border="1" width="500"cellspacing="0" cellpadding="4" >
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th width="20%">学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10001</td>
                <td>张三</td>
                <td>19</td>
                <!--rowspan跨几行  align : 左中右  valign ：上中下-->
                <td rowspan="2" align="center" valign="top" >78</td>
            </tr>

            <tr>
                <td>10002</td>
                <td>张三</td>
                <td>19</td>
                <!--<td>78</td>-->         <!--被上面单元格吞噬-->
            </tr>
            <tr>
                <td>10001</td>
                <td>小张</td>
                <td>19</td>
                <td>94</td>
            </tr>
            <tr>
                <td>10001</td>
                <td>小王</td>
                <td>19</td>
                <td>67</td>
            </tr>
            <tr>
                <td>10001</td>
                <td>小李</td>
                <td colspan="2" align="center">20</td>
                <!--<td>20</td>-->
            </tr>
        </tbody>
    </table>

</body>
</html>

在这里插入图片描述
6.表单标签：（这个很重要！！！）

<form></form>                  <!-- 表单标签-->
<input/>                       <!-- 表单项标签input定义输入字段，用户可在其中输入数据 -->
<select>...</select>           <!-- 标签创建下拉列表 -->
<textarea>...</textarea>       <!-- 多行文本输入区域 -->
<button></button>              <!-- 标签定义按钮 -->
<fieldset></fieldset>          <!-- 元素可将表单内的相关元素分组-->
<legend></legend>              <!-- 标签为<filedset>、<figure>、<details>元素定义标题-->
<datalist></datalist>          <!-- 标签定义可选数据的列表 -->
<optgroup></optgroup>          <!-- 标签定义选项组 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<form action="teststudy03.html" method="get">       <!--action目标地址-->
    账号：<input type="text" name = "QQ"/><br/><br/>
    密码：<input type="password" name="密码"/><br/><br/>
    <input type="submit" value="登录"/>


</form>

</body>
</html>

运行结果：
在这里插入图片描述
这里呢只简单列举了少量的代码，
如果需要的话我们可以去查帮助文档：w3school
这个网站还是很好用的，一些属性没必要去记，不知道了过来查文档就OK了。

今天就到这里吧，拜拜！！！
在这里插入图片描述

我能突破限制.

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
web基础（第一期——HTML语法介绍下）

前言：正文：3.图片标签：<img/> 属性含义src图片名及url地址alt图片加载失败时的提示信息title文字提示属性（当放入鼠标时提示信息）width图片宽度height图片高度border边框线粗细示例代码：<!DOCTYPE html><html > <head> <meta char
复制链接

扫一扫