html 学习

偷学某专业的小学期被抓

\(html\)

基础标签

<html>

\(HTML\) 元素是根元素，其他元素都是它的后代。

规定文档相关的配置信息，包括文档的标题，引用的文档样式和脚本等。

<body>

文档的内容，可用 \(document.body\) 属性制作访问 \(body\) 的脚本。

<title>

定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

可以定义两个链接文档之间的关系

  • <link rel = "icon" href="/code/image/logo.png"> 选择网页的 \(logo\) 链接

<meta>

HTML 元素表示那些不能由其它 \(HTML\) 元相关（meta-related）元素（(<base>、<link>, <script>，<style> 或 <title>）之一表示的任何元数据信息。

  • \(charset\) : 声明了文档的字符编码，一般为\(UTF-8\)
  • \(name\) : \(name\) 和 \(content\) 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 \(name\) 作为元数据的名称，\(content\) 作为元数据的值。
    • <meta name="description" content="一个介绍c语言的网站"> 网页介绍
    • <meta name="keywords"="c,c++,算法"> 搜索引擎能够检索到的关键词

文本标签

  • <div>
    是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

    与 <span> 相比有换行，属于块元素。

  • <span>
    短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用 \(class\) 或者 \(id\) 属性）。应该在没有其他合适的语义元素时才使用它.
    属于行内元素，内联标签。

  • <h1-h6>
    六个不同级别的标题

  • <p>
    文本的一个段落，一整块与相邻文本分离的文本，会忽略文本中的换行符

  • <pre>
    预定义格式文本，似乎能看成一个加了 \(CSS\) 限制的 <p>

    pre {
    display: block;
    font-family: monospace;
    white-space :pre
    margin: 1em 0px
}

    等宽字体，文本中的空格和换行都会显示出来。

  • <br>
    换行符，为了鲁棒性网上建议写为 </br>

  • <hr> : 水平线

  • <b> ：粗体

  • <i> : 斜体

  • <del> ：删除线

  • <ins> ：已经被插入文档中的文本

语义标签

语义标签以前是使用的较多的 \(div\) 的 \(class\), 后来被单独做成了标签

  • <header> :
    用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 \(Logo\) 、搜索框、作者名称，等等。
  • <nav> : 表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
  • <section> : 表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
  • <figure>
  • <figcaption>
  • <article> : 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构
  • <aside> : 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框
  • <footer> : 最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

图片

<img> 元素将一份图像嵌入文档，默认为行内元素，即display: inline,多个图片在位置足够的情况下会放置在同一行。

  • \(src\) 属性 : 必须的属性，包含了想要嵌入图片的文件路径，会将 \(html\) 所在文件夹作为根目录。可用相对路径和绝对路径。

  • \(alt\) 属性 ：对于图像的文本描述，图片无法加载时可以显示

  • \(width\) 属性 ， \(height\) 属性

音频与视频

  • <audio> 标签
    可以包含一个或者多个音频资源，可以使用 \(src\) 属性或者用 <source> 元素描述，浏览器会顺序选择最合适的一个音频播放。 需要加 \(controls\) 属性。
    <audio controls src = "/lujing.mp3">无法播放</audio>

    <audio controls>
  <source src = "/lujing1.mp3" type="audio/mpeg">
  <source src = "/lujing2.mp3" type="audio/mpeg">
</audio>
  • <video> 标签
    嵌入媒体播放器, \(source\) 的 \(type\) 是 \(video/mp4\)

超链接

<a> 元素通过它的 \(href\) 属性创建超链接
\(target=" \_blank"\) 属性可以将链接用一个新的网页打开
<a> 中可以嵌套任意标签

表单

  • <form> 标签
    表示文档中的一个区域，此区域包含交互控件，用于向 \(web\) 服务器提交信息

    <form action = "/about.html"> <!--将表单发送到这个网站-->

  • <label> 标签，可以和一个表单控件的 \(id\) 绑定，建议写

    <form>
    <lable for="username">用户名</label>
    <input type="text" name="user" id="username">
</form>

  • <input> 标签
    用来填写内容：

    • <input type = "text"> : 创建基础的单行文本框
    • <input type = "number"> : 用于输入数字
    • <input type = "email"> ：输入一个邮箱，会用正则表达式(?)判断是否合法。
    • <input type = "password"> : 输入密码
    • <input type = "ratio> : 类似圆圈选项
      <form>
  <label for ="cpp">cpp</label>
  <input type="ratio" name="lang" value="cpp" id="cpp">
  <br>
  <label for ="java">java</label>
  <input type="ratio" name="lang" value="java" id="java">
  <br>
  <label for ="python">python</label>
  <input type="ratio" name="lang" value="python" id="python">
  <br>
      \(name\) 相同的选项只能选其中一个，不同的选项可以选多个。

  • <input>常用属性：

    • \(id\)
    • \(name\) : 网站 \(url\) 的访问参数
    • \(maxlength/minlength\)
    • \(required\) : 是否必填
    • \(placeholder\) ：表单控件为空时，控件中显示的内容。

  • <textarea> 标签：
    多行纯文本编辑控件，特点是长和不限格式，如评论或反馈。
    \(rows\) 行数， \(cols\) 列数

  • <select> 与 <option> 标签：
    提供选项菜单

    <form>
  <label for="lang">语言</label>
  <select name="lang" id="lang">
    <option value="">请选择</option>
    <option selected value="cpp">cpp</option>
    <option value="java">java</option>
    <option value="python">python</option>
  </select>
</form>

    \(selected\) 属性表示默认选择某项

  • <button> 标签：可点击的按钮,缺省时将会把 \(form\) 中的所有表单提交

    <button type="submit">提交</button>

列表

列表可以在中间嵌套

  • <ui> 和 <li> : 无序列表
    <ui>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ui>
  • <oi> 和 <li> : 有序列表，通常渲染为带编号的列表
  • <dl> ，<dd> 和 <dt> : 键值对列表
    <dt> 不缩进， <dd> 缩进

表格

  • <table> : 表示表格数据
  • <caption> : 表格标题， \(CSS\) 样式化之后可以出现在表格的任意位置。
  • <thead> : 定义了一组定义表格的列头的行。
  • <tbody> : 定义一组数据行
  • <tr> : 定义表格中的行
  • <th> : 表头内的表头单元格
  • <td> : 一个包含数据的表格单元格
<table>
  <caption>成绩单</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>语文</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lll</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
  </tbody>
</table>

特殊符号

  • &lt <
  • &gt >
  • &amp &
  • &quot "
  • &copy 版权
  • &trade TM 商标
  • &reg 已注册
  • &nbsp 不断行的空白
posted @ 2022-08-17 18:46  misasteria  阅读(48)  评论(0)  编辑  收藏  举报