蓝旭前端第一周预习作业

Nyx_49

已于 2024-03-24 00:18:57 修改

阅读量692

点赞数 16

文章标签：前端 html5 css3

于 2024-03-24 00:01:00 首次发布

本文链接：https://blog.csdn.net/Nyx_49/article/details/136978262

版权

HyperText Markup Language 超文本标记语言

简单结构

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。
内容（Content）：元素的内容，本例中就是段落的文本。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。

简单常用标签

html：元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

<!doctype html>
<html lang="zh">
  <head>
    <!-- … -->
  </head>
  <body>
    <!-- … -->
  </body>
</html>

head：元素包含机器可读的文档相关信息（元数据），如文档的标题、脚本和样式表。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>文档标题</title>
  </head>
</html>

body：元素表示文档的内容。

<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>

title：元素定义文档的标题，显示在浏览器的标题栏或标签页上。

<title>Amazing！</title>

h1–h6：元素呈现了六个不同的级别的标题，h1级别最高，而h6级别最低。

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

p：元素表示文本的一个段落。

<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>

br：元素在文本中生成一个换行（回车）符号。

Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA

b：元素用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）

<p>
  This article describes several <b>text-level</b> elements. It explains their
  usage in an <b>HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b> element, likely in bold.</b>

i：元素用于表现因某些原因需要区分普通文本的一系列文本。

<p>
  The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in
  music, art, and literature
</p>

s：元素使用删除线来渲染文本。

<s>Today's Special: Salmon</s> SOLD OUT<br>
<span style="text-decoration:line-through;">Today's Special:
  Salmon</span> SOLD OUT

u：元素表示行内文本拥有一个非文本形式的注释,该注释需要以某种方式渲染出来。

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

a：元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

<a href="https://www.mozilla.com"> Mozilla </a>

ul：元素表示一系列无序的列表项目，通常渲染为项目符号列表。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

ol：元素表示有序列表，通常渲染为一个带编号的列表。

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

dl：元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <!-- Other terms and descriptions -->
</dl>

table：元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

select：元素表示一个提供选项菜单的控件：

<!-- 第二项会默认选中 -->
<select name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

label：元素（标签）表示用户界面中某个元素的说明。

<label>Click me <input type="text" /></label>

button：元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。

<button name="button">Click me</button>

简单全局属性

class：一个以空格分隔的元素的类名列表，它允许 CSS 和 Javascript 通过类选择器或 DOM 方法来选择和访问特定的元素。

<p>Narrator: This is the beginning of the play.</p>
<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>
<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

id：一个全文档唯一的标识符（ID）。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。

<p>A normal, boring paragraph. Try not to fall asleep.</p>
<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

简单input标签

text：元素创建了基础的单行文本字段。

<form>
  <div>
    <label for="uname">输入一个用户名：</label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>提交</button>
  </div>
</form>

password：元素可以让用户更加安全的输入密码。

<label for="userPassword">密码：</label>
<input id="userPassword" type="password" />

radio：元素通常用于一个单选组中，其中包含一组描述一系列相关选项的单选按钮。

<form>
  <fieldset>
    <legend>请选择首选的联系方式：</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">电子邮件</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">电话</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">邮件</label>
    </div>
    <div>
      <button type="submit">提交</button>
    </div>
  </fieldset>
</form>

checkbox：元素在默认情况下被呈现为激活时被选中（打勾）的方框。

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">要订阅报纸吗？</label>
  </div>
  <div>
    <button type="submit">订阅</button>
  </div>
</form>

file：元素允许用户可以从他们的设备中选择一个或多个文件。

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

Cascading Style Sheet 层叠样式表

引入方式

内部样式表：学习使用
外部样式表：开发使用
行内样式：配合JS使用

简单选择器

属性选择器：匹配那些具有特定属性或属性值的元素

/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}
/* 以 "https" 开始，".org" 结尾的链接 */
a[href^="https"][href$=".org"] {
  color: green;
}

类选择器：根据 class 属性的内容匹配元素。

/* 所有含有 class="spacious" 类的元素 */
.spacious {
  margin: 2em;
}
/* 所有同时含有“spacious”和“elegant”类的 <li> 元素 */
li.spacious.elegant {
  margin: 2em;
}

id选择器：根据该元素的 id 属性中的内容匹配元素。

/* id 为 "demo" 的元素会被选中 */
#demo {
  border: red 2px solid;
}

通配符选择器：匹配任意类型的 HTML 元素。

/* 所有英语元素 */
*[lang^="en"] {
  color: green;
}

简单样式

font-size：属性设置字体大小。

html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}

font-weight：属性指定了字体的粗细程度。

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}
/* Set div text to two steps darker than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}
/* Sets text enclosed within span tag
   to be one step lighter than the parent. */
span {
  font-weight: lighter;
}

font-style：属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

.normal {
  font-style: normal;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

line-height：属性用于设置多行元素的空间量，如多行文本的间距。

/* 理论上，以下所有规则拥有相同的行高 */
div {
  line-height: 1.2;
  font-size: 10pt;
} /* 无单位数值 number/unitless */
div {
  line-height: 1.2em;
  font-size: 10pt;
} /* 长度 length */
div {
  line-height: 120%;
  font-size: 10pt;
} /* 百分比 percentage */
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
} /* font 简写属性 font shorthand */

font-family：属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

.fantasy {
  font-family: fantasy;
}
.emoji {
  font-family: emoji;
}
.math {
  font-family: math;
}
.fangsong {
  font-family: fangsong;
}

color：颜属性设置元素的文本以及文本装饰的前景色颜色值，并设置 currentcolor 值。

p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

text-indent：属性能定义一个块元素首行文本内容之前的缩进量。

p {
  text-indent: 5em;
  background: powderblue;
}

text-align：属性设置块元素或者单元格框的行内内容的水平对齐。

.example {
  text-align: start;
  border: solid;
}

text-decoration：属性设置文本上的装饰性线条的外观。

.under {
  text-decoration: underline red;
}
.over {
  text-decoration: wavy overline lime;
}
.line {
  text-decoration: line-through;
}
.plain {
  text-decoration: none;
}
.underover {
  text-decoration: dashed underline overline;
}
.thick {
  text-decoration: solid underline purple 4px;
}
.blink {
  text-decoration: blink;
}

定位布局

bottom：定位元素下外边距边界与其包含块下边界之间的偏移。（top）

p {
  font-size: 30px;
  line-height: 2em;
}
div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.2);
  border: 1px solid blue;
}
.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

clear：是否必须移动到在它之前的浮动元素下面。

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

display：是否被视为块或者内联元素以及用于子元素的布局。

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}
article {
  background-color: red;
}
article span {
  background-color: black;
  color: white;
  margin: 1px;
}
article,
span {
  padding: 10px;
  border-radius: 7px;
}
article,
div {
  margin: 20px;
}

float：沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}
div {
  margin: 5px;
  width: 50px;
  height: 150px;
}
.left {
  float: left;
  background: pink;
}
.right {
  float: right;
  background: cyan;
}

left：元素的左外边距边界与其包含块左边界之间的偏移。（right）

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}
#example_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}
#example_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}

position：指定一个元素在文档中的定位方式。

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}
#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

visibility：显示或隐藏元素。

.visible {
  visibility: visible;
}
.not-visible {
  visibility: hidden;
}

z-index：设置定位元素及其后代元素或flex项目的Z轴顺序。

.wrapper {
  position: relative;
}
.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}