前端17号学习（html完结）

一、路径

1.目录文件夹和跟目录

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

2.VScode中打开目录文件夹

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

3.路径

  • 页面中图片很多，通常存放在一个Images文件夹里，这时需要采用“路径”的方式来指定图像文件的位置。
  • 路径分为：
  1. 相对路径：图片相对于HTML页面的位置
  2. 绝对路径：是指目录下的绝对位置
相对路径分类 符号 说明
同一级路径   图像文件位于HTML文件同一级 如<img src="baidu.gif" />
下一级路径 / 图像文件位于HTML文件下一级 如<img src="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页面中，一些特殊的符号很难或者不方便直接使用，此时我们可以使用下面的字符来替代。
  • 特殊字符 描述 字符的代码
      空格符 &nbsp;
    < 小于号 &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完结撒花！

 

posted @ 2022-12-18 01:05  SHUOSHIBUDEERYI  阅读(25)  评论(0)  编辑  收藏  举报