HTML笔记

最新推荐文章于 2023-10-23 11:47:39 发布

likehooooood

最新推荐文章于 2023-10-23 11:47:39 发布

阅读量221

点赞数

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

原文链接：http://c.biancheng.net/view/7410.html

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

列表标签

无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

在这里插入图片描述

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

注意：对于markdown中的转义字符，只需要在前面加“\”就可以显示转义字符了

<ul> </ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表ol（了解）
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

在这里插入图片描述
所有特性基本与ul 一致。但是实际工作中，较少用 ol
自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

在这里插入图片描述

表格table

创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>#表示为一行
    <td>单元格内的文字</td>#表示为一列
    ...
  </tr>
  ...
</table>


1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

在这里插入图片描述

表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

：用于定义表格的头部。

必须位于

标签中，一般包含网页的logo和导航等头部信息。

：用于定义表格的主体。

位于

标签中，一般包含网页中除头部和底部之外的其他内容。
在这里插入图片描述

表格标题

表格的标题： caption
caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。
公式：删除的个数 = 合并的个数 - 1
合并的顺序从上至下、从左至右
允许我们使用 rowspan 特性来表明单元格所要跨越的行数
允许我们使用 colspan 特性来表明单元格所要跨越的列数
格式如下：

<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>

表单标签（重点！）

<link>标签
在 HTML 中，允许使用 <link> 标签配合 href 属性来引用外部 CSS（Casecading Style Sheets）文件
<style>标签
<style> 标签同 <link> 标签类似，不同的是，<link> 标签是引用外部 CSS 样式文件，而 <style> 标签则是用来在内部编写 CSS 样式。
注：我们建议在 <head> 标签中使用 <link> 或 <style> 标签，而不是在其他标签中使用
<script>标签
<script> 标签用来引入外部文件。与 <link> 标签不同的是，<script> 标签配合 src 属性引入外部 JavaScript 文件，而 <link> 标签则是配合 href 属性引用外部 CSS 文件。一个是使用 href，另一个是使用 src，那么它们到底有什么区别呢？
href与link区别
src 是 source 的简写，表示来源地址，用来引入地址中的内容。引入的内容会嵌入到当前标签所在的位置，所以浏览器在解析引入文件时，会停止对后续文档的处理，直到 src 的内容加载完毕
href 是 Hypertext Reference 的简写，表示超文本引用。在使用 href 时，浏览器不会停止解析当前文件。因为 href 属性中的内容只是与当前页面有关联，然后当前页面对它进行一次引用。

简述<form>标签
form表示表单
在这里插入图片描述
具体语法：

<form action="url" method="post" name="formName"></form>

get ：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。
post：如果表单包含密码这种敏感信息，建议使用post方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

form的所有属性：
在这里插入图片描述

在这里插入图片描述
Input元素
具体使用代码如下：

<input type="表单类型" />

属性	说明
text	表示单行文本框
password	表示密码框
hiden	表示隐藏域
ratio	表示单选按钮
checkbox	表示复选框
file	表示文件上传域
button	表示普通按钮
submit	表示带提交功能的按钮
reset	表示带重置功能的按钮

<body>
	<form action="", method="",name="">
		username：<input type="text" name="name"><br/>
		password:<input type="password" name="password"><br/>
		gender:<input type="ratio",name="sex"  value="boy">男
		<input type="ratio"  name="sex"  value="girl">女<br/>
		hobby：读书<input type="checkbox" name="read" value="read">
	    跑步<input type="checkbox" name="run" value="run">
	    逛街<input type="checkbox" name="shopping" value="shopping">
	    看电影<input type="checkbox" name="movie" value="movie"><br/>
	    隐藏域<input type="hidden"  name="hidden"><br/>
	    文件上传域<input type="file" name="file" src="url"><br/>
	    <input type="submit" value="提交">
	    <input type="button" value="确定">
	    <input type="reset" value="重置">
   </form>
</body>

在这里插入图片描述
上述代码中使用了 type 属性中的 text、password、radio、checkbox、hidden、file、submit 以及 reset。我们来分别看一下：

