HTML CSS学习2

最新推荐文章于 2023-11-27 20:31:44 发布

LIU_Jessica

最新推荐文章于 2023-11-27 20:31:44 发布

阅读量330

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_45685619/article/details/104117139

版权

HTML CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

资料来源

https://baike.baidu.com/item/%E6%96%87%E6%A1%A3%E4%BD%93/7975589?fr=aladdin
https://baike.baidu.com/item/UTF-8/481798?fr=aladdin
https://www.bilibili.com/video/av57100756?from=search&seid=308650809797541443

注释

注释的书写方法：
在书写时不需要刻意的去书写这个格式，将要注释的内容选中按 Ctrl+/
此注释可用于多行注释。
如果需要在一行没有字的地方加注释，也可以通过此快捷键直接加入注释格式。

元素

元素的定义

$元素 = 起始标记（ b e g i n t a g ） + 结束标记（ e n d t a g ） + 元素内容 + 元素属性$
$元素属性 = 属性名 + 属性值$
注意，元素都是小写的。
<a href="http://baidu.com">百度</a>
如上例，为起始标签，为结束标签，元素属性为 href=“http://baidu.com”，元素内容通常为显示的值。上述代码为在网页的显示结果为：
在这里插入图片描述
属性的分类
全局属性和局部属性

局部属性：某些元素特有的属性。正如<a href="http://baidu.com">百度</a>，其中href表示超链接的地址，就是该元素的特有属性。
全局属性：所有元素通用的属性，在所有的元素内通用的元素。如title属性，就可以在所有的元素中使用。

空元素：没有结束标记的元素
空元素的两种写法

1.<meta chatset="UTF-8">
2.<meta chatset="UTF-8" />

现在写第一种写法就可，但是为了保险，避免在使用某些浏览器显示时出错，所以要养成代码写第二种的方法。

元素的嵌套

元素不能互相嵌套

<div>
<p>
</div>
</p>

即以上的书写方法是错误的

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的元素）。

标准的文档结构

Emmet插件：自动生成HTML 代码片段

方法一： html:5
方法二：<!DOCTYPE html>
方法三：！

回车后生成如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    此处写代码
</body>
</html>

$文档结构：文档头 + 文档体$
每一个文档的书写格式都是一样的

文档声明

<!DOCTYPE html>
文档声明，告诉浏览器，告诉文档使用的HTML标准是HTML5。
为了避免出错，很多浏览器都支持多种标准，HTML4、HTML5等，所以防止显示出错，开始要加上文档声明。不写文档声明，浏览器将进入怪异渲染模式。

根元素

<html lang="en">
定义：
一个页面只能有一个元素，是左右的元素的父元素或者祖先元素。HTML5中不强制要求写此元素，但是在XHTML中需要，为了兼容以前的标准，所以要最好加上。
lang属性是全局属性，表示该元素中的文字是使用哪一种自然语言描述而成的。
中文是 zh-CN ,但是这种写法有点过时了，一般情况下写cmn-hans。

文档头

不会显示在页面上。

<head>
    <meta charset="UTF-8">  <!-- 使用哪个编码表 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

其中<meta>，指文档的元数据，即附加信息，跟显示无关，告诉浏览器的信息。
属性
charset：指定网页内容编码。
UTF-8:
UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无须或只进行少部份修改后，便可继续使用。因此，它逐渐成为电子邮件、网页及其他存储或传送文字的应用中，优先采用的编码。

文档体

在HTML语言中，和之间的内容是整个页面的主体部分，也是该文件的重点所在，即文档体。标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内。HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

语义化

定义：每个HTML元素都有具体的含义（此处指99%以上的元素，为了兼容以前的版本，有一部分元素没有含义）。如a元素为超链接，p元素为段落，h1元素为一级标题，且所有元素于展示效果无关（由CSS决定）,浏览器带有默认的CSS代码。

选择元素根据元素的内容的含义，而不是因为它们的格式。
意义：

搜索引擎优化（SEO）。
&emso;每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。
浏览器理解网页
阅读模式、语音模式等。
使网页更好的满足各种需求。

文本元素

HTML5支持的所有元素http://www.xuanfengge.com/funny/html5/element/
以下着重介绍常用的元素：

h元素

标题元素，标题从一级标题到六级标题。且并不是一级标题比二级三级的大和和元素的样式无关。

