Java学习日记 2022.7.18

目录

表单常用的标签

使用超链接和锚链接

单标签和双标签的区别

标记语言的定义（填空，判断）

css选择器，三个基础选择器加上行类属性，优先级，

如何链接外部样式@import link这两个的区别

1、从属关系区别

2、加载顺序区别

3、兼容性区别

4、DOM可控性区别

---

表单常用的标签

header 元素

header元素：定义文档或节的页眉。

footer 元素

footer元素：定义文档或节的页脚。

nav 元素

nav元素：定义导航链接的容器。

section 元素

section 元素：定义文档中的节。

article 元素

article 元素：定义独立的自包含文章。

summary 元素

summary 元素：定义 details 元素的标题。

aside 元素

aside 元素：定义内容之外的内容（比如侧栏）。

span 元素

<span> 标签被用来组合文档中的行内元素。

<span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

div 元素

<div>元素是组成容器的最小单位，也是最常用的单位
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

使用超链接和锚链接

href指向链接的网页  
target属性用于设置目标  -blank是使用新的标签页打开，-self是覆盖当前页面
可以是自己的本地的网页
可以是其他网站

锚链接是超链接的一种特殊用法

<!--跳转，不适应对方锚点-->
<a href="06-定义锚点的网页.html">跳转到下一个网页</a>
<!--跳转，并使用对方的锚点在跳转后定位-->
<a href="06-定义锚点的网页.html#mao">跳转到下一个网页的锚点</a>

单标签和双标签的区别

定义

单标签：由一个标签组成。例如<hr/> <input>等。
双标签：由“开始标签”和“结束标签”两部分构成。例如<p></p> <button></button>等。
<p>是开始标签，表示一个段落的开始。
</p>是结束标签，表示一个段落的结束。

区别

区别不大
单标签：是由一个标签组成，例如用<hr/>结尾，是一种简写
双标签：用</p>结尾，双标签可以替换所有的单标签，内容简单的如只有一个属性的可以用单标签，提高可阅读性；内容比较多，使用双标签，可以在标签中嵌套其他内容，而单标签就不能。

标记语言的定义

1. 只有一个_____（只可以嵌套，不可以并列，没有父节点，只有子节点)
2. 节点可以_____，也可以______，并列节点之间是_____（拥有同一个父节点），嵌套节点之间是______
3. 一个父节点可以嵌套_______，一个节点可能存在_______
4. 一个节点只有_____直接父节点，但可以存在_____的父节点
5. 节点（node）也称为标签（tag）或者元素（element），是标记语言的最小组成单位，每一个节点用于标记网页中的一个信息
6. 标签的语法

• 单标签：<标签名/>
• 双标签：<标签名></标签名>
• 标签中的“/”代表节点的闭合，表示这个节点到此结束
• 双标签有开始标签和结束标签，在结束标签中用“/”闭合，可以嵌套子标签
• 单标签不可以嵌套子标签，自闭合

css选择器

CSS基础选择器：1.标签选择器 2.类选择器 3.ID选择器 4.在HTML标签的行内用style属性直接写CSS代码

CSS基础选择器的优先级关系:行内>id>类>标签

如何链接外部样式@import link这两个的区别

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

总体来说：link优于@import，强烈建议使用link标签，慎用@import方式。

@import "css/my.css";

<link rel="stylesheet" href="css/my.css"/>