text 表示常规文本框，一般用来输入一些对用户可见的文字。
password 表示密码框，输入的内容对用户不可见。
radio 表示单选按钮。当 type 属性值为 radio 时，必须为其指定相同的 name 属性值，否则实现不了单选的效果。
checkbox 表示复选框，可以选择多条内容。
hidden 表示隐藏域，在页面中对于用户是不可见的。在表单中插入隐藏域可以方便收集或发送信息。当表单提交时，隐藏域的信息也被一起提交。
file 表示上传文件域，src 属性表示文件的路径。
submit 表示提交按钮，默认值为提交，也可以根据需求使用 value 属性进行设置。点击按钮后，表单中的值会提交到预先设定好的 url 中。
button 表示普通按钮，没有提交功能。默认没有 value 值，需要手动设置，如果需要提交，建议使用 submit 按钮。
reset 表示重置按钮，同 submit 一样也有默认 value 值，默认为重置。点击按钮后，表单中填写的所有数据将被清空。

name属性

当用户向表单输入信息时，服务器需要知道这个数据到底输入到了表单的哪个字段（控件）。例如登录页面，服务器需要知道哪条数据是作为用户名输入的，哪条数据是作为密码输入的。因此，HTML 规定如果表单要想正确地被提交给表单处理器，必须为每个字段都设置 name 属性。如果未设置，默认不提交其数据信息。

disabled属性

如果为标签的某个控件设置了disabled=“disabled”，表示将禁用该控件，使其不能再获得焦点或被修改。被禁用后，它的值不会提交到后台。如果是按钮被禁用，它的点击效果就会失效。

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
      用户名:<input type="text" name="name" disabled="disabled" value="username"><br/>
      密码:<input type="password" name="password" disabled="disabled"><br/>
</form>

在这里插入图片描述

readonly 属性

readonly 属性表示只读。它有以下特点：

一般用在单行文本框和密码框中；
控件的值可以显示，但不能修改；
控件可以获取焦点；
如果有预先设置好的值，会一起提交到服务器。
============

单行文本框

在 HTML 中，把标签的 type 属性设置为 text 可以表示单行文本框，又叫做常规文本框

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
    用户名:<input type="text" name="username" value="C语言中文网"/>
</form>

在这里插入图片描述

maxlength属性
在表单中，允许使用 maxlength 属性设置文本框中最多可以输入的字符数量（包括空格）。如果我们要对年龄输入框设置，可以这样写：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
     年龄:<input type="text" name="age" maxlength="3" />
</form>

size属性可以设置文本框可见字符数

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
     年龄:<input type="text" name="age" size="3" />
</form>

HTML 密码框

在 HTML 中，把标签的 type 属性设置为 password 可以表示密码框。具体语法格式如下：

<input type="password" />
eg:
<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密码:<input type="password" name="psd">
</form>

maxlength属性和size属性同单行文本框

单选按钮

在 HTML 中，把标签的 type 属性设置为 radio 可以表示单选按钮。具体语法格式如下

<input type="radio" />
eg:
<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性别：<input type="radio" name="girl" checked="checked">女
       <input type="radio" name="boy" checked="checked">男
</form>

在这里插入图片描述
注意：当 type 属性值为 radio 时，name 属性值必须保持一致。本例只是为了演示问题才会为所有按钮加checked="checked"属性，在实际开发中不会这样写。checked="checked"可以简写为 checked。

name属性

上述代码因为 name 属性值不同，两个单选按钮被同时选中。接下来我们就来看一下当 name 属性值相同时，给两个按钮都设置选中，会产生什么效果：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性别：<input type="radio" name="sex" checked>女
       <input type="radio" name="sex" checked>男
</form>

这样就只能被单选了

value属性

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性别：<input type="radio" name="sex" value="girl">女
       <input type="radio" name="sex" value="boy" checked="checked">男
</form>

value 值并不会显示在页面中。之所以建议为每个按钮添加 value 值，是因为最终提交表单时，服务器可以根据 value 属性值辨别提交的是哪一项。

