HTML学习笔记

什么是HTML？

  • HTML不是一种编程语言，它是一种超文本标记语言(Hyper Text Markup Language)，标记语言是一套标记标签(Markup tag)，浏览器通过HTML标记标签描述网页。

  • HTML 文档包含了HTML 标签及文本内容，也叫做 web 页面

HTML 网页结构

  • HTML文档的文件名一般为“文件名.htm”或者“文件名.html”，HTML文档由文档声明和html元素组成，html元素内，只能包含head元素和body元素，如：

    <!DOCTYPE html>
    <html>
    <head>
     <title>基本HTML结构</title>
     <meta charset="utf-8">
    </head>
    <body>
     <h1>我是一级标题</h1>
     <p>我是一段文本段落</p>
    </body>
    </html>

  • <!DOCTYPE html> 声明为 HTML5 文档，避免浏览器的错误解析

  • <html> 元素是 HTML 页面的根元素，html元素内，只能包含head元素和body元素

  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

  • <title> 元素描述了文档的标题，显示在浏览器的标签页

  • <body> 元素包含了可见的页面内容

  • <h1> 元素定义一个大标题

  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML 基础

  • HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。数字越大字号越小

    注: 浏览器会自动地在标题的前后添加空行。

  • HTML 水平线是通过标签<hr>来创建水平线。

  • HTML 段落是通过标签 <p> 来定义的

  • HTML 链接是通过标签 <a> 来定义的，如

    <a href="https://www.google.com">这是一个链接</a>

    注：在 href 属性中指定链接的地址。

  • HTML 图像是通过标签 <img> 来定义的，如

    <img loading="lazy" src="/images/logo.png" width="258" height="39" />

    注：图像的名称和尺寸是以属性的形式提供的。

  • HTML 文本格式化通过标签如 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

  • HTML 注释写法：

    <!-- 这是一个注释 -->

HTML 参考手册- (HTML5 标准)

什么是HTML 标签？什么是HTML 元素?

HTML 标记标签通常被称为 HTML 标签 (HTML tag)，HTML 标签 和 HTML 元素 通常都是描述同样的意思.

  • HTML标签是由尖括号包围的关键词，如：

    <html>

  • HTML标签通常是成对出现的，分别叫做开始标签和结束标签也被称为开放标签和闭合标签，结束标签和开始标签的内容一样，只是在关键词前添加/正斜杠表示结束，如：

    <b> 和</b>

  • 某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束），如：

    <br />

  • 大多数 HTML 元素可拥有属性

  • 大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）,HTML 文档由相互嵌套的 HTML 元素构成

注：推荐使用小写标签，在未来 (X)HTML 版本中强制使用小写

HTML 属性

属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以名称/值对的形式出现，比如：name="value"

  • 属性值应该始终被包括在引号内

    实例：

    <a href="http://www.google.com">这是一个链接</a>

HTML 头部

  • <head> 元素包含了所有的头部标签元素:

    <title>, <style>, <meta>, <link>, <script>, <noscript> ,<base>

HTML <title> 元素

  • <title> 标签定义了不同文档的标题q

  • <title> 在 HTML/XHTML 文档中是必须的

<title> 元素的作用：

  • 定义了浏览器工具栏的标题

  • 当网页添加到收藏夹时，显示在收藏夹中的标题

  • 显示在搜索引擎结果页面的标题

HTML <base> 元素

  • <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

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

HTML <link>元素

  • <link>标签定义了文档与外部资源之间的关系。

  • <link>标签通常用于链接到样式表:

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

HTML <style> 元素

  • <style> 标签定义了HTML文档的样式文件引用地址

  • 在<style>元素中你也可以直接添加样式来渲染 HTML 文档:

    <head>
    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
    </head>

HTML <meta>元素

  • <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

  • META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

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

  • <meta> 一般放置于 <head> 区域

实例：

  • 编码格式：

    <meta charset="utf-8">

  • 定义关键字：

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

  • 每30秒钟刷新当前页面：

    <meta http-equiv="refresh" content="30">

HTML <script> 元素

  • <script>标签用于加载脚本文件，如： JavaScript

HTML 样式- CSS

