Web 基础学习 | 搬砖之路

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言，文件后缀.html``.htm

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="This is page author" />
    <meta name="description" content="This is page description" />
    <title>This is Page Title</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="my-css-file.css" />
  </head>
  <body>
    Body
  </body>
</html>

块级元素

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。

div
h*
p
br
ul
ol
table
…

p 标签不可嵌套块级元素

内联元素

内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。

span
a
img
…

<!-- 标题 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!-- 段落 -->
<p>段落</p>
<br> （换行）
<hr> （水平线）

<!-- 文本 -->
<span>ashjfha</span>
<b>粗体</b>
<em>强调字</em>
<i>斜体字</i>
<s>删除线</s>
<u>下滑线</u>
<small>小字</small>

<!-- 链接 -->
<a href="https://www.baidu.com/">百度</a>
<a href="#Id">锚点</a>

<!-- 图片 -->
<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">

<!-- 无序列表 -->
<ul>
    <li>列表项</li>
    <li>列表项</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>列表项</li>
    <li>列表项</li>
</ol>


<!-- 定义列表 -->
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

<!-- 表格 -->
<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

<!-- 表单 -->
<form action="demo_form.php" method="post/get">
  <input type="text" name="email" size="40" maxlength="50">
  <input type="password">
  <input type="checkbox" checked="checked">
  <input type="radio" checked="checked">
  <input type="submit" value="Send">
  <input type="reset">
  <input type="hidden">
  <select>
    <option>苹果</option>
    <option selected="selected">香蕉</option>
    <option>樱桃</option>
  </select>
  <textarea name="comment" rows="60" cols="20"></textarea>
</form>

语义元素

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义导航链接的部分。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

CSS

参考网站

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码

标签选择器

span {
    background-color: yellow;
}

div {
    color: red;
}

类选择器

.title {
  background-color: yellow;
}

ID选择器

#title {
   color: red;
}

属性选择器

a[href="https://www.baidu.com"] {
  color: red;
}

伪类选择器

span:hover {
   color: red;
}

关系选择器

.box div {
    color: red;
} 
.box > div {
  color: yellow;
}
.box.box1 {
  color: green;
}
.box + p {
  color: #ccc;
}

JavaScript

ECMAScript 6 入门