id属性

在为单选按钮设置 id 属性时，一般有 3 种用途：
配合标签使用；
通过 JavaScript 获取元素，对元素进行一系列操作；
通过 CSS 选择元素，为其添加样式。
那么我们就来看一下 id 属性是如何与标签配合使用的：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
        性别：<input type="radio" name="girl" value="girl" id="girl"><label for="girl">女</label>
        <input type="radio" name="girl" value="boy" id="boy" checked="checked"><label for="boy">男</label>
</form>

<label> 标签中的 for 属性与<input> 元素的 id 属性值相同，我们可以说它们之间进行了一个绑定。绑定后，当点击 <label> 标签中的内容（<label for=“girl”>女</label>）时，也相当于对 <input> 中的元素。

复选框

<input type="checkbox" />

在这里插入图片描述

checked属性

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" checked>跑步
     <input type="checkbox" name="reading" checked>阅读
     <input type="checkbox" name="shopping" checked>购物
</form>

在为单选按钮设置相同的 name 属性值时，只有一个可以被选中，而复选框都被选中了，那么我们是不是可以随便设置复选框的 name 属性呢？当然是不建议的，因为后台在获取用户输入数据时，如果 name 属性相同，很容易混淆。

value属性

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" checked value="run">
     <input type="checkbox" name="reading" checked value="read">
     <input type="checkbox" name="shopping" checked value="shop">
</form>

建议为复选框设置不同的 value 属性值，这样在数据提交时，后台可以非常清楚的知道提交的是哪个字段

id属性
这个属性同单选框，增加label属性也只是为了点击 <label> 标签的内容时，<input> 元素也有相应变化

HTML文件上传域

<input type="file" />

上传文件时，需要把 method 属性设置为 post（get 方式不能提交文件）

enctype属性
enctype 属性规定被提交数据的编码。如果提交数据中包含文件时，需要把标签的 enctype 属性设置为 multipart/form-data。如果不这样设置，文件将无法正常提交。具体代码如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
     <input type="file" name="file"/><br/>
     <input type="submit"/>
</form>

当然仅仅设置标签的 enctype 属性是不够的，如果要保证文件可以正确提交给表单服务器，还需要设置文件的类型，这时就需要使用 accept 属性。

accept属性
当标签的 type 属性为 file 时，使用 accept 属性可以规定上传文件的类型。

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/png"/>
</form>

此处规定上传的文件只能是.png格式的图片。如果想上传.pdf格式的图片，需要修改 accept 的属性值。
accept可以设置很多类型的上传文件，如图：
在这里插入图片描述
然而这样编写代码只能实现每次上传一个文件，如果想实现一次上传多个文件，还要用到标签的 multiple 属性。

multiple属性
当给上传文件字段设置了 multiple 属性时，就表示可以同时选择多个文件一起上传

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/png" multiple />
</form>

在这里插入图片描述

当选择多个文件时，浏览器显示的是文件个数而不再是文件名称。

文本域

在 HTML 中，使用标签来表示多行文本框，又叫做文本域。与其它标签不同，标签是单闭合标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。具体语法格式如下：

<textarea>文本内容</textarea>
接下来我们通过一段简单的代码来看一下：
<form action="http://vip.biancheng.net/register.php" method="post">
    描述信息：<textarea name="description">此处是描述信息</textarea>
</form>

在这里插入图片描述
运行结果可以发现，文本域的右下角有一个收缩按钮，拖拽按钮可以手动改变文本域的宽高。这个按钮默认显示，也可以隐藏。
关于隐藏：

<form action="http://vip.biancheng.net/register.php" method="post">
    描述信息：<textarea name="description" style="resize:none;">此处是描述信息</textarea>
</form>

注意：此处用到的是 CSS 样式中的内容，读者只需了解即可。当收缩按钮隐藏后，不能手动调节文本域的宽高。
同所有表单元素相同，文本域要想正确提交，也必须设置 name 属性。除了 name 属性以外，文本域还有其它属性。

cols属性

