从零开始学 H T M L HTML HTML
前言:太菜了,之前学的忘光了,来补了。
1.先把所有标签过一遍。
1.<!DOCTYPE>
D
O
C
T
Y
P
E
:
d
o
c
u
m
e
n
t
t
y
p
e
DOCTYPE: document\ type
DOCTYPE:document type 文档类型
注意它不是 <html>
标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。<!DOCTYPE>
声明必须是 HTML 文档的第一行,位于 <html>
标签之前。
<!DOCTYPE html>
2 . <html>
定义一个
h
t
m
l
html
html文档.
3 . <head>
<head>
标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<title>
定义文档的标题,它是 head 部分中唯一必需的元素。
4 . <title>
定义文档的标签,浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
5 . <body>
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
在 V S c o d e VS\ code VS code中,输入 ! + t a b !+tab !+tab 会自动提供 h t m l html html的框架。
<!DOCTYPE html>
<html lang="en">
<!-- 这是html 的语言属性language en=english zh-CN: 简体中文 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
charset UTF-8 UniCode 规定 HTML 文档的字符编码
使用 name 属性来定义一个 HTML 文档的描述、关键词、作者
content 描述 HTML 文档内的元数据:
width 可视域宽度 设为关键字device-width
initial-scale 可视域的缩放级别
-->
<title>Document</title>
</head>
<body>
</body>
</html>
这是最基本的 h t m l html html框架了。
1.标题标签 h
<h1>11111</h1>
<h2>22222</h2>
<h3>22222</h3>
<h4>22222</h4>
<h5>22222</h5>
<h6>22222</h6>
2 . 段落标签 p
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
3 . 换行标签 <br>
b
r
:
b
r
e
a
k
br : break
br:break
4 .水平线 <hr>
h
r
:
h
o
r
i
z
o
n
t
a
l
r
u
l
e
hr: horizontal\ rule
hr:horizontal rule
5 .注释标签 <!--...-->
6 . 缩写标记标签 <abbr>
<p><abbr title="HeHao">HH</abbr>
is a student of<abbr title="Wu Han University of Science Technology"> WUST</abbr>
</p>
鼠标指针移动到该元素上会显示出缩写的完整形式即:
t
i
t
l
e
title
title内容。
7.地址标签 <address>
标签定义文档或文章的作者/拥有者的联系信息,<address>
元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
8
<tt>这是打字机文本</tt><br>
<i>这是斜体文本</i><br>
<b>这是粗体</b><br>
<big>这是大号字体</big><br>
<samll>这是小号字体</samll>
这是字体的样式元素,不过用样式表会更好。
<em>这是被强调的文本</em><br>
<strong>这是重要的文本</strong><br>
<dfn>定义一个项目</dfn><br>
<code>这是计算机代码文本 printf("hello world\n");</code><br>
<samp>这是样本文本</samp><br>
<kbd>这是键盘文本</kbd><br>
<var>这是一个变量</var><br>
<del>这是被删除的文本</del><br>
<ins>这是下划线文本</ins>
div
span
img
a
<div>这是一块内容</div>
<!-- div 自动换行 -->
<span>这是行内元素1</span>
<!-- span 之间会有空格 -->
<span>这是行内元素2</span>
<img src="hh.jpg" alt="打不开啦" title="标题" width="200">
<!-- alt :alter 替换的意思
src:Source 源文件链接
-->
<br>
<a href="https://blog.csdn.net/weixin_45750972">我的博客</a>
<!-- href: hypertext reference 超文本引用 即链接
a: Anchor 锚
-->