2021-05-24 15:47 已编辑清华大学 Java

关注

Html 前端学习笔记整合

HTML简介

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN</title>
</head>
<body>
    <h1>HTML笔记</h1>
    <p>HTML是用来描述网页的一种语言</p>
</body>
</html>

实例解析

html标签
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

html版本
从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

HTML元素

html文档有嵌套的html元素定义。

HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。

HTML 属性

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

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

属性实例
HTML 链接由标签定义。链接的地址在 href 属性中指定：

<a href="https://blog.csdn.net/weixin_45852922?spm=1018.2118.3001.5343">这是一个链接</a>

常用的html属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML文本

文本格式化标签

代码示例

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
//一些常用标签

HTML 文本格式化标签
标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字
HTML "计算机输出" 标签
标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本
HTML 引文, 引用, 及标签定义
标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

HTML链接

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
默认值为：_self；即当前页面打开。
可设值为：_blank；新页面打开。

id 属性
id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

HTML头部

head元素包含了所有的头部标签元素，可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>。

HTML样式

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

HTML图片

使用img标签定义 HTML 页面中的图像，img标签有两个必需的属性：src和alt。

实例

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="x.png" alt="Pulpit rock" width="304" height="228">

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

定义图像的语法是：

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

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

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

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

HTML表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

表格标签

HTML列表

HTML 支持有序、无序和自定义列表。

列表标签

HTML区块

HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本框（Text Fields）
文本框通过 input type=“text” 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。
示例：

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

密码字段
密码字段通过标签 input type=“password”>来定义：

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

单选按钮（Radio Buttons）
单选按钮通过 input type=“radio” 标签定义。

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

复选框（Checkboxes）
复选框通过 input type=“checkbox” 定义. 用户需要从若干给定的选择中选取一个或若干选项。

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

提交按钮（Submit Button）
提交按钮通过 input type=“submit” 定义.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="http://www.CSDN.com" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>