蓝旭第一周预习

一.html

1.1 html的结构

---

• html完成的是整个网页的基本骨架
• 大致分为head、body、title三个部分
• head：网页头部，供浏览器识别
• body：网页主体，供用户观看
• title：网页标题

1.2 常用标签

---

• 标题标签：展示效果中划分标题（级别，标签名，各个标题标签显示效果，是否会被限制使用次数）

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

• 段落标签：浏览器会自动在每个元素前后添加一个空行

• <p>第一个段落</p>
  <p>第二个段落</p>

• 单标签：
• <br/> 换行标签
  <hr/> 水平线标签

• 文本格式化标签：

  <b>加粗</b><br/>
  <i>斜体</i><br/>
  <s>删除线</s><br/>
  <u>下划线</u>

• 图片标签：在网页中插入图片 <img src="图片的 URL">
• 标签属性：
  src – 指定图片的路径
  alt – 设置图片的替代文本 ( 图片加载失败时显示 )
  title – 设置图片的提示文本 ( 鼠标悬浮在图片上时显示 )
• 超链接标签： 可以从一个页面链接到另一个页面 <a href="https://www.baidu.com" 切换旧版 target="_blank">超链接 </a>
• 音频标签
• 视频标签
• 表格标签：（全双）table（定义表格））、tr（定义行）、td（单元格）、th（标有）

        列表标签： 无序列表的列表项没有顺序, 常用于展示不关心顺序的数据

                   有序列表的列表项会显示排序, 以此来提高数据的可读性

                   自定义列表可以展示多级信息, 以此来达到分类的效果

• 表单标签：收集用户信息

1.3 全局属性

1.ID属性：于为元素指定一个唯一的标识符。在文档中，每个元素的 id 值必须是独一无二的。这个属性常被用于 JavaScript 脚本或者 CSS 样式表中引用特定的元素。

 <div id="uniqueDiv">这是一个有唯一ID的div。</div>

2.class 属性：为元素指定一个或多个类名，类名用于在 CSS 中定义样式，或者在 JavaScript 中选择元素。多个类名之间用空格分隔

 <p class="highlight important">这是一个有特定类名的段落。</p>

3.style 属性：直接为元素添加内联样式。样式属性和值之间用冒号分隔，不同的样式声明之间用分号分隔。

<h1 style="color: blue; font-size: 24px;">这是一个有内联样式的标题。</h1>

4.title 属性：为元素提供额外的提示信息，当鼠标悬停在元素上时，会显示 title 属性的值。

<img src="example.jpg" alt="示例图片" title="这是一张示例图片">

5.lang 属性：指定元素内容的语言。它遵循语言代码标准，例如 "en" 代表英语，"zh-CN" 代表中文（中国大陆）。

<p lang="fr">Ceci est un paragraphe en français.</p>

6.tabindex 属性：定义元素的键盘焦点顺序。可以是正整数、零或负数。正整数决定了元素在顺序中的位置，零使元素可被聚焦但不改变顺序，负数则使元素不可通过键盘聚焦。

<button tabindex="1">第一个可聚焦按钮</button> <button tabindex="2">第二个可聚焦按钮</button>

7.hidden 属性：一个布尔属性，当存在时，元素将不会在页面上显示。它可以通过 JavaScript 动态移除或添加，以控制元素的可见性。

<div hidden>这个div当前是隐藏的。</div>

8.accesskey 属性：为元素定义一个快捷键，使用户可以通过按下特定的组合键快速访问该元素。不同浏览器的组合键可能有所不同。

<button accesskey="s">保存</button>

9.draggable 属性：指定元素是否可以被拖动。它可以取值为 "true"、"false" 或 "auto"。

<img src="example.jpg" alt="示例图片" draggable="true">

1.5 input 类型

