一个程序员退休之后想练练书法,于是准备好了笔墨纸砚,摆好放在书桌上,他提起笔沉思片刻,然后郑重其事地写下了“Hello World”。
HTML简介
HTML(超文本标记语言——HyperText MarkupLanguage)是构成Web世界的基石。它描述并定义了一个网页的内容。其他除HTML以外的技术则通常用来描述一个网页的表现/展示效果(CSS)或功能(JavaScript)。
HTML初识
- 后缀.html
- 文档类型声明
<!doctype html>
- head和body
<head></head>
<body></body>
写在head中
- meta
<meta charset="utf-8"/>
- 网页三要素
<title>标题</title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述内容"/>
写在body中
- 标题标记
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 段落标记
<p>
床前明月光
疑是地上霜
举头望明月
低头思故乡
</p>
- 分割线
<hr />
- 强制换行
<br />
- 保留格式
<pre>
小白上楼梯
去吃肯德基
薯条呀薯条
汉堡呀汉堡
</pre>
- 普通容器标签
<div>普通容器标签</div>
- 普通内联元素
<span>普通内联元素</span>
- 超链接
<a href="https://baidu.com" target="_blank">百度</a>
<a href="new.html" title="new.html" target="_blank">new</a>
href后面写链接地址
target默认值是_self
可设置成_blank
- 相对路径
<img src="图片.jpg" title="图片" alt="图片" />
<img src="./img/图片.jpg"/>
<img src="../图片.jpg"/>
<img src="../img/图片.jpg"/>
- 绝对路径
<img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
<img src="C:\Users\XUAN\Desktop\day01\图片.jpg"/>
<img src="/图片.jpg"/>
title 提示图片内容
alt 在图片错现错误时,提示图片内容
- 列表
无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>大白梨</li>
</ul>
有序列表
<ol>
<li>篮球</li>
<li>足球</li>
<li>羽毛球</li>
</ol>
对话列表
<dl>
<dt>你好,小王</dt>
<dd>你好,小李</dd>
<dt>How are you?</dt>
<dd>Fine,3Q</dd>
<dt>How old are you?</dt>
<dd>...</dd>
</dl>
- 样式标签
<em>斜体</em>
<strong>加粗</strong>
<i>斜体</i>
<u>下划线</u>
<b>加粗</b>
<del>删除</del>
<small>小</small>
a<sub>b</sub>下标
a<sup>b</sup>上标
<code>console.log('hello geek')</code>
<mark>标记</mark>
<blockquote>引用</blockquote>
- 在网页中载入另一个网页
<iframe src="网页链接" width="数字" height="数字" frameborder="数字"></iframe>
符号
注释
<!--注释-->
推荐网站:HTML系列教程