RUNOOB html第一天

2019-02-21 本文已影响0人似是懂

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>有倾斜效果