• text：用于输入单行文本，例如用户名、密码等。
• password：用于输入密码，输入的内容会被隐藏，通常显示为星号或黑点。
• checkbox：用于选择多个选项中的一个或多个，例如兴趣爱好、服务条款等。
• radio：用于在多个互斥的选项中选择一个，例如性别、支付方式等。
• submit：用于提交表单数据到服务器，通常显示为 “提交” 或 “发送” 按钮。
• reset：用于重置表单数据到初始状态，通常显示为 “重置” 按钮。
• button：用于创建一个普通按钮，通常用于触发 JavaScript 函数或执行其他客户端操作。
• file：用于上传文件，例如图片、文档等。
• hidden：用于隐藏表单字段，通常用于存储一些不希望用户直接看到或修改的信息。
• email：用于输入电子邮件地址，浏览器会自动验证输入的格式是否正确。
• number：用于输入数字，浏览器会提供一些数字输入的交互功能，例如上下箭头调整数值。
• date：用于输入日期，浏览器会提供一个日期选择器，方便用户选择日期

二.CSS

1.1 css的引入方式

a.内联样式：在指定标签中书写样式，仅在当前标签中生效

b.嵌入式

c.外联式：<link rel="stylesheet" href="./myCSS.css" />

1.3 css三大特性

a.层叠性：层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个 CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的 CSS样式将会覆盖前面的CSS样式

b.继承性：子标签会继承父标签的==某些==样式，如文本颜色和字号。想要设

置一个可继承的属性，只需将它应用于父元素即可

c.优先级：

1. 继承样式的权重为 0 也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用

在子元素上的权重都为 0 ，即子元素定义的样式会覆盖所有继承来的样式。

2. 行内样式优先应用 style 属性的元素，其行内样式的权重非常高，可以理解为远大于 100 。总之，

他拥有比上面提高的选择器都大的优先级。

3. 权重相同时， CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后

的样式优先级最大。

4. CSS 定义了一个 !important 命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式

位置的远近， !important都具有最大优先级

1.2 选择器：用来选择标签的，选出来后给标签添加样式；样式规则为：属性名：属性值。

1.2.1 基础选择器

a. 标签选择器：针对一类标签

b.ID 选择器：针对某一个特定的标签使用

c.通用选择器（通配符）：针对所有的标签都适用

d.类选择器：针对你想要的所有标签使用

注：分为 多类选择器；分类选择器；

1.2.2组合选择器

a. 后代选择器（空格分隔） : 选择指定元素内部的所有符合条件的后代元素。

   描述：通过空格分隔两个选择器，以选择第一个选择器的后代中符合第二个选择器的元素。

b. 子元素选择器（ > 分隔） : 选择指定元素的直接子元素。

   描述：使用 > 符号分隔选择器，通过 > 符号选择直接子元素。

c. 相邻兄弟选择器（ + 分隔） : 选择与指定元素在同一层级且紧接在它后面的元素。

   描述：使用 + 符号分隔选择器，选择紧接在另一元素后的元素，且二者有相同的父元素

d. 兄弟选择器（ ~ 分隔） : 选择与指定元素在同一层级的所有后续兄弟元素。

   描述：使用 ~ 符号分隔选择器，选择某个元素之后的所有兄弟元素（共享相同父元素）

              而不仅仅是紧接在后面的元素。

e. 群组选择器（ ， 分隔） ：允许您同时选择多个元素，并将相同的样式应用于它们。

   描述 ：允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗

              号 , 分隔不同的选择器。

1.2.3 伪类选择器

a. 动态伪类选择器 ：用于选择处于特定状态的元素。

b.结构伪类选择器 : 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树

中特定结构的元素。

c.表单伪类选择器 : 用于表单元素，根据表单元素的状态来选择元素。

d.目标伪类选择器

e.否定伪类选择器 :

1.2.4    伪元素选择器

1.3 简单样式

1.3.1 文本样式

1.3.2 背景样式

1.3.3 边框样式

---

/* 文本样式 */
h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

p {
    color: gray;
    font-size: 16px;
    line-height: 1.5;
}

/* 背景样式 */
body {
    background-color: #f4f4f4;
}

/* 边框样式 */
div {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}

/* 链接样式 */
a {
    color: green;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}