打字猫

小T全栈养成日记——day01（HTML篇）

一、HTML5

1.HTML5概念及发展历史

​ HTML （Hyper Text Markerup Language）超文本标记语言，特斯按时通过"<>"的形式,将标签包围起来，可以设置对应属性，行程在页面中的结构部分。

​ HTML从最早1993-6发布第一个版本，在1999-12-24年发布了HTML4.01版本，随着互联网及移动应用的快速发展，在2013-5-6发布了HTML5的版本，新增了部分面向移动终端的特性。

2.HTML基本结构

<!DOCTYPE>
<html>
    <head>
        <title>页面标题</title>
        <meta charset="UTF-8" />
        <meta name="keywords" content="关键词" />
        <meta name="description" content="" />
    </head>
</html>

3.常用块级及行级标签

3.1 h1标题标签

标题标签从h1 ~ h6，如果超出范围，浏览器回默认形式显示内容。改标签的特征，可以进行标签字体的缩放以及标签的加粗显示效果，一般可以作为命名布局来使用。

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

3.2 段落标签

表示一个页面中的段落标记，会产生上下间距。

<p>...</p>

3.3 换行标签

br标签显示的效果与段落不同，该标记一般放在一个段落中作为内容间换行使用，因此不会产生上下的间距。

<br/>

3.4 水平线标签

从浏览器的左侧贯穿到右侧的一条灰色水平线。

<hr/>

3.5 字体样式

strong：代表加粗显示

em：代表斜体显示

加粗：<strong>...</strong>
斜体：<em>...</em>

在HTML4中，包括<i></i>代表斜体，<b></b>代表加粗，在HTML5中已经不建议使用这两种标签。

3.6 注释与特殊符号

  • 注释：一般是代表对某一段代码的说明。

  • 特殊符号：为了避免出现很多无法预知的问题。

特殊符号 字符实体 示例
空格 &nbsp; <a herf="#">百度</a>&nbsp;
<a herf="#">新浪</a>
大于号（>） &gt; 如果时间&gt;晚上6点，就坐车回家
小于号（<） &lt; 如果时间&lt;早上7点，就走路去上学
引号（""） &quot; W3C规范中，HTML的属性值必须用成对的&quot;引起来
版权符号@ &copy; &copy;2003-2013

3.7 图像与超链接

  • img: 是image的简写，其中包含src (source)图片路径，alt 代表当图片无法显示时的提示内容，title 为鼠标悬停时显示的提示内容，width 是图片的宽度，height 是图片的高度，默认的单位都是px像素。

    <img src= "path" alt="text" title="text" with="x" height="y" />

    src的选项包括：

    • 绝对路径（不建议）

      通过计算机的本地资源加载文件，例如C:\xxxx\xxxx.jpg，如果图片或者是盘符发生了变化，就会导致图片无法加载。

      通过网络的形式加载图片，又可能发生的情况是网络地址变化，或者是网站维护删除了图片，都会导致图片加载失败。

    • 相对路径

      从当前的文件作为相对参照物找到对应路径的位置，一般都没有盘符，直接通过文佳佳的方式进行映射，如果史上层目录，可以使用" ../ "返回到上一级目录。

  • a: 超链接标签主要依靠与href(hyper refrence)属性实现超链接功能，如果没有添加href属性，最终显示的效果就是一个普通文本，target属性代表要打开的页面形式。

    • target:

      _self :代表从当前的标签页打开

      _blank :代表从一个新的标签中打开

      name :使用iframe的名字打开对应的页面

      <a href="path" target="目标窗口位置">链接文本或图像</a>

    • 普通超链接

    • 锚链接

      快速定位到当前页面中或者是其他页面中的某个定位点，该定位点即为锚点。

      <a href="页面名称#锚点名称">锚点跳转</a>

<a name="锚点名称">
	内容
</a>

    • 功能性链接

      融合了系统调用的功能，比如下面的代码能够实现邮件的发送。

      <a href="mailto:xxxx@163.com">联系站长</a>

