”前端三剑客“基础入门

一、HTML

1 常用标签检索

标签 描述 示例
<html> 定义整个 HTML 文档  
<head> 定义HTML文档的头部  
<body> 定义HTML 文档的主体  
<br> 没有关闭标签的空元素，标签定义换行  
<h1> - <h6> 标题  
<p> 段落  
<a> 链接 <a href="http://10.1.71.84">This is my web.</a>
<img> 图片 <img src="1.jpg" width="104" height="143" />
<hr /> 创建水平线，可用于分隔内容  
<style> 定义样式  
<script> 标签用于定义客户端脚本  
<link> 定义资源引用  
<span> 定义文档中的行内的小块或区域  
<div> 定义文档中的节或区域（块级）  
<a name> 定义锚，可创建HTML页面的书签 <a name="label">锚
<table> 定义表格，<th>定义表头，<tr>定义行，<td>d定义单元格  
<ul> 无序列表始于 <ul> ,每个列表项始于 <li>  
<ol> 有序列表始于<ol> ,每个列表项始于 <li> 标签  
<iframe> 定义内联的子窗口,用于在网页内显示网页 <iframe src="URL"></iframe>
<title> 标签定义文档的标题  
<base> 为页面上的所有链接规定默认地址或默认目标 <base target="_blank" />
<meta> 提供关于 HTML 文档的元数据。被用于规定页面的描述、关键词、文档的作者、最后修改时间等。  
<code> 定义计算机代码文本,不保留多余的空格和折行,可在<pre> 元素中包围代码  
<samp> 定义计算机代码示例  
<var> 定义数学变量  
&nbsp 空格  

 

2 表单

  • 标签：<form>

  • 表单项：

    1. <input>：定义表单项，通过type属性控制输入形式，有以下几种提交形式：

      类型 描述
      text 定义常规文本输入。
      password 定义密码字段，字段中的字符会被做掩码处理（显示为星号或实心圆）。
      radio 定义单选按钮输入（选择一个按钮）。
      checkbox 定义复选框输入（可选择多个按钮）。
      submit 定义提交表单数据至表单处理程序的按钮。
      reset 定义表单数据重置。
      button 定义按钮。

      示例代码及展示：image-20240202011549036

      <form>
    User name:<br>
    <input type="text" name="username">
    <br>
     User password:<br>
    <input type="password" name="psw">
    <br>
    <input type="radio" name="sex" value="male" checked>Male
    <input type="radio" name="sex" value="female">Female
    <br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    <br>
    <input type="submit" value="Submit">
    <br>
    <input type="button" onclick="alert('Hello World!')" value="Click Me!">
</form>

      HTML5 增加了多个新的输入类型：color、 date 、datetime、 datetime-local、 email、 month 、number、 range、 search、 tel、 time、 url、 week。

      image-20240202015215496

    2. <select>：定义下拉列表。

      <select> 元素最常用于表单中，用于收集用户输入。提交表单后，需要 name 属性引用表单数据（如果省略 name 属性，下拉列表中的数据将不会被提交）。

      <option>定义下拉列表中的可用选项。需要使用 id 属性将下拉列表与标签（label）相关联。

      示例如下：image-20240202013505705

      <label for="cars">请选择一个汽车品牌：</label>
<select  name="cars" id="cars">
  <optgroup label="中国车">
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德国车">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

       

    3. <textarea>：定义文本域。通常用在表单中，用于收集用户的输入，如评论或评论。文本区域可以容纳无限数量的字符。

      <label for="w3review">评论 W3School：</label>

<textarea id="w3review" name="w3review" rows="4" cols="50">
在 w3school.com.cn，您将学习如何开发网站。他们提供所有 Web 开发技术的免费教程。
</textarea>

       

  • 属性

    1. action属性 ：定义在提交表单时执行的动作，规定向何处提交表单的地址（URL）（提交页面）。

    2. method属性：规定在提交表单时所用的 HTTP 方法（GET 或 POST）。

      如指定某个服务器脚本处理被提交表单，使用POST方法：

      <form action="action_page.php" method="POST">

    1. 其他表单属性：

      属性 描述
      accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
      autocomplete 浏览器会根据用户之前输入的值，是否自动填写值。（默认：开启）。
      enctype 规定被提交数据的编码（默认：url-encoded）。
      name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
      novalidate 规定浏览器不验证表单。
      target 规定 action 属性中地址的目标（默认：_self）。

关于 GET 的注意事项：

  • 以名称/值对的形式将表单数据追加到 URL
  • 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
  • URL 的长度受到限制（2048 个字符）
  • 对于用户希望将结果添加为书签的表单提交很有用
  • GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

  • 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
  • POST 没有大小限制，可用于发送大量数据。
  • 带有 POST 的表单提交无法添加书签

 

3 链接

name 属性规定锚（anchor）的名称。可以使用 name 属性或ID创建 HTML 页面中的书签。

<p id="Abstract">
    通过ID和链接实现HTML书签。
</p>
<a href="#Abstract">跳转到摘要</a>

<a name="tips">基本的注意事项 - 有用的提示</a>
<br>
<a href="#tips">有用的提示</a>

4 样式设置

CSS选择器可用来选取需要设置样式的元素（标签）。有元素、id、类选择器三类。

id 属性用于指向样式表中的特定样式声明。还可通过ID和链接实现HTML书签。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

<p id="Abstract">通过ID和链接实现HTML书签。</p>
<a href="#Abstract">跳转到摘要</a>

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用。

<!DOCTYPE html>
<html>
<style>
/* 设置元素h3的样式 */
h3 {
  color: red;
  padding: 10px;
}
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h3>BeiJing</h2>

</html>

 

5 网页布局

HTML5 语义元素

HTML5 语义元素

元素 作用
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

URL

scheme://host.domain:port/path/filename

  • scheme - 定义因特网服务的类型。最常见的类型是 http

    Scheme 访问 用于
    http 超文本传输协议 以 http:// 开头的普通网页。不加密。
    https 安全超文本传输协议 安全网页。加密所有信息交换。
    ftp 文件传输协议 用于将文件下载或上传至网站。
    file 您计算机上的文件。

  • host - 定义域主机（http 的默认主机是 www）

  • domain - 定义因特网域名，比如 w3school.com.cn

  • :port - 定义主机上的端口号（http 的默认端口号是 80）

  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

  • filename - 定义文档/资源的名称

 

二、CSS

语法：image-20240201234344175

选择器：元素、id、类

通用选择器（*）：选择页面上的所有的 HTML 元素。

分组选择器选取所有具有相同样式定义的 HTML 元素。

h1, h2, p {
  text-align: center;
  color: red;
}

 

三、JavaScript