html练习记录

网页基本结构

<!DOCTYPE html>
<html>
<head>
<title> 标题</title>
<meta charset="UTF-8">
</head>
<body> 
hello world!
</body>
</html>

-html 文本

-HTML 图像
HTML 图像是通过标签<img> 来定义的.
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
URL 指存储图像的位置。

<!DOCTYPE html>
<html>
<head>
<title> 图片</title>
<meta charset="UTF-8">
</head>
<body> 
 
<img src="C:\360downloads\wpcache\internetcache\5.jpg"
</body>
</html>

超文本链接
HTML 链接是通过标签<a> 来定义的.

实例

<a href="https://store.steampowered.com/">这是一个链接</a>

在这里插入图片描述

1.HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="https://store.steampowered.com//" target="_blank">stream 官网</a>

在这里插入图片描述

html图片映射
html列表
无序列表使用<ul> 标签
有序列表使用<ol>标签

无序列表
  <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

在这里插入图片描述
-HTML 表格
表格由<table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在这里插入图片描述
-HTML 表单和输入
文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
表单使用表单标签 <form> 来设置:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

在这里插入图片描述
2. 密码字段通过标签<input type="password"> 来定义:*
密码字段字符不会明文显示，而是以星号或圆点替代

<form>
Password: <input type="password" name="pwd">
</form>

在这里插入图片描述
提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

猜你喜欢