4.列表

  • 无序列表（unorder list）ul

    适用于政题页面顺序排版、菜单功能设计。

    li :代表一个list item项。

    <ul>
	<li>...</li>
</ul>
    • type :
      • disc :飞盘
      • squire : 方块
      • circle : 圆形
      • none :没有标记

    type属性已经被废弃了，所以在开发中不要使用。

  • 有序列表（order list）ol

    特别适合于顺序导航、考试试卷、选择项等。

    <ol>
	<li>...</li>
</ol>
    • type :
      • A
      • a
      • I
      • i
      • 1 (默认)

  • 定义列表（defined list）dl

    适合于一些解释性的场景。

    对定义的内容进行解释，所以呈现的效果更加适合一些商品详情、论文设计、电子文稿等方面布局。

    <dl>
	<dt>标题</dt>
	<dd>内容</dd>
</dl>
类型 说明 项目符号
无序列表 以<ul>标签来实现
以<li>标签表示列表项		 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。
有序列表 以<ol>标签来实现
以<li>标签表示列表项		 有序里欸包ol-li一般用于显示带有顺序编号的特定场合。
定义列表 以<dl>标签来实现
以<dt>标签表示列表项
以<dd>标签定义内容		 定义列表一般适用于带有标题和标题解释性内容的场合。

5.表单 （form）

表单时作为客户端与服务器端交互的重要一种组件，其中包含了大量的表单元素。image-20230327202334301

5.1 文本框 （text）

<input type="text" name="username" id="username" required placeholder="请输入用户名" autocomplete="off" />

5.2 密码框 （password）

<input type="password" name="password" id="password" required placeholder="请输入密码" />

5.3 复选框 （checkbox）

弹琴<input type="checkbox" name="instr" value="playpiano" />
吹牛<input type="checkbox" name="instr" value="chuiniu" checked />
篮球<input type="checkbox" name="instr" value="basketball" />

可以同时选中多个选项，但是选项要按组进行设置。同一组的name必须保持一致，表现值一般都是文本，真实值需要按照实际的需求进行设置。

5.4 单选框 （radio）

男孩 <input type="radio" name="gender" value="boy" />
女孩 <input type="radio" name="gender" value="girl" />

同时只能多选其一，name也必须保持一致，如果出现不一致情况，那么所有的单选框都可以被选中。

5.5 按钮

5.5.1 重置按钮 （reset）

重置按钮要求放在表单中，可以将表单的元素内容恢复到初始化状态。

<input type="reset" value="重置" />

5.5.2 提交按钮 （submit）

提交按钮也需要放到表单中，可以将表单中的元素数据提交给服务器。

<input type="submit" value="提交">

5.5.3 图片按钮 （image）

替代提交按钮，使用图片的方式显示。

<input type="image" src="img/button.jpeg" />

5.5.4 普通按钮 （button）

该按钮默认情况下没有任何的交互机制，需要结合javascript实现动态交互功能。

<input type="button" value="这是一个按钮" onclick="show()" />

5.6 文件域 （file）

文件上传的组件。

<input type="file" name="pic" />

当使用文件域时，由于文件可能会由音频、视频、动画等方式组成，所以在设置文件域时，需要设置提交的方式为post，还需要设置提交的内容为form-data。

<form action="index.jsp" method="post" enctype="multipart/form-data">
	<input type="file" name="pic" />
</form>

5.7 文本域 （textarea）

一个多行的文本框，能够通过cols设置宽度，通过rows设置高度。

<textarea cols="200" rows="20">
	购买协议：如果从本店购买的商品出现任何的质量问题，一概不换、不退，就这样，咋滴
吧！！！
</textarea>

textarea标签对中输入的文字，显示在页面中为实体文字，点击不可消失，需要手动清除。如果需要设置提示文字点击文本域自动消失，可用placeholder = "text"来进行设置。