知识补充

ctrl+enter 跳转到下一行
ctrlr+shift +ente 当前行前面加一行

h相关快捷操作：

1. h1*n 一次可以生成n个h1元素
2. {}指普通文本 可以生成多个内容相同的<h1></h1>
如 h1{输入内容}*3
显示效果
    <h1>输入内容</h1>
    <h1>输入内容</h1>
    <h1>输入内容</h1>
3. h1{这是$级标题}*3
内容显示：
    <h1>这是1级标题</h1>
    <h1>这是2级标题</h1>
    <h1>这是3级标题</h1>

p元素

定义：段落。两个段落间隔一行。

p*3
显示效果
<p></p>
<p></p>
<p></p>

lorem 元素
可以自动输入一段乱码
如Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias tempora consectetur nostrum explicabo, >sequi dignissimos tempore praesentium officiis quibusdam! Blanditiis placeat veritatis quisquam rerum >repudiandae tempore! Repudiandae quia minus illo.
在lorem后面加数字代表着自动显示几个单词。如lorem1 即只生成一个单词。

span元素

定义：容器，没有语义的元素，仅用于设置样式。使用时不会换行。

补充知识
在前面h和p元素,某些元素在显示时会独占一行（块级元素），而有些元素不会（行级元素）,但是在HTML5中已经停用块级元素和行级元素的说法。将块级元素中假如display:inline属性，就可以让块级元素独占一行，而在行级元素中加入display:block属性，即可让行级元素独占一行。

代码示例：

 <span style="color:red">红</span><span style="color:green">绿</span>

显示效果：
在这里插入图片描述

pre元素

定义：预格式化文本元素。
空白折叠：在源代码中的连续空白字符（空格，换行，折叠），在页面显示时会被折叠为一个空格。
空白折叠意义：将源代码的书写和页面的显示区分开。

而在pre中不会出现空白折叠，在其内部会根据源代码格式显示用于在网页上显示源代码，其实用其他元素也可实现，在属性中加style="white-space:pre"即可。由于它有一个css属性。
在用pre显示代码的情况下，还需要假如code元素，以便于更好的语义化。也可以直接在code中加入属性<code style="white-space:pre"></code>

快捷键补充
缩进 tab键
缩减 shift+tab键

a元素

作用： 1.不同页面的跳转 2.同一页面的锚点 3.功能性链接
三种作用的使用示例

1.不同页面跳转

<a href="https://baidu.com">百度</a>

2.同一页面的锚点

实验方法：开头处加上，a*6[href="#章节$"]>{章节$} ，产生六个章节链接相当于目录。再使用((h1[id="章节$"]>{章节$})+p>lorem1000)*6 在后面加上六个字数为1000的段落，并且给每个段落的表头起名为章节1，章节2…

起名即给h1加上id属性
id属性：全局属性，表示元素在文档中的唯一编号

技巧补充:
隔行同列选择, 滚轮按住选择。

锚链接和超链接本质上一样，地址都发生变化，但是锚链接不会刷新页面。
如果回到顶部的话直接加# 就默认回到顶部，这个是浏览器的规则
如果锚链接在同一个页面中不会刷新，如果在不同的页面也会刷新

3.功能性链接

定义：顾名思义，就是点击后，触发某个功能。
功能举例：

执行JS代码

 <a href="Javascript:alert('你好')"> 你好</a>

功能：弹出你好

发送邮件

 <a href="mailto:3478781695@qq.com"> 你好</a>
  href="mailto:邮箱地址"

前提：
要求用户计算机上安装邮件发送软件，如exchange

拨号

<a href="tel:电话号码"> 你好</a>

前提：用户计算机上有拨号软件，或者使用的是移动端访问

a元素其他属性介绍

target属性
表示跳转窗口位置
有两种取值
_self:在当前的窗口中打开
_blank:在新窗口中打开
title属性
也可以使用_tiltle属性，即当鼠标放上就可以显示的文字

HTML实体

在书写代码的时候，有一些符号有特殊的含义，实体字符通常用于在页面中显示一些特殊的符号。
有两种方法

&单词；
&#数字；
以下为常用的举例：

&lt; 小于符号
&gt; 大于符号
&nbsp; 空格
&copy; 版权符号

剩余符号查询的网站:
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references