1.教程
后缀名
- .html
- .htm
只有两种，有没有 l 没区别
2.简介
- <!doctype html> html5文档
- <html> 页面根元素
- <head> 包含元数据（meta）
<meta charset="utf-8">就是定义网页格式为utf-8（就跟定义算术是二进制还是十进制一样） - <title> 标题
- <body> 可见内容
只有<body>里面才能显示 - <h1>..<h6>各级标题
- <p> 文本，段落
html
超文本语言
不是编程，属于标记语言
web页面，描述网页
标签
一般成对出现。
<>
开始（开放）标签
结束（闭合）标签
元素
约等于标签
web浏览器
浏览器是用于读取标签，按照需要的形式展现给用户
谷歌浏览器，IE，firefox,safari
版本
- html （1991）
- html+ （1993）
- html2.0 （1995）
- html3.2 （1997）
- html4.01 （1999）
- xhtml1.0 （2000）
- html5 （2012）
- xhtml5 （2013）
2000年之前基本上2年换一个版本，2012年开始了新的时代
<!doctype>声明
为了让浏览器正确读取内容
不区分大小写
一般情况
html 5
<!DOCTYPE html>
html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
xhtml 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文网页乱码
有些浏览器默认GBK为默认编码，所以需要在head声明<meta charset="UTF-8">
3.编辑器
推荐：notepad,sublime text,vs code
Windows 用户可以使用记事本；
Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs ；
Mac 用户可以使用 OS X 预装的 TextEdit。
新建
文件（F）——新建（N）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>标题</h1>
<p>文字</p>
</body>
</html>
另存为.html
文件（F）——另存为（A）
运行
双击
Notepad++ 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。
Emmet 官网：http://emmet.io/
4.html基础
标题
<h1>...<h6>逐渐减小
段落
<p>内容</p>
连接
<a>
<a href="http://www.baidu.com">百度</a>
图像
<img>
<img src="?"width="20"height="20"/>
- 在相同目录下
？=？.jpg - 在不同目录下
.html和image同一目录
？=image/?.jpg/
.html在connage文件夹，image跟connage同一目录
？=../image/?.jpg - 在不同盘(f)
？=file:///f:/?.jpg - 来源于网络
写绝对路径
5.元素
<p>段落</p>
<a href="">文本</a>
<br>换行
元素语法
某些元素有空内容
空元素开始结束就结束了,例如 br
但是更建议写成
<br/>
大多数标签都可以设置属性
记得写结束标签
记得使用小写
6.属性
一般用在开始标签里
给元素设置一些附加属性
<a href="http://www.baidu.com">百度</a>
一般用双引号，个别情况下有双引号就必须用单引号
使用小写
一般情况
class 类名，一个或者多个
id 定义元素
style 行内样式
title 作为工具条使用
7.标题
<h1>最大
<h6>最小
浏览器会自动在段落前后空行
标题便于分清主次，同时也方便网页编制索引实现快速浏览
- 分割线
<hr>分割线
- 注释
<!--注释-->
- 查看源代码
右键——查看源文件（IE）/查看页面源代码（firefox）
8.段落
- <p>
- 分行br
- 多个空格算一个，多个分行算一行
9.文本格式化
<b>加粗</b> <strong>代替<b>表着重
<i>斜体</i> <em>代替<i>表着重
<code>电脑自动输出</code>
（这里这里）
<sub>下标</sub>
<sup>上标</sup>
<small>小号字</small>
<ins>插入字</ins>加下划线
<del>删除字</del>中间划线
计算机输出标签（这里）
<code>计算机代码</code>
<kbd>键盘码</kbd>
<samp>计算机代码样本</samp>
<var>变量</var>有斜体效果
<pre>预格式文本<pre>
引文、引用、标签定义
<abbr>缩写</abbr>
<address>地址</address>
<bdo>文字方向</bdo>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<blockquote>长的引用</blockquote>
<q>短的引用语<q>
<cite>引用、引证</cite>
<dfn>一个定义项目</dfn>有倾斜效果
网友评论