cols 属性用来指定每行可以显示的字符数，也就是文本域的可见宽度。一般情况下，如果内容超出文本域宽度，会自动换行显示，但是如果文本内容较长，而且在大于文本域宽度时，还没有空格可以进行换行，就会出现横向滚动条。
示例：

<form action="http://vip.biancheng.net/register.php" method="post">
  HTML教程描述：<textarea name="description" cols="40">这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。</textarea>
</form>

在这里插入图片描述
通过运行结果可以发现，当文本内容超出了文本域的宽度时，会自动换行显示。这时，出现了纵向的滚动条是因为高度不够。下面我们就来学习一下如何设置文本域的高度。

rows属性

在文本域中，rows 属性用来设置文本域的可见行数，也就是文本域的高度。当文本内容超出设置高度时，会出现纵向滚动条。用户拖动滚动条可以查看全部内容。
示例：

<form action="http://vip.biancheng.net/register.php" method="post">
  HTML教程描述：<textarea name="description" cols="40" rows="6">这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。</textarea>
</form>

如图：
在这里插入图片描述
通过运行结果可以看出，当文本高度小于文本域高度时，不会出现纵向滚动条。

注意：除了使用 rows、cols 属性设置文本域的宽高，css 也可以实现，在 css 教程中我们会详细讲解。

id属性

id 属性用来定义文本域的唯一 id 值。为文本域添加 id 属性，主要有以下 2 个方面：
在 css 中，可以使用 id 获取元素为其添加 css 样式；
在 JavaScript 中，可以根据设置好的 id 属性获取文本域，然后对它进行一系列操作，例如操作文本域的内容。

下拉列表

HTML 下拉列表是由 <select><option> 配合使用的。
<select> 标签用来创建一个下拉列表，<option> 标签表示下拉列表中的每一项（条目）。
示例：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select>
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

在这里插入图片描述

标签属性

同所有其它表单元素相同，下拉列表要想被正确提交，也需要设置 name 属性。代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

如图：
在这里插入图片描述

通过运行结果可以发现，name 属性并不会显示在页面上。下拉列表的 name 属性同标签的 name 属性作用相同，主要用来提交数据。

size属性

在文章的开始我们提到过，下拉列表默认状态下只显示一个选项。如果需要让页面显示多个选项，就要使用 size 属性。

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList" size="4">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

谷歌浏览器效果：
在这里插入图片描述
IE效果：

multiple属性

下拉列表默认只允许选择一个选项，如果允许用户选择多个，就要用到 multiple 属性。当 multiple 属性值等于 multiple 时，表示允许用户选择多个选项。

<select name="selectList" multiple="multiple" size="4">

注意：此时只需按住ctrl+鼠标左键就可以选择多个选项。multiple=“multiple” 可以简写为 multiple。

disabled属性

disabled 属性可以禁用下拉列表，使其不能再获得焦点或被修改。被禁用后，它的值不会提交。

<select name="selectList" multiple="multiple" size="4" disabled>

效果：
在这里插入图片描述

<option>标签属性

selected属性
在为标签设置了 multiple 属性后，就可以通过标签的selected="selected"实现某一项的预先选中。

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select name="selectList" multiple>
         <option selected="selected">18岁以下</option>
         <option>18-28岁</option>
         <option selected="selected">28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

效果图：
在这里插入图片描述

value属性
<option> 标签的 value 属性用来定义当下拉列表在提交时，发送给服务器的值。

<form action="http://vip.biancheng.net/login.php" method="post">
    年龄区间： 
    <select name="selectList" multiple>
        <option selected="selected" value="underage">18岁以下</option>
        <option value="teens">18-28岁</option>
        <option selected="selected" value="youth">28-38岁</option>
        <option value="more">38岁以上</option>
    </select>
</form>

如图：
在这里插入图片描述

disabled属性
<option> 标签也有 disabled 属性，不同于标签的 disabled 属性，它只能禁用列表中的某一项。

总结

