HTML-Study-Note

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 4.4k 阅读时长 ≈ 8 分钟

为了解决网站上的bug，同时更好地自定义自己的网站，决定学习一些前端语言。

参考资料：http://c.biancheng.net/view/9381.html

网站是什么

  • 网站由一个个网页构成，网页本质上是服务器上的文件，就像本地电脑中的文件一样。
  • 网页有许多种后缀，html只是其中一种，但不管后缀是什么，他们本质都是html代码构成的文本文件。
  • 多个网页之间可能是从属关系（树状图），其顶级目录称为program，有一个专属的IP地址，我们通过访问该IP地址来访问program中的所有文件，也就是网站中的所有网页。
  • IP地址是难以记忆的，我们用域名来助记，域名可以帮助用户记住网站链接以及品牌。因此域名是指向IP地址的，然后通过IP地址请求服务器上的文件，这就是域名解析，通过DNS服务器完成的。
  • 服务器由：主板、CPU、内存和风扇组成。实际上与我们的电脑机箱差不多，它需要存储信息（内存），处理信息（CPU）。唯一用途便是运行网站。

HTML是什么

HTML不是编程语言，没有计算能力，只能静态展示网页信息。

超文本

HTML是超文本，即超越纯文本，意思是不仅包含文字，还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。

标记语言

HTML通过标签来标记本文中的不同内容、格式、布局等。

  • \ 标签表示一张图片
  • \ 标签表示一个链接
  • \ 标签表示一个表格
  • \ 标签表示一个输入框
  • \ 标签表示一段文本（paragraph？）
  • \ 标签表示文本加粗
  • \ 标签表示块级布局

总之，==HTML可以理解为网页内容的排版布局语言==（有点像LaTeX？）

HTML有两个重要版本，一个是HTML4，一个是HTML5，HTML4适应了 PC 互联网时代，HTML 5 适应了移动互联网时代。现在除了IE浏览器，几乎所有浏览器都支持HTML5，所以可以放心使用

HTML文档结构

HTML页面由尖括号的标签组成。跟LaTeX的环境类似，标签是成对出现的，一个代表开始，一个代表结束（闭合标签），例如\和\</b>。然后我们在标签的中间填写内容，下面是一个具体的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML演示</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    <a href="http://c.biancheng.net/" target="_blank">这是一个链接，指向C语言中文网首页</a>
    <ul>
        <li>HTML教程</li>
        <li>CSS教程</li>
        <li>JavaScript教程</li>
    </ul>

    <input type="text" placeholder="请输入内容" />
</body>
</html>
  • 最前面的!DOCTYPE html 是文档类型声明，用来说明这个是HTML文档，看的出来他没有闭合，所以他不是标签，doctype声明不区分大小写。
  • \\</html>就像begin{document}一样，所有内容都写在里面
  • \用来定义HTML文档的信息，比如标题和编码格式
  • \
  • \用于指明网页标题，显示在浏览器标签栏上
  • \是网页的主体，网页显示的内容都在body中。所以可以看到，title并不在body中，因此不会显示在网页上，而是在标签栏上
  • \是标题、\是列表、\是列表项、\

HTML标签的语法格式

  • HTML标签语法==不区分大小写==，但是为了规范和专业，在定义标签时一律采用小写
  • 自闭合标签没有结束标签，而是在开始标签中添加/来闭合，比如
    1
    2
    3
    4
    <img src="./logo.png" alt="C语言中文网Logo" /> <!-- 图像 -->
    <hr /> <!-- 分割线 -->
    <br /> <!-- 文本换行 -->
    <input type="text" placeholder="请输入内容" /> <!-- 文本输入框 -->

HTML属性的概念和使用

  • 属性可以为HTML标签提供一些额外信息，添加在开始标签中，格式是attr=”value”，用单引号双引号都可以，但是为了规范，请使用双引号
  • 属性分为专用属性与通用属性（还有自定义属性，需要借助CSS和JavaScript来处理自定义属性）。通用属性就是大部分标签都能使用的属性，专用属性只有特定标签才能够使用

通用属性

  1. id属性：就是标签的名称，具有唯一性，使用CSS和JavaScript操作的时候，通过id来寻找
  2. class属性：class不具有唯一性，多个标签可以是同一个class，同一个标签也可以有多个class，CSS和JavaScript也可以通过class来操作标签
  3. title属性：用于描述标签内容，当鼠标移动到标签上时，网页会显示title的属性值（比如说title=”这是一段描述”，鼠标移动上去后就会显示“这是一段描述”）
  4. style属性：在标签内部定义CSS样式

HTML段落中的空白符

  • 如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个；
  • 如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格。

HTML文本格式化

标签 描述
<\b>…\</b> 加粗标签中的字体
<\em>…\</em> 强调标签中的内容，并使标签中的字体倾斜
\…\ 定义标签中的字体为斜体
\…\ 定义标签中的字体为小号字体
\…\ 强调标签中的内容，并将字体加粗
\…\ 定义下标文本
\…\ 定义上标文本
\…\ 定义文档的其余部分之外的插入文本
\…\ 在文本内容上添加删除线
\…\ 定义一段代码
\…\ 用来表示文本是通过键盘输入的
\…\ 定义变量
\
...\
 定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体
\…\ 用来表示标签中的内容为缩写形式
\
...\
 用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行
\…\ 定义标签中的文字方向
\
...\
 定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进
\…\ 定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来
\…\ 表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示
\…\ 用来定义一个术语，标签中的文本会以斜体呈现

HTML超链接标签\

  • href 本质上就是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。
  • href 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点;相对路径往往以当前文件或者当前域名为起点，
  • target属性：用于指明新页面打开方式；_self是覆盖原有窗口（这个是默认值），_blank是新窗口打开

HTML图片标签\

  • \是自闭和标签，有两个属性，一个是必选的scr，一个是可选的alt
  • scr属性用于指明图片地址或者路径，支持jpg/png/gif等格式
  • alt用于定义图片的文字描述信息，类似于LaTeX中的caption。当图片无法正常加载时，就会显示alt的信息

HTML嵌入CSS样式（四种方法）

HTML表达能力有限，经常需要结合CSS一起使用。有四种使用方法。

  • 行内样式：在标签的style属性中定义CSS样式；多个CSS属性用分号间隔
    例子：
    行内元素，div 块级元素
  • 内嵌样式：在HTML文档的头部（即head标签）使用style标签定义样式
    例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>内嵌式</title>
    <style type="text/css">
    p{
        text-align: left;  /*文本左对齐*/
        font-size: 18px;  /*字体大小 18 像素*/
        line-height: 25px;  /*行高 25 像素*/
        text-indent: 2em;  /*首行缩进2个文字大小空间*/
        width: 500px;  /*段落宽度 500 像素*/
        margin: 0 auto;  /*浏览器下居中*/
        margin-bottom: 20px;  /*段落下边距 20 像素*/
    }
    </style>
    </head>
    <body>
        <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。</p>
        <p>在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
        <p>此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。</p>
    </body>
    </html>
  • 链接式：使用link标签引入外部的CSS文件
  • 导入式：使用@import的命令导入外部CSS文件

HTML先了解到这里~

CSS