HTML 学习笔记

date

Jan 1, 2023

slug

html

author

status

Public

<!DOCTYPE> 声明

<!DOCTYPE html>

HTML 元素

<标签>内容</标签>

包含「开始标签」和「结束标签」的完整元素

<br />

「空元素」以开始标签的结束而结束

HTML 属性

属性一般描述于 开始标签

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

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

HTML 段落标签

标题（Heading）	通过 <h1> - <h6> 标签进行定义
水平线（Horizontal Route）	<hr />
注释	<!-- 这是一个注释 -->
段落	通过 <p> 标签进行定义
折行（barter rabbet）	<br />

HTML 格式化标签

加粗（bold)	<b>
斜体（italic）	<i>
小号字体	<small>
下标字	<sub>
上标字	<sup>
插入字（下划线）	<ins>
删除字	<del>

💡

通常标签 <strong> 替换加粗标签 <b> 来使用，<em> 替换 <i> 标签使用

HTML 链接（Anchor）

超链接语法

使用标签 <a> 来设置超文本链接

在标签 <a> 中使用 href 属性来描述链接的地址（Hypertext Reference）

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

Target 属性

<a href="https://marlin.red/" target="_blank">Marlin</a>

Id 属性

可用于创建一个 HTML 文档书签

<a id="tips">贴士</a>

插入 ID

<a href="#tips">访问贴士</a>

本页面跳转

<a href="https://marlin.red/postname#tips">访问贴士</a>

第三页面跳转至文章特定部分

HTML 头部（Head）

<head>

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

在 <head> 元素中你可以插入脚本（scripts）、样式文件（CSS）及各种 meta 信息

可添于头部的元素标签：<title> <style> <meta> <link> <script> <noscript> <base>

<title>

在 HTML 文档中是必需的

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

<base>

描述了基本的链接地址/链接目标

该标签作为 HTML 文档中所有链接标签的默认链接

<base href="http://marlin.red/" target="_blank">

<link>

定义了文档与外部资源之间的关系

通常用于链接到样式表

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

<style>

定义了 HTML 文档的样式文件引用地址

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

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

<meta>

描述了一些基本的元数据

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

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

<meta name="description" content="免费 Web & 编程 教程">

<meta name="author" content="Runoob">

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

<stript>

用于加载脚本文件，如： JavaScript

头部标签

定义文档信息	<head>
定义文档标题	<title>
定义页面链接标签的默认链接地址	<base>
定义一个文档和外部资源之间的关系	<link>
定义 HTML 文档中的元数据	<meta>
定义客户端的脚本文件	<script>
定义 HTML 文档的样式文件	<style>

CSS（Cascading Style Sheets）

如何使用 CSS

内联样式：在 HTML 中使用「style」属性

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

外部引用：使用外部 CSS 文件（The Best Way)

内联样式

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

样式实例

背景颜色	background-color
字体	font-family
颜色	color
字体大小	font-size
文字对齐	text-align

内部样式表

<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

<img> 是空标签

要在页面上显示图像，你需要使用源属性（src）

src 指「source」

源属性的值是图像的 URL 地址

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

Alt 属性

Alter 的缩写

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

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

<img src="boat.gif" alt="Big Boat">

设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度

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

HTML 表格

<table>

表格由 <table> 标签来定义

每个表格均有若干行（由 <tr> 标签定义）→ table row

每行被分割为若干单元格（由 <td> 标签定义）→ table data cell

<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>

边框（border）

如果不定义边框属性，表格将不显示边框

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

表头（table header）

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

<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>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML 列表

无序列表（unordered list）

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

有序列表（ordered list）

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

描述列表（description list）

<dl>	description list
<dt>	description term
<dd>	description data

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

HTML 区块

区块元素

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

块级元素在浏览器显示时，通常会以新行来开始

<h1> <p> <ul> <table>

内联元素

在显示时通常不会以新行开始

<b> <td> <a> <img>

<div> 元素

该元素是 division 的缩写

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

由于它属于块级元素，浏览器会在其前后显示折行

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

<div> 元素的另一个常见的用途是文档布局

<span> 元素

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

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

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

HTML 布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Marlin</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;">
版权 © marlin.red</div>
 
</div>
 
</body>
</html>

HTML 表单和输入

HTML 表单

可包含文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）……

可使用 <form> 标签来创建表单

<form>
.
input 元素
.
</form>

输入元素

多数情况下被用到的表单标签是输入标签 <input>

输入类型是由 type 属性定义

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Type 属性的值

文本域（Text Fields）	text
密码字段	password
单选按钮（Radio Buttons）	radio
复选框（Checkboxes）	checkbox
提交按钮（Submit）	submit

提交按钮（Submit）

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

表单的动作属性 action 定义了服务端的文件名

action 属性会对接收到的用户输入数据进行相关的处理

method 属性可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符，一般用于不敏感信息，如分页等

HTML 框架

iframe 语法

<iframe src="URL"></iframe>

iframe 属性

高度	height
宽度	width
边框	frameborder

HTML 脚本

<script> 标签

用于定义客户端脚本，比如 JavaScript

既可包含脚本语句，也可通过 src 属性指向外部脚本文件

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

<noscript> 标签

提供无法使用脚本时的替代内容

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