HTML学习笔记

超文本标记语言HTML

开始标签 元素内容
<html> 定义HTML的根元素
<head> 类似于头文件 包含了文档的元(meta)数据
<title> 描述文档标题
<body> 包含可见的页面内容
<h1> 定义一个大标题
<p> 定义一个段落

HTML链接语法

链接的 HTML 代码很简单。它类似这样：

1
<a href="url">链接文本</a>

示例：
百度

HTML文本格式化标签

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

小tip：通常标签<strong>替换加粗标签<b>来使用,<em>替换<i>标签使用。然而，这些标签的含义是不同的：<b>与<i>定义粗体或斜体文本。
<strong>或者<em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

HTML 引文,引用,及标签定义

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目

abbr示例：

1
2
3
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
etc.

WWW

HTML样式标签

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #0061B2;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors
<span style="background-color:#0061B2;color:#ffffff;">Boxes</span>
</div>

<div style="color:#0061B2;">and more...</div>

</div>

HTML 图像- 图像标签（ ）和源属性（Src）

定义图像的语法是：

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

URL指存储图像的位置( •̀ ω •́ )✧

HTML表格

1
2
3
4
5
6
7
8
9
10
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
</table>

HTML 列表标签

—|:–:
<ol>|定义有序列表
<ul>|定义无序列表
<li>|定义列表项
<dl>|定义列表
<dt>|自定义列表项目
<dd>|定义自定列表项的描述

1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

示例：

  1. Coffee
  2. Milk

HTML区块

<div>|定义了文档的区域，块级 (block-level)
<span>|用来组合文档中的行内元素， 内联元素(inline)

div元素

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

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

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

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

span元素

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

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

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

HTML布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

HTML表单

文本域 输入元素

1
2
3
4
5
<form>
..
input 元素
..
</form>

示例：

1
2
3
4
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name:
Last name:

密码字段（特点在于不会明文显示输入元素）

通过标签<inpute type ="password">来定义

1
2
3
<form>
Password: <input type="password" name="pwd">
</form>
Password:

单选按钮（Radio Buttons）

input type = “radio”定义了单选

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

复选框（Checkboxes）

input type = “checkbox”定义了复选框

1
2
3
4
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a bike
I have a car

提交按钮(Submit Button)

input type = “submit”定义提交按钮

1
2
3
4
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Sub">
</form>
Username:

HTML框架

百度

HTML颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）

HTML脚本

<script>标签用于定义客户端脚本，比如JavaScript。
<script>元素即可以包含脚本语句，也可以通过src属性指向外部脚本文件

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

JavaScript可以直接在HTML输出:

1
2
3
4
5
6
7
8
9
10
11
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

例如：

JavaScript 能够直接写入 HTML 输出流中：

您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

我的第一个 JavaScript

JavaScript 可以触发事件，就像按钮点击。


代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<h1>我的第一个 JavaScript </h1>

<p id="demo1">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function MyFunction()
{
	document.getElementById("demo1").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="MyFunction()">点击试试</button>

我的第二段 JavaScript

JavaScript 能改变 HTML 元素的样式。


代码如下： 
1
2
3
4
5
6
7
8
9
10
11
12
<h1>我的第二段 JavaScript</h1>
<p id="demo2">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo2") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

HTML实体字符

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
“ 引号 &quot; &#34;
‘ 撇号 &apos; IE不支持)
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide； &#247;

HTML 统一资源定位器(Uniform Resource Locators)

URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。

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

以下是一些URL scheme：

Scheme 访问 用于…
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。

以上！

#html语言
HTML学习笔记
http://owoah.com/2021/05/01/HTML学习笔记/
作者
owoah
发布于
2021年5月1日
许可协议