【学习笔记】HTML

最新推荐文章于 2023-09-02 22:42:10 发布

怀中猫°

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量1.8k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/qq_44190995/article/details/104136180

版权

HTML学习

HTML 指的是超文本标记语言: HyperText Markup Language。

 <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
  <meta charset="utf-8"> 定义网页编码格式为 utf-8。

HTML基础

HTML标题

HTML 标题（Heading）是通过<h1> - <h6>标签来定义的。1号字体对应6号标题，2号字体对应5号标题。

HTML水平线

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

HTML注释

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

HTML段落

HTML 段落是通过标签<p>来定义的。浏览器会自动地在段落的前后添加空行。（</p>是块级元素)。
如果希望在不产生一个新段落的情况下进行换行（新行），使用 <br/>换行标签。

HTML链接

HTML 链接是通过标签<a>来定义的。

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

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。
_self,_blank,_top,_parent

HTML 链接- id 属性

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

在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>（#tips:锚点）
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://https://www.hao123.com/aaa.html#tips">
访问有用的提示部分</a>

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

查看章节 4

章节 1

这边显示该章节的内容……

章节 2

这边显示该章节的内容……

章节 3

这边显示该章节的内容……

章节 4

这边显示该章节的内容……

章节 5

这边显示该章节的内容……

电子邮件链接

<a herf="mailto:邮件地址"></a>

HTML图像

HTML 图像是通过标签 <img>来定义的。

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

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML常用元素属性

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

HTML格式化标签

HTML 使用标签 <b>(“bold”) 与<i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签。
此外通常标签<strong>替换加粗标签 <b>来使用,<em>替换<i>标签使用。
标签的含义是不同的：

<b>与<i>定义粗体或斜体文本。

<strong>或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
例：

<b>加粗文本</b>  
<i>斜体文本</i>  
<big>这个文本字体放大</big>  
<small>这个文本是缩小的</small>  
<code>电脑自动输出</code>  
这是 <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头部

HTML`<head>`元素

<head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML`<title>`元素

<title>标签定义了不同文档的标题。
<title>在 HTML/XHTML 文档中是必须的。
<title>元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML`<base>`元素

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

<head>
<base href="https://www.hao123.com/images/" target="_blank">
</head>

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>

HTML表格-表头`<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 表格-标题`<caption>`

<caption>标签定义表格的标题。
<caption>标签必须直接放置到 <table>标签之后。
只能对每个表格定义一个标题。

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

HTML带结构的表格

表格划分为三部分：表头，主体，脚注

thead：表格的头（放标题之类的内容）
tbody：表格的主题（放数据本体）
tfoot：表格的脚（放表格的脚注）

<table border="1">
  <caption>......</caption>
  <thead>
  <tr>
    <th>表头</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>主体</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
  	<td>脚注</td>
  </tr>
  </tfoot>
</table>

跨列属性colspan 跨行属性rowspan

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

HTML列表

有序列表

列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
列表项使用数字来标记。

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

Coffee
Milk

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表使用 <ul> 标签。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Coffee
Milk

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。  
自定义列表以 <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 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例:<h1>, <p>, <ul>, <table>,<div>

内联元素

内联元素在显示时通常不会以新行开始。
实例:<b>, <td>, <a>, <img>,<span>

HTML表单

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

表单使用表单标签 <form> 来设置:  
<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password">来定义，密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio">标签定义了表单单选框选项。

复选框（Checkboxes）

<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

按钮(Button)

<input type="submit">定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<input type="button">定义了按钮.
<input type="reset">定义了重置按钮.

文件域

<input type="file">上传框

图像域（图像提交按钮）

<input type="image" name="..." src="...">

隐藏域

<input type="hidden“>

HTML 表单 - 下拉菜单和列表标签

<select>
<option value="...">选项</option>
<option value="...">选项</option>
</select>

分组下拉菜单和列表标签：
<select name="...">
<optgroup lable="1">
<option value="..." selected>选项</option>(预选)
<option value="...">选项</option>
....
</optgroup>
<select name="...">
<optgroup lable="2">
<option value="...">选项</option>
<option value="...">选项</option>
....
</optgroup>
</select>

HTML 表单 - 多行文本域（textarea）

<textarea name="" rows="" cols=""...>
</textarea>

HTML框架（iframe）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<optgroup lable="1">
<option value="..." selected>选项</option>(预选)
<option value="...">选项</option>
....
</optgroup>
<select name="...">
<optgroup lable="2">
<option value="...">选项</option>
<option value="...">选项</option>
....
</optgroup>
</select>

HTML 表单 - 多行文本域（textarea）

<textarea name="" rows="" cols=""...>
</textarea>

HTML框架（iframe）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="URL"></iframe>

怀中猫°

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】HTML

HTML学习HTML 指的是超文本标记语言: HyperText Markup Language。 <meta http-equiv="Content" contect="text/html;charset=utf-8"/> <meta charset="utf-8"> 定义网页编码格式为 utf-8。HTML基础HTML标题HTML 标题（Heading）...
复制链接

扫一扫