HTML

HTML

为学习Angular做铺垫，我们重新学习一下HTML的相关内容

语义化标签

HTML 语义化标签是指那些能够清晰表达其内容含义的 HTML 标签。

使用语义化标签有助于提高代码的可读性、可维护性和可访问性，同时也有利于搜索引擎优化（SEO）

  • <header>：用于定义文档或部分的头部区域，通常包含网站标志、导航链接等。

  • <nav>：专门用来定义导航链接的部分，适合放置页面的主要导航菜单。

  • <main>：表示文档的主要内容，每个页面应该只有一个 <main> 元素，并且它不应该作为其他元素（如 <article> 或 <aside>）的一部分。

  • <article>：用于定义独立的内容块，例如博客文章、新闻故事或评论，这些内容可以独立存在或者被分发到其他地方。

  • <section>：用于将文档分成章节或逻辑部分，通常会有一个标题（<h1> 到 <h6>）来描述该部分的内容。

  • <aside>：表示与主要内容相关的辅助信息，比如侧边栏或广告。

  • <footer>：用于定义文档或部分的页脚，通常包含版权信息、联系人信息等。

此外，还有一些其他的语义化标签，例如：

  • <figure> 和 <figcaption>：用于组合图片、图表和其他插图内容及其标题。
  • <time>：用于标记时间或日期，可以包含 datetime 属性以提供更精确的时间格式。
  • <mark>：用于高亮显示文本，表明该文本是引用或需要特别注意的部分。
  • <address>：用于定义文档作者或拥有者的联系信息。
标签语义化

再嵌入CSS样式后，我们发现很多本身带有样式标签已经失去了本身的样式存在的意义

那么我们就更应该重视标签中的语义，比如em和strong标签就应该拿来标识重点内容

行标签和块标签有很多，但我们最常使用的行标签就是没有意义的span标签，最常使用的块标签是没有意义的div标签

超链接

超链接不只可以实现跳转页面，也可以完成对资源的请求，下载

资源请求

所有在浏览器能够打开的文件都可以通过超链接直接打开，例如MP4，JPG，PDF等

不能够在浏览器中打开的文件会自动弹出下载链接，例如ZIP文件等

资源下载

可以在超链接后加入download属性，实现点击超链接下载该资源

可以通过配置download属性值来实现下载文件的重命名

<a href="tupian.jpg" download="图片.jpg">图片下载</a>
锚点

可以通过超链接实现锚点的跳转，锚点可以为标签中的id属性

注：可以通过a标签直接跳转到其他页面的锚点

<a href="#maodian">跳转至锚点</a> 
<a href="#maodian2">跳转至锚点2</a> 

<!-- 通过a标签制作锚点（name属性） -->
<a name="maodian"></a> 
<!-- 通过id属性制作锚点（推荐方法） -->
<p id="maodian2"></a> 

<a href="#">回到顶部</a> 
<a href="">刷新页面</a>

<!-- 在超链接中可以包含js代码 -->
<a href="javascript: alert(); ">点我弹窗</a>
唤起应用

超链接可以唤起本地应用

<p id="tel:12312341234">拨打电话</a> 
<p id="mailto:12312341234@gmail.com">发送邮件</a> 
<p id="sms:10086">发送短信</a>

列表

注：列表在最佳实践中也要遵循语义化标签，在使用css时，有序列表和无序列表的列表项都是可自定义的，即标签的实现效果是不重要的

列表项（List Item） => li标签

有序列表 （Ordered List） => ol标签

无序列表 （Unordered List） => ul标签

自定义列表 （Definition List） => dl标签

自定义列表项目符号（Definition Term） => dt标签

自定义列表描述（Definition Description）=> dt标签

表格

表格（table） => table标签

表格标题（caption） => caption标签

表格头部（table head） => thead标签

表格主体（table body） => tbody标签

表格脚注（table foort） => tfoot标签

表格行（table row） => tr标签

表头单元格（table head）=> th标签

表中单元格数据（table date） => td标签

注：表格主题和表格脚注的单元格标签都使用td

表格属性
属性名功能
border表格边框
width表格宽度，单元格列宽自动调整
height表格高度，单元格高度自动调整（表头和脚注的高度不变，如果想要调整表头和脚注高度，需将属性加在thead和tfoot标签中）
cellspacing单元格间距，（边框距离为0不代表边框重叠，仍然受单元格边框粗细影响）
align水平对齐方式（thead，tbody，tfoot），[left , center , right]
valignvertical align 垂直对齐方式（thead，tbody，tfoot），[top , middle , bottom]

然而，遵循语义化标签，所有的表格样式仍然可以通过CSS来调整

跨行与跨列

跨列（column span） => colspan属性

跨行（row span）=> rowspan属性

在thead，tbody，tfoot中的th和td标签中使用跨行与跨列标签

表单

在前端框架的开发中，我们仍然画很多表单和按钮，但作用不再是通过表单来提交信息内容，而是将表单中信息绑定到model上面，然后通过js逻辑来发送请求

  • 表单的作用：现在主要用于收集用户输入，并通过数据绑定机制将这些输入同步到组件的状态或模型（Model）中。表单不再直接用于提交数据给服务器。
  • 按钮的作用：通常用来触发特定的行为或事件处理函数，比如验证表单、清理输入、或者发起API请求。按钮点击事件可以被监听并绑定到相应的JavaScript逻辑上，而不是默认提交整个表单。

然而，就算是不使用表单默认的提交逻辑，但我们仍然不会抛弃form标签，因为z要遵顼语义化标签的原则，显示的定义这是一个表单

多样式按钮
<!-- 确认按钮 -->
<input type="submit" value="确认">
<button type="submit">确认</button>

<!-- 重置按钮 -->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!-- 普通按钮 -->
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
fieldset标签

<fieldset> 标签是HTML中的一个表单元素，用于将表单内的相关元素组合在一起，并可选地为这个组合添加一个标题。它通常与 <legend> 标签一起使用，以提供对字段集的描述性标题。使用 fieldset 可以增强表单的语义结构和可访问性，使得表单更容易理解和使用，特别是对于辅助技术（如屏幕阅读器）的用户。

<fieldset>
  <legend>标题文本</legend>
  <!-- 表单控件和其他内容 -->
</fieldset>

框架

<iframe> 标签（内联框架）用于在当前HTML文档中嵌入另一个HTML页面。它允许在一个网页中展示来自不同源的其他内容，例如将一个网站的部分内容嵌入到另一个网站中，或者在同一页面上显示多个不同的内容区域。

<iframe src="URL" title="描述性标题"></iframe>
target联动

<iframe> 可以通过与超链接 (<a>) 和表单 (<form>) 的 target 属性来实现联动效果。通过设置这些元素的 target 属性为 <iframe> 的 name 或 id，可以让链接或表单提交的结果在指定的 <iframe> 中显示。

类似地，你也可以让表单提交的结果显示在一个 <iframe> 中。这可以通过将表单的 target 属性设置为 <iframe> 的 name 或 id 来实现

`