html学习笔记

最新推荐文章于 2020-04-24 21:33:07 发布
最新推荐文章于 2020-04-24 21:33:07 发布
阅读量542 收藏
点赞数
分类专栏： html 文章标签： html 学习笔记

HTML学习笔记

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

标题标签

标题有-多种标签
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h1 align="center">heading</h1> 此标题居中对齐,但不赞成使用，请使用样式。

  • 浏览器会自动地在标题的前后添加空行。
  • 默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
  • 标题很重要，因为搜索引擎使用标题为您的网页的结构和内容编制索引。

水平线标签

<hr /> 标签在 HTML 页面中创建水平线。

  • 使用水平线 (<hr>标签) 来分隔文章中的小节是一个办法。

段落标签

<p>This is a paragraph.</p>

  • 不要使用空的段落标记<p></p>去插入一个空行，请使用<br /> 标签换行。

换行标签

<br /> 标签换行
若要在不产生一个新段落的情况下进行换行（新行）：
<p> This is <br /> a paragraph with line breaks</p>

  • <br>和<br />都可以换行，但使用<br />更好。

链接标签

<a href="http://www.w3school.com.cn">This is a link</a>

图像标签

<img src="w3school.jpg" width="104" height="142" />

连续的空格显示为一个空格

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

属性值必须加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号代替双引号。

文本格式

<b></b>加粗
<strong></strong>貌似也是加粗
<big></big>变大
<small></small>变小
<i></i>斜体
<em></em>强调（与斜体效果貌似一样）
<sub></sub>上标（subscript）
<sup></sup>下标（superscript）
<pre></pre>预格式文本，保留空格和换行
<blockquote></blockquote>长引用
<q></q>短引用
<del></del>删除线
<ins></ins>下划线

没有下划线的链接

<a href="/html/example.html" style="text-decoration:none">
其中，style="text-decoration:none"表示没有下划线。

如何使用样式

外部样式

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

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

内部样式

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

   
   
  1. <head>
  2. <style type="text/css">
  3. body {background-color: red}
  4. p {margin-left: 20px}
  5. </style>
  6. </head>

内联样式

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

   
   
  1. <p style="color: red; margin-left: 20px">
  2. This is a paragraph
  3. </p>

超链接

<a></a>定义超链接，a是指anchor（锚）。
<a href="http://www.w3school.com.cn/" title="W3Shool">Visit W3School</a>点击这个超链接会把用户带到 W3School 的首页。
title属性为鼠标悬停时显示的文本

有两种使用<a>标签的方式：
1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签

超链接中的target属性

target属性：可以定义被链接的文档在何处显示。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>在新窗口打开链接。

超链接中的name属性

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，即在页面内跳转。

使用方法：
1. 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：<a name="word">文字</a>
2. 然后，我们在同一个页面中创建指向该锚的链接：<a href="word">文字</a>
3. 我们也可以在其他页面中创建指向该锚的链接：<a href="http://www.example.com/html.asp#word">w文字</a>

举例：

   
   
  1. <p>
  2. <a href="#C3">查看 Chapter 3。</a>
  3. </p>
  4. <h2>Chapter 1</h2>
  5. <p>content 1:bla bla bla</p>
  6. <h2>Chapter 2</h2>
  7. <p>content 2:bla bla bla</p>
  8. <h2><a name="C3">Chapter 3<a></h2>
  9. <p>content 3:bla bla bla</p>

实例演示：http://www.w3school.com.cn/tiy/t.asp?f=html_link_locations

将图像作为链接

将<img>标签包含在<a>标签中

   
   
  1. <a href="/html/example.html">
  2. <img src="/example.gif" />
  3. </a>

跳出框架

<a href="/index.html" target="_top">click</a>
使用target="_top"属性跳出框架。

图像替换为文本属性

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
<img src="boat.gif" alt="Big Boat">

背景图片

如果图像小于页面，图像会进行重复。
<body background="/.../background.jpg">

排列图片

在文字中排列图片
<img src="/.../picture.gif" align="bottom">
align属性可为bottom、middle、top
实例：http://www.w3school.com.cn/tiy/t.asp?f=html_image_align

调整图片大小

width属性和heigth属性

创建图像映射

