2. 科技
    3. 前端技术笔记CSS HTML部分

    前端技术笔记CSS HTML部分

    科技2022-08-07  138

    本篇博客是参考了以下教程做的笔记：开始学习 HTML:https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started

    文章目录

    文件处理文件命名规范文件路径 HTML — 构建 WebHTML概念HTML文档结构HTML 头部元素HTML 基础文字HTML 高阶文字排版HTML 布局元素HTML 图片HTML 音频和视频HTML 表单元素 CSS — 设计Web选择器元素显示模式文字居中图片选择器优先级

    文件处理

    文件命名规范

    文件夹名和文件都使用小写字母，且没有空格。因为很多计算机，特别是 Web 服务器，是对大小写敏感的。浏览器、Web 服务器，还有编程语言处理空格的方式不一致。 最好使用中划线，而不是下划线来分离单词：对比 my-file.html 和 my_file.html 。简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符， 但不会识别下划线。

    文件路径

    若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png 。 ../文件上级目录 ./文件根目录 Windows 文件系统使用反斜杠而不是正斜杠，比如 C:\Windows 。但与 HTML 没什么关系，即使在 Windows 上做 Web 开发，代码中仍应使用正斜杠/。

    HTML — 构建 Web

    HTML概念

    HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。

    HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 写作<title>、<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不过，从一致性、可读性等各方面来说，最好仅使用小写字母。

    HTML元素： 块级元素和内联元素： 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>

    空元素： 不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。

    <img src="images/firefox-icon.png">

    属性：属性值应该加上""

    HTML文档结构

    引用特殊字符： 重点掌握  空格 <小于号 >大于号

    HTML 头部元素

    HTML <head> 元素与 <body> 元素不同，它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据，大型页面的 head 会包含很多元数据。

    <title> 元素用于表示整个 HTML 文档的标题（而不是文档内容）。

    HTML有一个“官方的”方式来为一个文档添加元数据—— <meta> 元素，许多<meta> 元素包含了name 和 content 特性：name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。 许多 <meta> 特性已经不再使用。 例如，keyword <meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">）— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 已经被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果。

    在元数据中添加对自定义图标的引用，添加到HTML <head>中以引用它：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    要使用 CSS 让网页更加炫酷，就在HTML头部元素中使用 <link>元素。 link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径，例如：<link rel="stylesheet" href="my-css-file.css">

    要使用JavaScript让网页有交互功能，就使用<script> 元素。<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。例如：<script src="my-js-file.js"></script> 注意： <script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入

    为站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现：

    HTML 基础文字

    <sub> <sup>

    HTML 高阶文字排版

    描述列表

    描述列表使用与其他列表类型(<ol> <ul>)不同的闭合标签— <dl>; 此外，每一项都用 <dt> (description term) 元素闭合。 每个描述都用 <dd> (description description) 元素闭合

    引用

    如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用， 你应该把它用<blockquote>元素包裹起来表示， 并且在cite属性里用URL来指向引用的资源。 行内元素用同样的方式工作，是使用<q>元素。

    eg.

    <p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：</p> <blockquote cite="https://zh.wikipedia.org/zh-hans/孔子"> <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p> </blockquote> <p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。 （源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>

    缩略语

    <abbr>常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中） <pre> d:</pre> d:

    HTML 布局元素

    <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。 <article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。 <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。 <aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。 <header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。 <nav> 包含页面主导航功能。其中不应包含二级链接等内容。 <footer> 包含了页面的页脚部分。

    无语义元素<div> <span> <br> 可在段落中进行换行 <hr> 元素在文档中生成一条水平分割线

    HTML 图片

    <img src="images/dinosaur.jpg" alt="一张关于恐龙的照片" width="400" height="341" >

    使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联

    <figure> <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" width="400" height="341"> <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption> </figure>

    如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片:为页面中的所有段落设置一个背景图片

    p { background-image: url("images/dinosaur.jpg"); }

    HTML 音频和视频

    HTML5 标准提出，其中有许多的新特性，包括 <video> 和 <audio> 标签 <video src="rabbit320.webm" controls> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video>

    浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。

    <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video> 浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。

    <audio> 标签与 <video> 标签的使用方式几乎完全相同 <audio> 标签不支持 width/height 属性 — 由于其并没有视觉部件，也就没有可以设置 width/height 的内容。 同时也不支持 poster 属性 — 同样，没有视觉部件

    HTML 表单元素

    CSS — 设计Web

    text-indent: 2em;首行缩进2个字

    选择器

    .classname{} 类选择器 #idname{} ID选择器 *{} 通配符选择器 p{} 标签选择器

    复合选择器

    后代选择器：空格分隔，选的是最后一个元素，儿子孙子符合的都选 子元素选择器：大于号分隔，只选儿子，孙子不选 并集选择器：逗号分隔，全部选中 链接伪类选择器：LVHA顺序

    a:link{}没点过 a:visited{} 点过 a:hover{} 鼠标滑过 a:active{} 选中时

    focus伪类选择器：input:focus 表单元素焦点

    元素显示模式

    块元素：指定高宽，独占一行，文字块中不能放块元素

    行内元素：不能指定高宽，高宽默认为内容大小，一行可以放多个行内元素，行内元素不能放块元素

    行内块元素：一行可以放多个行内元素，可以指定高宽

    相互转换

    display:inline; display:block; display:inline-block;

    文字居中

    水平居中：text-align: center; 垂直居中：让文字的行高等于盒子的高度 height: 40px; line-height: 40px;行高偏大文字靠下，行高偏小文字偏上

    图片

    当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

    background-attachment： scroll 背景图像是随对象内容滚动 fixed 背景图像固定

    选择器优先级

    继承或* 0000 标签选择器 0001 类选择器、伪类选择器 0010 ID选择器 0100 !important 1000

    权重虽然有叠加，但是永远不会有进位

    Processed: 0.016, SQL: 9