HTML入门笔记1

Fantasy嘿

于 2021-06-01 18:33:08 发布

阅读量207

点赞数 6

本文链接：https://blog.csdn.net/weixin_50794535/article/details/117449027

版权

一.常用标签

（一）文档标签

<!DOCTYPE>: 定义文档类型.

<html>: 定义HTML文档.

<head>: 定义文档的头部.(头部内包含)

(1). `<meta>`: 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词.

(2). `<base>`:定义页面上的所有链接规定默认地址或默认目标.

(3). `<title>`: 定义文档的标题.

(4). `<link>`: 定义文档与外部资源的关系.

(5). `<style>`:定义 HTML 文档样式信息.

（二）布局标签&语义化

<div>:定义块级元素.

<span>:定义行內元素.

<dialog>:定义对话框或窗口.

<nav>:定义导航.

<table>:定义表格.

<tr>:定义一行.

<td>:定义单元格.

<caption>:定义标题.

（三）.表单标签

<option>:定义下拉列表的选项.

<input>:定义输入域.

<button>:定义按钮.(定义围绕表单中元素的边框.)

（四）.列表标签

<ul>:定义无序列表.

<ol>:定义有序列表.

<li>:定义列表项.

<dl>:定义自定义列表.

（五）.图像&链接标签

<img>:定义图像.注意加上alt属性

<a>:定义超链接.

（六）.格式标签

1.文章标签

<h1>-<h6>:定义 HTML 标题.

<p>:定义段落.

<br>:定义换行.

<hr>:定义水平线.

2.短语元素标签

<em>:定义强调文本.

<strong>:定义语气更为强烈的强调文本.

3.字体样式标签

<i>:显示斜体文本效果.

<b>:呈现粗体文本效果.

<big>:呈现大号字体效果.

<small>:呈现小号字体效果.

二.块级元素与行内元素：

（1）块级元素

<div>	一个层
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<h1> to <h6>		定义 HTML 标题。
<li>		定义列表的项目。
<p>		定义段落。
<td>		定义表格中的单元。
<tr>		定义表格中的行。
<ul>		定义无序列表。

特点：

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

（2）行内元素

<a>	定义锚。
<b>		定义粗体字
<br>		定义简单的折行。
<button>		定义按钮 (push button)。
<img>		定义图像。
<strong>		定义强调文本。
<span>		定义文档中的节。

特点：

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

通过display属性对行内元素和块级元素进行切换(主要看第2.3.4个值)：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

三.超链接与图片标签

<a>

通过使用 href 属性 - 创建指向另一个文档的链接

<a href="http://www.w3school.com.cn/">Visit W3School</a>

2. 通过使用 name 属性 - 创建文档内的书签

<a href="#tips">有用的提示</a>

图片标签：

alt	text	规定图像的替代文本。
src	URL	规定显示图像的 UR

四.绝对路径与相对路径

1.相对路径：在同一级目录下。

2.所谓绝对路径，就是指完整的路径，我们要做到图标的相对位置，也就是从c盘开始找就是绝对位置。我们可以用这个图标进行图片显示，别人如果想看到就要用绝对路径，就要从html中的所在目录中招。

五.常用实体元素

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

实例：

六.列表

无序列表：

<ul>

<li>牛奶</li

</ul>

有序列表：

<ol>

</ol>

</ol>

定义列表：

Fantasy嘿

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
HTML入门笔记1

HTML文档标签<!DOCTYPE>: 定义文档类型.<html>: 定义HTML文档.<head>: 定义文档的头部.(头部内包含)(1). `<meta>`: 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词.(2). `<base>`:定义页面上的所有链接规定默认地址或默认目标.(3). `<title>`: 定义文档的标题.(4). `<link>`: ...
复制链接

扫一扫