• 欢迎光临~

前端17号学习(html完结)

开发技术 开发技术 2022-12-17 次浏览

一、路径

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完结撒花!

 

程序员灯塔
转载请注明原文链接:前端17号学习(html完结)
喜欢 (0)