实际上，multiple 和 size 这两个属性只要设置了其中一个，下拉列表就可以显示多项。如果只设置 size，而不设置 multiple，得到的是一个不允许多选但是可以显示多项的下拉列表；
<select> 标签的 name 属性不显示在页面上，主要用来提交数据；
<option> 标签的 value 属性也不显示在页面上，主要用来定义提交给服务器的值；
<option> 标签的 disabled 属性禁用的是列表中的某一项；
<select> 标签的 disabled 属性禁用的是整个列表。

按钮

普通按钮
普通按钮默认没有提交功能，它只是一个可点击的小装置，一般情况下，需要配合 JavaScript 脚本才能实现具体的功能。

<input type="button" />

普通按钮没有默认内容，我们需要使用 value 属性为其设置具体内容。代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
    <input type="button" value="普通按钮"/>
</form>

提交按钮
提交按钮可以看成是一种具有特殊功能的普通按钮。当单击提交按钮时，会对表单的内容进行提交。在 HTML 中，当标签的 type 属性值为 submit 时，用来表示提交按钮。具体语法格式如下：

<input type="submit" />
eg:
<form action="http://vip.biancheng.net/login.php" method="post">
    <input type="submit"/>
</form>

在上述代码中，我们并没有为提交按钮设置 value 值。但是通过运行结果可以发现，提交按钮是有默认值的，默认为提交。如果需要改变其默认值，只需要设置 value 属性即可。

注意：表单中的字段需要设置 name 属性才可以进行提交，但是提交按钮的 name 属性可以根据需求进行设置，一般情况下不使用。当点击提交按钮后，表单中含有 name 属性的数据会发送到表单服务器，后台经过操作便可以拿到用户输入的内容

重置按钮
重置按钮也可以看成是一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在表单中输入的信息。把标签的 type 属性设置为 reset 用来表示重置按钮。重置按钮也有默认值，默认值为重置。具体语法格式如下：

<input type="reset" />
<form action="http://vip.biancheng.net/login.php" method="post">
  用户名 <input type="text" name="username" value="C语言中文网"/>
  密码：<input type="password" name="psd" value="123456"/>
  <input type="reset"/>
</form>

reset 按钮只能清空用户在表单中输入的内容，对于提前设置好的内容不会清空。

图像按钮

在 HTML 中，把标签的 type 属性设置为 image 可以表示图像按钮。具体语法格式如下：

<input type="image" src="url" />

我们还可以把图像按钮分为图像、按钮两部分来看，因为它既有图像的特点（需要使用src属性为图片添加路径），又有按钮的特点（图像按钮的行为基本上与提交按钮一致，点击它也可以实现表单数据的提交）。
图片的路径可以是相对路径，也可以是绝对路径.

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg"/>
</form>

效果如图：
在这里插入图片描述
当我们点击图片按钮后，表单中的相应内容会提交。

图像按钮属性

alt属性
alt 属性用来对图像进行文本说明。一般情况下，当浏览器因某种原因无法载入图像时，就会显示这段文本。虽然 alt 属性值可以为空，但还是建议读者给 alt 属性设置符合图像信息的文本。

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此处为提交按钮"
     />
</form>

当网络出现问题时，运行结果如图所示：
在这里插入图片描述

width属性
width 属性表示图片的宽度，默认单位是 px，不需要显示指明。使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此处为提交按钮" 
      width="100"
     />
</form>

效果图：
在这里插入图片描述
与图 1 进行对比发现，图片的宽度和高度都发生了变化，那是因为图片随设置好的宽度进行了自适应。

height属性
height 属性表示图片的高度，同 width 属性一样，默认单位也是 px，不需要显示指明。具体代码如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此处为提交按钮" 
      height="100"
     />
</form>

运行结果如图所示：
在这里插入图片描述

通过运行结果发现，图片的宽度也随其高度发生了变化。一般情况下，我们只需设置图片的宽度（width）或者是高度（height）即可，否则有的图片可能会失帧。

likehooooood

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记

列表标签无序列表 ul无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ......</ul>比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。注意：对于markdown中的转义字符，只需要在前面加“\”就可以显示转义字符了<ul&gt
复制链接

扫一扫