上一篇
下一篇
博主个人主页
博主视频教程
提取码：be7o
前言
从这一篇文章开始 我们就进入到了编码的环节 但是刚学习的童鞋们不要担心 在上一篇中也提到了 HTML非常的简单 本章中会提到文档声明 以及基本的HTML文档结构 和HTML的书写规范 还有 一些基本的标签(HTML4) 本文有点长 请耐心看~
下面进入正题 请先阅读 到写代码的时候再敲~
文档头和HTML编写规范
文档头规定的浏览器以何种形式区渲染我们的页面 如何区解析我们的标签 是怪异模式还是标准模式 声明了文档头就会以标
准模式解析我们的标签 应该是统一的 所以建议每一次在编写界面的时候都要加上文档头声明
HTML 对大小写不敏感 但是在编写的时候都小写就好了
例如
<p> 文本 </p>
HTML 的标签要有开有关 成对出现 除了单标签
不推荐
<p> 文本 <p>
推荐
<p> 文本 </p>
HTML 单标签也要加上/作为结束标识符
不推荐
<hr>
推荐
<hr/>
HTML 标签最好不要出现大小写混搭的风格出现
不推荐
<P> 文本 </p>
推荐
<p> 文本 </p>
任何一个标准的html文档头都是以<!DOCTYPE ……开头
看下面的两种文档头声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML页面</title>
</head>
<body>
</body>
</html>
这是HTML5的文档声明和基本的页面结构 文档头的声明不像HTML4那么多 也更容易记住 当然HTML4的文档头也应该没人记把 哈哈
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
这是HTML4的文档声明和基本的页面结构 文档头的声明内容比较多 但是不用记 使用HTML4的文档头不能够更好的去使用HTML5的新特性 新标签 建议都使用HTML5的
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
这是XHTML的文档声明 这种格式的文档相对于来说语法更加的严格 类似与xml的风格 这里说到的xml也是一个可扩展的标记怨言 标签不是已经定义好的 可以自己自定义 在以前一般用来传输数据 但是现在用的少了 因为出现了json 更加的方便 轻量 这个不用纠结 在以后都会学习到 这个格式的文档也不是主流 所以也不用太在意 只要知道就好了~ 有这个东西
基础结构
下面来详细的说一下HTML的基本结构把(使用HTML5的文档风格)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML页面</title>
</head>
<body>
</body>
</html>
上面的一串代码就是HTML的基础结构 是一个标准的良好的基础结构从第一行的文档声明开始 下面的html是整个文档的根标签 只有一个 再往下区的head标签就是文档的头部信息 在这里面可以对网站进行一些seo(搜索引擎优化)方面的事情meta 以及设置一下我们HTML文档的标题title
当我们设置了 title 之后我们打开HTML文件就会发现浏览器当前选项卡的标题就是我们设置的内容
meta再后来会详细说到
下面的body就是承载我们整个文档的主题部分了 我们的页面代码编写基本都是在这个标签内部进行编写
下面开始进入敲代码环节
准备工作
- 一个能够写代码的编辑器
- 记事本 windows电脑自带的
- notepad++ 增强版的编辑器 推荐
- sublime Text 3 也是一个增强的编辑器 各种插件很好用
- vscode 这个在后来可以使用 刚开始学 不推荐
- webstorm 强大的前端编辑器 再后来也可以选择这个使用
- 这个可能需要破解
- 激活码地址
- 有时候需要修改本地的hosts文件在最后面 加入
0.0.0.0 account.jetbrains.com即可 - hosts 文件位置 C:\Windows\System32\drivers\etc\hosts 【windows】
- 一台能够正常运行的电脑
- Windows 系统 推荐
- Linux 系统 初学不推荐
- Mac 系统 无所谓
- 你要会打字 会基本的电脑操作 不会没事 在这里我说几个常用快捷键
- ctrl + c 复制
- ctrl + v 粘贴
- ctrl + x 剪切
- ctrl + a 全选
- ctrl + n windows上打开一个新的我的电脑窗口
- ctrl + 鼠标左键 可以连续点击选中
- shift + 鼠标左键可以快速选中一个区域内的文件
- ctrl + f 在编辑器内可以全局搜索内容
好了上面的事情完毕之后 我们开始渣着手编写我们的第一个HTML页面吧
首先我们在桌面上新建一个文件夹 或者 直接新建文件 下面我说到两种方式 都可以
1 .
点击鼠标右键 -> 新建 -> 文件夹 -> 输入文件夹名称或者直接默认的都可以
双击文件夹进入到文件夹中
点击鼠标右键 -> 新建 -> 新建文本文档 -> 修改名字为 -> 我的第一个HTML程序.html
点之后的html是文件的后缀名 这个是必须的 可以是html也可以是htm 修改完之后图标会发生变化 是正常的现象
文件名可以随意起
2.
点击鼠标右键 -> 新建 -> 文本文件 修改名字为 -> 我的第一个HTML程序.html 即可
开始编写第一个HTML文档
此时文件已经创建完毕 我们可以通过在文件上鼠标右键 选择打开方式 选择我们下载或安装的编辑器就可以了
我们来测试我们的标题修改会不会生效 我们将如下代码 写到文档中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML页面</title>
</head>
<body>
</body>
</html>
此时我们的标题是第一个HTML页面
我们编写完之后 ctrl+s 进行保存 然后双击我们的HTML文件 打开
效果
可以看到标题已经变化了 是我们自己写的 用的浏览器不同可能这里的选项卡界面样式会有所不同 这个不重要 重要的是效果出来就好了 是不是很兴奋呢~~
meta ,style, link
通过这个标签可以对我们的网站进行一些设置 做一些seo的优化 或者说是规定在移动端的显示方式等
下面我列出里面的属性和取值以及每一个的意思
这个属性charset声明声明当前文档所使用的字符编码 该声明可以被任何一个元素的lang特性的值覆盖。文档的编码要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码
<meta charset="utf-8"/>
关键词 通过这个属性来做一些关键词的填写 如果你的关键词搜索几率很高 那么很有可能被搜索引擎收录哦~ 那样就能够在百度中看到你的网站了
<meta name="keywords" content="HTML, CSS, XML" />
网站的描述信息 假设你的网站被收录了 总要有一些东西显示一下 描述一下你这个网站的内容吧~ 让人更清楚你网站的性质
<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" />
这个没什么说的 就是作者
<meta name="author" content="littlematch">
版权信息
<meta name="copyright" content="本页版权归小火柴所有">
视口 这个非常有用 一般在移动端使用可以规定页面的显示方式
viewport 视图
content 内容
width=device-width 宽度为设备的宽度
initial-scale=1.0 初始大小比例
maximum-scale=1.0 最大缩放比例
minimum-scale=1.0 最小缩放比例
user-scalable=no 是否允许用户方法缩小界面
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no" />
【定时跳转】
让网页多少秒刷新，或跳转到其他网页
<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
【缓存过期时间】
用于设定网页的到期时间，过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">
用于设定禁止浏览器从本地机的缓存中调阅页面内容，用户无法脱机浏览
<meta http-equiv="Pragma" Content="No-cach">
强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
<meta http-equiv="windows-Target" content="_top">
兼容方式
Edge模式告诉IE以最高级模式渲染文档，什么版本IE就用什么版本的标准模式渲染；chrome模式表示强制IE使用Chrome Frame渲染。 用户可以通过IE的用户界面，以Chrome内核的渲染方式浏览网页
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
base用于指定文档里所有相对URL地址的基础URL，为页面上所有链接规定默认地址和默认打开方式。文档中的基础URL可以使用document.baseURI进行查询
<base href="http://cnblogs.com" target="_blank">
link指定了外部资源与当前文档的关系，具有属性href、rel、media、hreflang、type和sizes。其中href和rel是常用的，href指定了链接的资源的地址(url)，而rel指定了资源的类型 下面是属性 常用的是stylesheet
| 属性 | 解释 |
|---|---|
| alternate | 指示链接到该文档的另一个版本 |
| author | 指示链接当前文档的作者主页 |
| help | 指向一个跟网站或页面相关的帮助文档 |
| icon | 引入代表当前文档的图标，新的sized属性与这个属性结合使用，可以指定链接图片的宽高 |
| license | 链接到当前的文档的版权声明 |
| next | 指示链接到文档是一组文档中的下一份 |
| pingback | 处理当前文档被引用情况的服务器地址 |
| prefetch | 指明需要缓存的目标资源 |
| prev | 标明了上一个文档 |
| search | 链接到可以用于搜索当前页面和相关页面的资源 |
| sidebar | 链接到可以作为附属上下文的文档 |
| stylesheet | 引入样式表 |
| tag | 创建应用于当前文档的标签 |
引入样式表文件[xxx.css]
<link rel="stylesheet" type="text/css" href="mystyle.css" />
style 标签可以在html文档内部编写css样式 这里先不纠结css 先看标签的作用就好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML页面</title>
</head>
<style>
</style>
<body>
</body>
</html>
好了 那么头部的介绍基本就这样的 我们下面来说一下常用的基本的功能比较单一的标签(包括HTML4的)还是要了解一下的对吧~
p
段落标签 独占一行是一个会计标签 一般用来包裹一篇独立的文章 不推荐p嵌套p p嵌套a,span,small,i,u,s,del 等标签都是可以的
<p></p>
hr
分割线标签
效果
代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<head>
<title>Title</title>
</head>
<body>
<p> 上部分 </p>
<hr/>
<p> 下部分 </p>
</body>
</html>
br
换行标签 加载两个行内标签中间 就可以使他们进行换行 相当于你在打字的时候的回车 懂了吧~
代码
<br/>
span
这个标签具体的作用可能就是用来增强一些具有特殊意思的内容的吧 本身没多大含义 可以通过这这个标签加属性设置颜色
代码
<span style="color:red;"> content </span>
font
HTML4中的标识字体的标签 已经不推荐使用了 这里就不做测试了 感兴趣的可以搜一下
<font></font> 不推荐使用
pre
可以将你在文档中编写的代码原模原样渲染
代码
<pre>
1
1 1 1 1 1 1
1 1 1
1 1 1
1 1 1
1 1 1 1 1 1 1 1
1
1
1
1 1 1 1 1 1 1 1
1
1
1 1
1 1
</pre>
效果
<pre></pre>
abbr
这个也不常用 就是可以提示一下 感兴趣的可以私下搜索
<abbr></abbr>
sup
上标 用来编写数学公式的时候会用到吧 平方什么的
代码
2<sup>1</sup>
<sup></sup>
sub
和 上标一样的用法 这个是下标
<sub></sub>
i
斜体标签 让字体倾斜
代码
<i> content </i>
<i></i>
u
下划线 给字体加上下划线
<u></u>
代码
<u> content </u>
s
删除线 给字体加删除线
<s></s>
em
倾斜 和 i类似
代码
<em> content </em>
<em></em>
strong
加粗字体
代码
<strong></strong>
<strong></strong>
big
大号字体
代码
<big> content </big>
<big></big>
center
文本居中
代码
<center>asd</center>
<center></center> 不推荐使用
code
代码块
代码
<code> content </code>
<code></code>
blockquote
引用块
代码
<blockquote> content </blockquote>
<blockquote></blockquote>
del
删除线
代码
<del> content </del>
<del></del>
small
小号字体
代码
<small> content </small>
<small></small>
object
媒体元素 这是html4用来引入meida的标签 不推荐使用了 这里就不过多说啦
<object></object>
结语
看到这里应该看的时间也不短了吧 如果在跟着写的话 觉得不错的话 希望朋友你能支持支持哦 加油吧 你是最棒的！！！