Html学习笔记（二）

超链接<a>标签

HTML使用标签 <a> 来设置超文本链接。

1. <a>标签有四个属性：

   • href：指定链接目标的URL，可以是另一个网页的URL、文件的URL或其他资源的URL
   • target：（可选）：指定链接如何在浏览器中打开。
     • _blank：在新标签或窗口中打开链接
     • _self：在当前标签或窗口中打开链接（默认值）
   • title（可选）：提供链接的额外信息，在鼠标悬停在链接上时显示提示信息
   • rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等

2. 例子

   	<a href="https://blog.csdn.net/" title="CS">CSDN</a>
   

3. 锚点链接：在一个页面，从一个点跳转到另一个点

   • 通过name属性进行锚点跳转

     <a href="#section2">跳转到section2</a>
     <!-- 在页面中的某个位置 -->
     <a name="section2"></a>
     

   • 通过id属性进行锚点跳转

     <a id="tips">跳转到tips</a>
     <a href="#tips">被跳转的地方</a>
     

4. 下载链接，可以用于下载文件

   <a href="document.pdf" download>下载文档</a>
   

HTML 图像标签<img>

HTML使用标签 <img> 来表示图像

1. 图像标签<img>有三个属性：

   • src：指存储图像的位置，可以是网页上的图片url，也可以是本地图片路径
   • alt：图像提示信息，鼠标移动到图像上显示的提示信息
   • width: 图像宽度（默认单位像素）
   • height: 图像高度（默认单位像素）

2. <img>只有开始标签

3. 例子

   <img src="a.jpg" alt="Pulpit rock" width="304" height="228">
   

4. 地图标签<map> 和<area>标签配合使用, 例子如下

   <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
   <map name="planetmap">
     <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
     <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
     <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
   </map>
   

有序列表<ul>和无序列表<ol>

有序列表是一列项目，列表项目使用数字进行标记
无序列表是一列项目，列表项目使用粗体圆点进行标记

1. 有序列表例子

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

2. 无序列表例子

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML表单标签

HTML表单表示文档中的一个区域，该区域由各种交互组件组成，如：各种输入字段、复选框、单选按钮、下拉列表等元素，主要用于收集用户输入信息，并将收集到的用户信息传入到web服务器后端，达到一个交互的目的。

1. HTML表单的写法
   • 最外层使用一个<form>标签
   • 里面使用输入框，单选框，复选框等交互组件
   • 最后使用提交按钮进行用户信息提交
2. 例子如下：

<form  action="/" method="post" >
	<label for="name">用户名:</label>
    <input type="text" id="name" name="name" required> <!-- 文本输入 -->
    <label for="name">密码:</label>
    <input type="password" id="password" name="password" required> <!-- 密码输入 -->
    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <!-- 复选框 -->
    <label>兴趣爱好:</label>
    <input type="checkbox" id="swimming" name="swimming" checked>
    <label for="swimming">游泳</label>
    <input type="checkbox" id="book" name="book" checked>
    <label for="book">看书</label>
    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

3. 常用的表单标签：
   • 定义表单域：<form></form>
     • 属性:
     • method: 设置用于发送表单数据的 HTTP 方法
     • action: 设置当提交表单时向何处发送表单数据（一般为后端URL地址）
   • 定义输入域：<input />
     • 属性：
     • readonly：readonly 属性规定输入字段是只读的
     • required： required 属性规定必需在提交表单之前填写输入字段
     • disabled： disabled 属性规定应该禁用的 元素
     • placeholder：placeholder 属性规定可描述输入 字段预期值的简短的提示信息
     • type：type 属性规定要显示的 元素的类型：如，文本域、单选框、多选框、图像等
       • text：文本域
       • password：密码输入框
       • radio：单选框
       • checkbox：多选框
       • file: 文件上传输入框
       • number：数字输入框
       • submit: 表单提交按钮