HTML学习

常用标签

相对路径：以引用文件所在位置为参考基础，主要包括以下三种：
①同一级 ：直接写名即可；
②上一级 ：…/；
③下一级 ：/；
<img src="图片名和路径"/>
alt：替换文本，当图像不能显示时，该文本显示在网页中
title：提示文本，当鼠标经过该图片时显示的文本

1、超链接标签

（1）链接的语法格式

 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target默认值是_self：当前窗口打开；
blank：新窗口打开

（2）链接分类：

①外部链接 （必须以http://开始）
<a href="http://www.baidu.com">百度</a>

②内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可，
例如<a href="index.html">首页</a>

③空链接：如果当时没有确定链接目标时，
<a href="#">首页</a>
④下载链接：地址链接的是文件.exe 或者是zip等压缩包形式
⑤网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
⑥锚点链接：当我们点击链接时可以快速定位到网页中的某个位置

a. 在链接文本的href属性中，设置属性值为 “#名字” 的形式，如<a href="#two">第二集</a>
b. 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

2、表格标签

表格的主要作用：展示数据

（1）基本语法

 <table>
     <tr>
        <td>单元格内的文字</td>
        ....
     </tr>
     ....
 </table>

<table></table>用于定义表格的标签
<tr></tr>标签用于定义表格中的行
<td></td>标签用于定义表格中的单元格
<th>表头单元格标签（文本内容加粗居中），常用于表格第一行

（2）表格属性

align=left（左）、center（居中）、right（右）规定表格相对周围元素的对齐方式
border =1或"" 表格是否有边框，默认""
cellpadding=像素值 单元边沿与其内容之间的空白，默认1像素
cellspacing=像素值 单元格之间的空白，默认2像素
width=像素值或百分比 表格的宽度

表格结构标签
<thead></thead>：表格的头部区域，内部必须拥有标签，一般位于第一行
<tbody></tbody>：表格的主体区域

（3）合并单元格

a.合并单元格的方式：
跨行合并：rowspan
跨列合并：colspan
b.目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
c.合并单元格步骤：
①先确定是跨行还是跨列合并
②找到目标单元格，写上合并方式=合并的单元格数量
③删除多余的单元格

3、列表标签

主要作用：用来布局页面
根据使用场景不同，列表可分为：无序列表、有序列表和自定义列表

（1）无序列表⭐

无序列表的基本语法格式如下：
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

注意：
①无序列表各表项之间没有顺序级别之分，是并列的
②<ul></ul>中只能嵌套<li></li>，不可以输入其他标签或文字
③<li></li>可以放任何元素

（2）有序列表

有序列表即为有排列顺序的列表，其各个列表会按照一定的顺序排列定义。列表排序以数字来显示

有序列表的基本语法格式如下：
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

注意：
①<ol></ol>中只能嵌套<li></li>，不可以输入其他标签或文字
②<li></li>可以放任何元素

（3）自定义列表⭐

a.使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符合
b.语法格式

自定义列表的基本语法格式如下：
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

注意：
①<dl></dl>中只能包含<dt>和<dd>
②<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>里面可以放任何标签

4、表单标签

（1）使用表单的目的：收集用户信息
（2）表单的组成：表单域、表单控件（表单元素）、提示信息
（3）表单域：包含表单元素的区域
<form></form>把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

action=“url地址”：用于指定接收并处理表单数据的服务器程序的url地址
method=“get/post”：用于设置表单数据的提交方式
name=“名称”：用于指定表单的名称，以区分同一个页面中的多个表单域
(4）表单控件（表单元素）：允许用户在表单中输入或者选择的内容控件

• input输入表单元素

<input type="属性值" />

属性值：
text 文本框 可以输入任何文字
password 密码框
radio 单选按钮 可以实现多选一

<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值" >
name和value属性是radio的必要属性，这两个属性必须要设置
性别：<input type="radio" name="sex" value="boy" />男
       <input type="radio" name="sex" value="girl" />女

对于同一个问题的不同选项必须要设置一个相同的name属性值

checkbox 复选框 可以实现多选
checked属性表示该选项在默认情况下已被选中
HTML中的复选框是没有文本的，需要加入label标签，并且用label标签的for属性指向复选框的id

<input type="checkbox" value="复选框取值" checked="checked" />

你喜欢的水果：<br />
        <input id="checkbox1" type="checkbox" checked="checked" /><label for="checkbox1">苹果</label><br/>
        <input id="checkbox2" type="checkbox"/><label for="chechbox2">香蕉</label><br/>
        <input id="checkbox3" type="checkbox"/><label for="checkbox3">葡萄</label><br/>
        <input id="checkbox3" type="checkbox"/><label for="checkbox3">梨</label><br/>

普通按钮button：一般情况下要配合JavaScript·脚本来进行表单的实现
重置按钮reset：只能清除当前所在form标签内部的表单元素的输入信息，对当前所在form标签外部的表单元素无效。
submit：提交按钮 可以实现将表单内容提交给服务器处理
reset： 重置按钮 可以清除用户在页面表单中输入的信息

        <!--value的取值就是显示在按钮上的文字，onclick是普通按钮的事件-->
        单击按钮弹出对话框：<br/>
        <input type="button" value="按钮" onclick="alert('你点击了按钮')"/><br/>
        账号：<input type="text"/><br/>
        密码：<input type="password"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>

文件域 file

<input type="file"/>

• 多行文本框textarea：不能使用value属性来建立一个在文本域中显示的初始值

 个人简介：<br />
    <textarea cols="30" rows="10">请介绍一下你自己</textarea>

文本框有3种形式：单行文本框text、密码文本框password和多行文本框textarea。单行文本框和密码文本框使用的是input标签，而多行文本框使用的是textarea标签。

• select下拉列表

<select name="">
    <option>选项显示的内容</option>
    ……
    <option>选项显示的内容</option>
</select>
<!-- 分组 -->
<select name="">
    <optgroup label="">
       <option>选项显示的内容</option>
         <!-- 默认选中 -->
       <option selected="selected">选项显示的内容</option>
    </optgroup>
</select>

select标签属性：
multiple：只有一个属性值multiple，当设置multiple="multiple"时，下拉列表可以选择多项，使用“Ctrl+鼠标左键”；
size：下拉列表展开之后可见列表项的数目

option标签属性：
value：选项值
selected：是否选中

label标签为input元素定义标注
用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
label标签的for属性应当与相关元素的id属性相同