CSS (Cascading Style Sheets，层叠样式表) 用于渲染HTML元素标签的样式。添加方式：

  • 内联样式- 在HTML元素中使用"style" 属性

  • 内部样式表 -在HTML文档头部 <head>区域使用<style>元素 来包含CSS

  • 外部引用 - 使用外部 CSS 文件

内联样式

  • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

    <p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色

  • 背景色属性（background-color）定义一个元素的背景颜色：

    <body style="">
    <h2 style="">这是一个标题</h2>
    <p style="">这是一个段落。</p>
    </body>

HTML 样式实例 - 字体, 字体颜色 ，字体大小

  • font-family（字体），color（颜色），和font-size（字体大小）属性：

    <h1 style="font-family:verdana;">一个标题</h1>
    <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

HTML 样式实例 - 文本对齐方式

  • 使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

    <h1 style="text-align:center;">居中对齐的标题</h1>

内部样式表

  • 当单个文件需要特别样式时，就可以使用内部样式表。可以在<head> 部分通过 <style>标签定义内部样式表:

    <head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
    </style>
    </head>

外部样式表

  • 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。 

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

HTML 图像

  • 加载图片是需要时间的，慎用图片

  • 正确设置图像的位置，浏览器才能加载图片，否则图像标签就会显示一个破碎的图片。

图像标签 <img>和源属性（src）

在 HTML 中，图像由<img> 标签定义

  • <img>是空标签，没有闭合标签

  • 要在页面上显示图像，需要使用源属性（src），src 指 "source"。源属性的值是图像的 URL 地址。

    <img src="url" alt="some_text">

Alt属性

  • alt 属性用来为图像定义一串预备的可替换的文本

  • 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

如：

<img src="url" alt="some_text">

 

设置图像的高度与宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度，属性值默认单位为像素。如：

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML 表格

HTML表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

效果：

​
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
​

边框属性

​
属性说明
border-color 设置边框的颜色
border-style 设置边框的样式，可选值有 solid、dashed、double 等
border-width 设置边框的宽度
​

点此深入了解边框属性

HTML 表格表头

  • 表格的表头使用<th> 标签进行定义

  • 大多数浏览器会把表头显示为粗体居中的文本

    如：

​
Header 1Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
​

HTML 列表

HTML无序列表

  • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

  • 无序列表使用 <ul> 标签

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

HTML 有序列表

  • 同样，有序列表也是一列项目，列表项目使用数字进行标记

  • 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

HTML 自定义列表

  • 自定义列表不仅仅是一列项目，而是项目及其注释的组合

  • 自定义列表以 <dl>标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

    效果：

    ​
    Coffee
    - black hot drink
    Milk
    - white cold drink
    ​

注：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 区块

HTML <div> 和<span>

  • HTML 可以通过 <div> 和 <span>将元素组合起来

HTML 区块元素

  • 大多数 HTML 元素被定义为块级元素或内联元素

  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）

实例: <h1>, <p>, <ul>,<table>

HTML 内联元素

  • 内联元素在显示时通常不会以新行开始。

实例:<b>, <td>, <a>,<img>

HTML<div> 元素

  • HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器

  • <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

  • 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

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

HTML<span>元素

  • mHTML <span> 元素是内联元素，可用作文本的容器

  • <span> 元素也没有特定的含义

  • 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

HTML 布局

网页布局对改善网站的外观非常重要。。。

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML<script> 标签

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

  • <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

  • JavaScript 最常用于图片操作、表单验证以及内容动态更新

下面的脚本会向浏览器输出"Hello World!"：

<script>
document.write("Hello World!");
</script>

HTML<noscript> 标签

  • 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

  • <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
​

HTML 字符实体

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

  • 一些在键盘上找不到的字符也可以使用字符实体来替换

HTML 实体

  • 在 HTML 中，某些字符是预留的

  • 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

  • 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

&entity_name;
或
&#entity_number;

如需显示小于号，我们必须这样写：

&lt; 或 &#60; 或 &#060;

效果：< 或 < 或 <

不间断空格(Non-breaking Space)

  • HTML 中的常用字符实体是不间断空格(&nbsp;)

  • 浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp;字符实体。

posted @ 2020-11-24 17:30  沉石HCR  阅读(117)  评论(0)    收藏  举报