创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
实例：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

表格

http://www.w3school.com.cn/html/html_tables.asp

无序列表

Unordered List

   
   
  1. <ul>
  2.   <li>apple</li>
  3.   <li>banana</li>
  4. </ul>

有序列表

Ordered List

   
   
  1. <ol>
  2.   <li>apple</li>
  3.   <li>banana</li>
  4. </ol>

自定义列表

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

   
   
  1. <dl>
  2. <dt>Coffee</dt>
  3. <dd>Black hot drink</dd>
  4. <dt>Milk</dt>
  5. <dd>White cold drink</dd>
  6. </dl>

显示为:

Coffee
    Black hot drink
Milk
    White cold drink

块元素与内联元素

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

div 与 span 元素

<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器，没有特定的含义。
<span>元素是内联元素，可用作文本的容器。没有特定的含义。

表单——文本域

   
   
  1. <html>
  2. <body>
  3. <form>
  4. 名：
  5. <input type="text" name="firstname">
  6. <br />
  7. 姓：
  8. <input type="text" name="lastname">
  9. </form>
  10. </body>
  11. </html>

http://www.w3school.com.cn/tiy/t.asp?f=html_inputfields

表单——密码域

   
   
  1. <html>
  2. <body>
  3. <form>
  4. 用户：
  5. <input type="text" name="user">
  6. <br />
  7. 密码：
  8. <input type="password" name="password">
  9. </form>
  10. <p>
  11. 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
  12. </p>
  13. </body>
  14. </html>

http://www.w3school.com.cn/tiy/t.asp?f=html_passwordfields

单选按钮

radio：单选钮

   
   
  1. <form>
  2. <input type="radio" name="sex" value="male" /> Male
  3. <br />
  4. <input type="radio" name="sex" value="female" /> Female
  5. </form>

复选框

checkbox：复选框

   
   
  1. <form>
  2. <input type="checkbox" name="bike" />
  3. I have a bike
  4. <br />
  5. <input type="checkbox" name="car" />
  6. I have a car
  7. </form>

其他表单知识

http://www.w3school.com.cn/html/html_forms.asp

框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架标签

   
   
  1. <frameset cols="25%,75%">
  2.    <frame src="frame_a.htm" noresize="noresize">
  3.    <frame src="frame_b.htm">
  4.    <frame src="frame_c.htm">
  5. </frameset>

以上框架设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。
<frameset>：定义框架
<cols>：垂直框架
<rows>：水平框架
noresize属性：框架尺寸是默认可以调整的，此属性定义了框架尺寸不可调整

内嵌框架

<iframe src="URL" width="200" height="200"></iframe>添加内嵌框架iframe

height和width属性用于规定 iframe 的高度和宽度。
frameborder="0"删除框架的边框

使用iframe作为链接的目标

   
   
  1. <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
  3. <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

以上链接点击后将在框架内显示

改变背景

1.改变背景颜色

   
   
  1. <body bgcolor="#000000">
  2. <body bgcolor="rgb(0,0,0)">
  3. <body bgcolor="black">

注意：标签属性为bgcolor而不是backgroundcolor

2.以图像作为背景

   
   
  1. <body background="picture.gif">

如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

!DOCYTYPE 声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML版本，浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE>的用处。
<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

<!DOCYTYPE>是HTML5的版本声明

HTML head 元素

<head>元素是所有头部元素的容器。
<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到<head> 部分：<title>、<base>、<link>、<meta>、<script>以及 <style>。

HTML title元素

<title>元素在所有 HTML/XHTML 文档中都是必需的。
<title>元素能够：
1. 定义浏览器工具栏中的标题
2. 提供页面被添加到收藏夹时显示的标题
3. 显示在搜索引擎结果中的页面标题

**HTML base 元素
<base>标签为页面上的所有链接规定默认地址或默认目标（target）

将所有页面设置为在新窗口打开

   
   
  1. <head>
  2. <base target="_blank" />
  3. </head>