<textarea cols="200" rows="20" placeholder="购买协议：如果从本店购买的商品出现任何的质量问题，一概不换、不退，就这样，咋滴吧！！！">
</textarea>

此图为直接写进标签对中，实体文本需要删除再写新的内容。

此图为使用了placeholder属性添加的提示文字（水印），光标在文字之前。

5.8 表单高级操作

5.8.1 隐藏域 （hidden）

当我们需要将数据传输给服务器，但是又不想让用户看到，此时可以使用隐藏域。

<input type="hidden" name="" value="必须有值" />

5.8.2 只读 （readonly）

如果文件在文本框上设置制度，就只能够看到对应的内容，而无法更新修改。

<input type="text" readonly />

5.8.3 禁用 （disabled）

如果在某个元素上添加禁用属性，会导致该元素无法使用

<input type="text" disabled />

5.8.4 标注 （label）

能够快速的通过标签定位到所对应的表单元素上，形成焦点。

<label for="username">用户名</label>
<input type="text" id="username" />

for属性和id属性必对正！

6.媒体

  1. 多媒体来自多种不同的格式。它可以是看到或听到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。
  2. 在因特网上，会发现经常有嵌入到网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
  3. 浏览器支持：不同浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能偶以内敛的方式进行处理，而某些则需要额外的插件。
  4. 多媒体格式：确定媒体类型的最常用的方法是查看文件扩展名。例如：.swf .wmv .mp3 .mp4等。

6.1音频标签

<audio src="音频路径" autoplay controls />

src：对应音频的相对路径。

muted：规定音频输出被静音。

preload：若出现该属性，则音频在页面加载时进行加载，并预备播放。若使用“autoplay”，则忽略该属性。

autoplay：自动播放属性。

loop：循环播放。

controls：控制组件（浏览器自带的控制条）。

格式 文件
MP3 .mp3
.mpga
Wave .wav
ogg .ogg

6.2 视频标签

<video src="" autoplay controls />

src：对应视频的相对路径

poster：视频封面，没有播放时显示图片

muted：规定视频输出被静音

preload：预加载

autoplay：自动播放属性

loop：循环播放

controls：控制组件（浏览器自带的控制条）

preload：若出现该属性，则视频在页面加载时进行加载，并预备播放。若使用“autoplay”，则忽略该属性。

width：视频宽度

height：视频高度

videoWidth：视频内容宽度（初始状态下为0，加载metadata之后才有值）

videoWidth：视频内容高度（初始状态下为0，加载metadata之后才有值）

格式 文件
Mpeg-4 .mp4
webM VP8影片轨和 Ogg Vorbis音轨
ogg .ogg
MPEG .mpg
.mpeg

6.3滚动标签

6.3.1 文字的滚动

<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">文字</marquee>
direction属性 取值
left 默认值，向左滚动
right 向右滚动
up 向上滚动
down 向下滚动
behavior属性 取值
scroll 默认值，循环滚动
slide 只滚动一次，不重复滚动
width、height 设置滚动范围

6.3.2 图片的滚动

 <marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">
        <img src="" />
 </marquee>

7.内联框架

<iframe src="默认的页面地址" frameborder="0" scorlling="0" width="宽度" height=“高度" name="名字" />
<div class="left" style="width: 20%;float:left;margin-left: 20px;">
    <ul>
        <li><a href="audio.html" target="showframe">百度</a></li>
        <li><a href="table.html" target="showframe">搜狐</a></li>
        <li><a href="表格.html" target="showframe">163</a></li>
    </ul>
</div>
<div class="right" style="width: 70%;float:left">
    <iframe name="showframe" src="audio.html" frameborder="0" scrolling="yes" width="100%" height="500px"></iframe>

​ 内联框架时候用于后台管理系统布局。

8.HTML5新增布局

元素名 描述
header 标记头部区域的内容（用于整个页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容
posted @ 2023-03-27 21:29  我还是我吗？  阅读(18)  评论(0)  编辑  收藏  举报