前端与html｜ 青训营笔记

用户9439801814573
124 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

HTML中< meta >标签

< meta >元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。

< meta > 标签位于文档的头部，不包含任何内容。< meta >标签的属性定义了与文档相关联的名称/值对。

123
charsetcharacter_set规定html的字符编码
contenttext定义域http-equiv或name属性相关的元信息
http-equivcontent-security-policy content-type default-style refresh把 content 属性关联到 HTTP 头部。
nameapplication-name author description generator keywords viewport把 content 属性关联到一个名称。
schemesome_text定义用于翻译 content 属性值的格式。

HTML

title元素

​​

title 元素在所有 HTML/XHTML 文档中都是必需的。

 <title>标题不会显示在文档区</title>

image.png

base元素

​

标签为页面上的所有链接规定默认地址或默认目标（target）：

​

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

link元素

标签定义文档与外部资源之间的关系。 标签最常用于**连接样式表：** 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style 元素

标签用于为 HTML 文档定义样式信息。 ``` <head> <style type="text/css"> body {background-color:yellow} p {color:blue} ```

可以先在上面写出网页结构，然后在下面的style里面定义这个div的样式

又是meta元素

元数据（metadata）是关于数据的信息。

< meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面:

  • 描述
  • 关键词
  • 文档的作者
  • 最后修改时间
  • 其他元数据

< meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词） ，或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

  1. meta元素定义页面描述
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
  1. meta元素定义页面关键词
<meta name="keywords" content="HTML, CSS, XML" />

script元素

< script> 标签用于定义客户端脚本，比如 JavaScript。

重点关注下style和link元素

响应式web设计

能够以可变尺寸传递网页

对于平板和移动设备是必须的

  1. 自己创建

用style自己定义格式，然后在下面的每一个div标签里用上这个style，也就是这个class

  1. 使用Bootstrap

使用已有的框架，link里面会把该文件的所有链接指向一个默认链接，然后就可以使用这个网页里面的style了（也是class）

计算机代码元素

kbd

该元素定义键盘输入

samp

该元素定义计算机输出示例

code

该元素定义编程代码，不保留多余的空格和折行

想要解决的话就加上 



<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

var

该元素定义数学变量

语义元素

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：

和 - 无法提供关于其内容的信息。

语义元素的例子：

、 以及 - 清晰地定义其内容。

html5

HTML5 提供了定义页面不同部分的新语义元素：

  • < article>
  • < aside>
  • < details>
  • < figcaption>
  • < figure>
  • < footer>
  • < header>
  • < main>
  • < mark>
  • < nav>
  • < section>
  • < summary>
  • < time>

HTML5 语义元素

article元素

< article> 元素规定独立的自包含内容。

文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

< article> 元素的应用场景：

  • 论坛
  • 博客
  • 新闻

section元素

< section> 元素定义文档中的节。

根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。

可以将网站首页划分为简介、内容、联系信息等节。

header footer等等

nva元素

nav元素定义导航链接集合

< nav > 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于

元素中！

例子：

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

image.png

感觉看起来很像是网站最上面的导航条，但是那其实不就是一个链接？

那像知乎那种固定的导航条和可以随滑动变化的导航条要怎么实现呢？

aside元素

​

元素页面主内容之外的某些内容（比如侧栏）。

​

aside 内容应该与周围内容相关。

figure 和 figcaption元素

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的作用是为图片添加可见的解释。

通过 HTML5，图片和标题能够被组合在

元素中：实例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

image.png 其余html5中的语义元素

html5样式指南和代码约定

请看链接 HTML(5) 样式指南和代码约定 (w3school.com.cn)

HTML字符实体

HTML中的预留字符必须被替换为字符实体

HTML 字符实体 (w3school.com.cn)

HTML 符号 (w3school.com.cn)

表情符号

UTF-8为html默认字符集

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
​
<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>
​
</body>
</html>

Emoji 字符

表情符号也是来自 UTF-8 字母的字符：

  • 😄 是 128516
  • 😍 是 128525
  • 💗 是 128151

image.png ​

😀 😄 😍 💗

​

html框架

水平框架

<html>
    <frameset rows="40%,30%,30%">  要垂直的只需把rows改成clos
        <frame src="div.html" >
        <frame src="class.html">
        <frame src="html5.html">
    </frameset>
</html>

noresize禁止调整大小

html背景

背景颜色（bgcolor）

背景（图片或者gif）

提示： 如果你打算使用背景图片，你需要紧记一下几点：

  • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
  • 背景图像是否与页面中的其他图象搭配良好。
  • 背景图像是否与页面中的文字颜色搭配良好。
  • 图像在页面中平铺后，看上去还可以吗？
  • 对文字的注意力被背景图像喧宾夺主了吗？

URL编码

URL 编码会将字符转换为可通过因特网传输的格式。

  • URL - 统一资源定位器

Web 浏览器通过 URL 从 web 服务器请求页面。

URL 是网页的地址，比如 www.w3school.com.cn。

  • URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

HTML WEB SERVER

如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。

html 版本

版本年份
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

常用的声明

  • HTML5
<!DOCTYPE html>
  • HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html速查手册

HTML 快速参考 (w3school.com.cn)

里面蛮多东西挺好的

avatar
文章
阅读
粉丝