设定默认地址

   
   
  1. <html>
  2. <head>
  3. <base href="www.xxx.com" />`
  4. </head>
  6. <body>
  7. <img> src=picture.gif />
  8. <p><a href="www.baidu.com">baidu</p>
  9. <p><a href="http://baidu.com">baidu</p>

①由于在<head>部分规定了一个基准 URL，所以浏览器将在如下地址寻找图片：http://www.xxx.com/picture.gif
②而第一个链接，浏览器会链接到http://www.xxx.com/www.baidu.com
③而第二个链接，由于前面添加了http://，浏览器会链接到http://baidu.com

可参考实例：http://www.w3school.com.cn/tiy/t.asp?f=html_base_test

<link>标签定义文档与外部资源之间的关系。
<link>标签最常用于连接样式表。

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

HTML style 元素

<style>标签用于为 HTML 文档定义样式信息。
您可以在<style>元素内规定 HTML 元素在浏览器中呈现的样式。

   
   
  1. <head>
  2. <style type="text/css">
  3. body {background-color:yellow}
  4. p {color:blue}
  5. </style>
  6. </head>

HTML meta 元素

元数据（metadata）是关于数据的信息。
<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta>标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

略懂......

HTML script 元素

<script>标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”：

   
   
  1. <script type="text/javascript">
  2. document.write("Hello World!")
  3. </script>

noscript 标签

<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

   
   
  1. <script type="text/javascript">
  2. document.write("Hello World!")
  3. </script>
  4. <noscript>Your browser does not support JavaScript!</noscript>

预留字符

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

HTML实体符号参考手册：http://www.w3school.com.cn/tags/html_ref_entities.html

不间断空格（non-breaking space）

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

URL - Uniform Resource Locator

URL 也被称为网址。
当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

   
   
  1. scheme://host.domain:port/path/filename

解释：

  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机（http 的默认主机是 www）
  • domain - 定义因特网域名，比如 w3school.com.cn
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename - 定义文档/资源的名称

HTML 多媒体

http://www.w3school.com.cn/html/html_media.asp


win_turn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的学习笔记
Cnote
06-08 1005
目录 html5基础介绍 制作你的第一个网页 html和css的关系 标签的用法 html5文档结构 html文件注释 html5语义化标签 段落标签 使用<span>标签自定义文字样式 使用<hx>标签为网页增加标题 使用<div>标签自定义块 使用<header>标签定义头部区域 使用<footer>标签定义底部区域 使用<section>定义区段 使用<aside&...
html最全知识点（超级详细）
最新发布
2301_79099287的博客
05-23 1034
一列格式自定义的列表（几乎不用）十一、 HTML中的特殊字符（记忆）有时候需要在页面中显示空格、等特殊字符这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到）这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！
Html学习笔记
10-29
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。
HTML学习笔记.md
08-01
HTML学习笔记
html学习笔记.zip
04-05
介绍了html中代码格式和常用标签 #HTML格式 * `<!DOCTYPE html>`---------*注明文件使用格式* `<html lang="en">`--------*注明网页使用语言 en-英语 zh-CN-中文* `<head>`--------*头部* `...
HTML学习笔记
05-02
### HTML学习笔记精要 #### 1. 文档类型声明 - `<!DOCTYPE>` 文档类型声明是HTML文档中不可或缺的一部分，它位于文档的最前端，在`<html>`标签之前。其作用在于通知浏览器文档遵循的HTML或XHTML规范，确保正确渲染...
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
HTML 学习笔记
03-29
HTML 学习笔记语法大全！ 适合初学者
个人HTML学习笔记.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML学习笔记–HTML的语法详解(必看)
12-14
... ...格式：<标记>内容</标记> 3.标记的属性（用来控制图像、文本等如何的显示）格式：<标记 属性1=属性值 属性2=属性值…>内容<...都是定义相同的标记，但是在编写网页的使用尽量...以上这篇HTML学习笔记–HT
web前端HTML学习笔记
08-30
前端笔记HTML部分
前端三件套html学习笔记
02-24
本人html学习笔记，方便遗忘后查找
web前端之HTML技术
Viking_JoneJi的博客
04-24 574
HTML语法规范HTML语法规范基本语法概述标签关系HTML基本结构标签结构标签HTML 常用标签标题标签 `-` HTML语法规范 基本语法概述 HTML 标签是由尖括号包围的关键词，例如 <html>。 HTML 标签通常是成对出现的，例如 <html>和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 有些特殊的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值