前端17号学习（html完结）

一、路径

1.目录文件夹和跟目录

• 实际工作中需要创建一个文件夹来管理他们。
• 目录文件夹，就是普通文件夹，里面存放页面相关素材，如html文件、图片等。
• 根目录，打开目录文件夹的第一层就是根目录。

2.VScode中打开目录文件夹

• 文件->打开文件夹。
• 后期方便管理。

3.路径

• 页面中图片很多，通常存放在一个Images文件夹里，这时需要采用“路径”的方式来指定图像文件的位置。
• 路径分为：

1. 相对路径：图片相对于HTML页面的位置
2. 绝对路径：是指目录下的绝对位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级 如<img src="baidu.gif" />
下一级路径	/	图像文件位于HTML文件下一级 如<img src="data:images/baidu.gif" />
上一级路径	../	图像文件位于HTML文件上一级 如<img src="../baidu.gif" / >

二、超链接标签

• 在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1. 超链接的语法格式
2. 链接的分类

　　　　（1）外部链接，例如<a href="http://www.baidu.com"> 百度 </a>;

　　　　  (2)  内部链接，网站内部页面之间的相互链接，直接链接内部页面名称即可；

　　　　（3）空链接，如果当时没有确定的链接目标时，<a href="#">首页</a>；

　　　　（4）下载链接，如果href里面地址是一个文件或者压缩包，会下载这个文件；

　　　　（5）网页元素的链接，在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加链接；

　　　　（6）锚点链接，点我们点击链接，可以快速定位到页面中的某个位置；

　　　　　　-在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>；

　　　　　　-找到目标位置标签，里面添加一个Id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>；

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

属性	作用
href	用于指定连接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定连接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开

 三、注释标签和特殊字符

1.注释

• 如果需要在HTM文档中添加一些便于阅读和理解但不需要显示在页面中的注释文字，就需要使用注释标签。
• HTML中的注释以"<!--"开头，以"-->"结束。

<!--注释语句-->          快捷键：ctrl + /

2.特殊字符　

• 在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们可以使用下面的字符来替代。

• 特殊字符	描述	字符的代码
  	空格符	 
  <	小于号	&lt;
  >	大于号	&gt;
  &	和号	&amp;
  ￥	人民币	&yen;
  	版权	&copy;
  	注册商标	&reg;
  °	摄氏度	&deg;
  ±	正负号	&plusmn;
  	乘号	&times;
  	除号	&divide;
  ²	平方	&sup2;
  ³	立方	&sup3;

四、表格标签

1.表格的主要作用

• 主要用于展示数据。

2.表格的基本语法

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

1. 　<table></table>是用用于定义表格的标签。
2. 　<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3. 　<td></td>用于定义表格中的单元格，必须嵌套在<>tr</tr>标签中。
4. 字母td指表格数据，即数据单元格的内容。

3.表头单元格标签

• 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
• <th>标签表示HTNL表格的表头部分

• <table>
      <tr>
             <th>姓名</th>
              ...
      </tr>
      ...
  </table>　　

4.表格属性

1. 实际开发中不常用，后面通过CSS来设置。
2. 记住英文单词，后面CSS会使用。
3. 直观感受表格的外观形态。

属性名	属性值	描述
align	left、center、right	国定表格相对周围元素的对齐方式。
border	1或者“ ”	规定表格单元是否拥有边框，默认为“ ”，表示没有边框。
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

五、表格结构标签

• 更好地表示表格的语义，将表格分割为表格头部和表格主体两大部分。
• 分别用<thead>标签表示表示表格头部区域，<tbody>标签表示表格的主体区域，更好的分清表格结构。

六、合并单元格

• 只会最简单的合并单元格即可。

1. 合并单元格方式
   • 跨行合并：rowspan="合并单元格的个数"
   • 跨列合并：colspan=“合并单元格的个数”
2. 目标单元格
   • 跨行：最上侧单元格为目标单元格，写合并代码
   • 跨列：最左侧单元格为目标单元格，写合并代码
3. 合并单元格的步骤（三部曲）

• 先确定是跨行还是跨列合并。
• 找到目标单元格，写上合并方式=合并单元格数量。比如<td colspan="2"></td>。
• 删除多余的单元格。

七、列表标签

• 列表是用来布局的。
• 分为三大类：无序列表、有序列表、自定义列表。

1.无序列表（重要）

• <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，二列表项使用<li>标签定义。
• 基本语法格式：

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

2.有序列表

• <ol>标签用于定义有序列表。
• 实际使用中，我们会使用CSS来设置。

3.自定义列表

• 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
• <dl>标签用于定义描述列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

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

八、表单标签

• 为什么需要表单：为了收集用户信息
• 表单的组成：由表单域、表单控件（也称表单元素）和提示信息3个部分组成。

1.表单域

• 表单域是一个包含表单元素的区域。
• 在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
• <from>会把它范围内的表单元素信息提交给服务器。
• 暂时不要表单域提交数据，只需要协商form标签即可。

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

• 常用属性：

• 属性	属性值	作用
  action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
  method	get/post	用于设置表单数据的提交方式，其取值为get或post。
  name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

  　　

2.表单控件（表单元素）

• 在表单域中可以定义各种表单元素，这些表单元素就是运行用户在表单中输入或者选择的内容控件。

2.1.input输入表单元素

1. <input>标签中，包含一个type属性。
2. <input />标签为单标签。
3. type属性设置不同的属性值用爱指定不同的控件类型。
4. type属性的属性值及其描述：

   • 属性值	描述
     button	定义可点击按钮（多数情况下，用于通过JavaScrip启动脚本）。
     checkbox	定义复选框。
     file	定义输入字段和“浏览”按钮，供文件上传。
     hidden	定义隐藏的输入字段。
     image	定义图像形式的提交按钮。
     password	定义密码字段，该字段中的字符被隐码。
     radio	定义单选按钮。
     reset	定义重置按钮，重置按钮会清楚表单中的所有数据。
     submit	定义提交按钮，提交按钮会把表单数据发送到服务器。
     text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。

　　4.除type属性外，<input>标签还有很多其他属性。

• 属性	属性值	描述
  name	由用户自定义	定义inpout元素的名称。
  value	由用户自定义	规定input元素的值。
  checked	checked	规定此input元素首次加载时应当被选中。
  maxlength	正整数	规定输入字段中的字符的最大长度。

　　5.<label>标签

• <label>标签为input元素定义标注（标签）。
• <label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）跳转到或者选择对用的表单元素上，用来增加用户体验。

• <label for="sex">男</label>
  <input type="radio" name="sex" id="sex" />
  核心：<label>标签中的for属性应当与相关元素的id属性相同。

2.2.select下拉表单元素

• 用<select>标签定义下拉列表。
• 在<option>中 定义selected="selected"时，当前项即为默认选中项。

• <select>
      <option>选项1</option>
       <option>选项2</option>
       <option>选项3</option>
      ...
  </select>　　

2.3.textarea文本域元素

• 当用户输入内容较多的情况，使用<textarea>标签。
• 常用于留言板、评论。
• cols、rows在实际开发中不会使用，都是使用CSS来改变大小。

• <textarea roes="3" cols="20">
      文本内容
  </textarea>　　

九、查阅文档

1. 百度
2. W3C
3. MDN

十、HTML完结撒花！