初学HTML及其基本知识大全

1.简介
HTML：指的是超文本标记语言
html是用来描述网页的一种语言，它不是一种编译语言，而是一种标记语言
HTML使用标记标签来描述网页
2.语法介绍
html是由浏览器来解析，所以不需要安装任何编译环境
Html文档的基本结构：

声明文档 是网页当中最大的标签，所有内容都要写在此标签内 header头 主要用于书写网页的设置 一般写不直接显示给用的内容 字符编码的设置 网页的标题 引入外部的css文件 引入外部的JavaScript 文件 Body: body体，网页的身体部分 网页中只要是显示给用户的内容，都要写在此标签

Head,和body 都是html的子标签

Html标签写法分类：
双标签：<标签名></标签名> / <开始标签>内容</结束标签>
单标签: <标签名 /> 一般写成<标签名>

Html标签的属性：
一般是键值对 key=”value”
属性的值必须使用双引号引起来

Html不会报错 所以注意双标签不要忘了闭合
Html标签不区分大小写 规范要求都是用小写

3.html使用标签
1.h1-h6 标题标签
双标签 有默认样式 字体变粗 变大 变黑 会 自动换行

一般一个页面中h1只使用一次 h2-h6可以重复使用

2.p 段落标签
双标签 有默认的样式 会自动换行

<p>需要换行的内容</p>

3.常见的实体字符

     空格
>      大于号
<    小于号
©   版权标志

4.i 标签 b标签 em 标签 strong标签 u标签

i     标签 单纯的字体斜体
em    也是斜体 只不过具有强调意义 
b      加粗
strong   加粗 具有强调意义
u        下划线

以上都是双标签

5.br hr 标签
都是单标签

br 强制换行
hr 水平线

6.img 图片标签
单标签
属性：

src    图片的地址
title  鼠标移入的提示信息
alt    图片加载失败时的替代内容

可以使用网络图片或者本地的图片

使用的是本地的图片资源
相对路：相对于当前文件来去查找指定的资源

./ 代表当前路径
…/ 代表上一级路径
windows下根目录 根目录一般是
盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示

绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源
推荐使用相对路径

5.列表标签
1，无序列表
ul: 声明一个无序列表
li: 列表项
type(了解): 默认disc 圆
square 方块
circle 空心圆
ul中的直接子元素必须是li

<ul type="circle">
			<li>列表项1</li>
			<li><h1>我是标题</h1></li>
			<li>列表项2</li>
			<li>列表项3</li>
</ul>

输出结果：

输出结果
2，有序列表
ol:声明一个有序列表
li: 列表项
type:
1 代表数字 默认就是数字
a 代表小写字母
A 代表大写字母
i 小写的罗马数字
I 大写的罗马数字
start: 指定以第几个开始 只能写数字,

<ol type="a" start="26">
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li>我是第三个</li>
	</ol>

输出结果：

输出结果
3，自定义列表
dl:声明一个自定义列表
dt:列表的标题
dd：列表的描述项

<dl>
		<dt>我是第一个</dt>
		<dd>我是第一的说明</dd>
		<dd>我也是第一的说明</dd>
		<dt>我是第二</dt>
		<dd>我是第二的说明</dd>
		<dd>我是第二的说明</dd>
	</dl>

输出结果为：
6.a 标签和超链接
超连接a 双标签
页面跳转
href: 跳转的地址
如果不给值 跳转当前页面
target:_blank 新打开一个窗口加载跳转后的页面
点我跳转百度实现代码：<a href="http://www.baidu.com" target="_blank" title="来点我呀">点我跳转百度</a>
跳转到当前页面的指定位置 ：就是我们所说的 锚点（比如我们说的某个盘里某个文件夹下的某个文件的位置，D:\sublime\day01HTML\day01 就是锚点）
给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到 本地html文件的指定位置
a标签的href属性的值为指定页面中标签的id的值

<a href="#item1" id="top">跳转到一楼</a>
		<a href="#item2">跳转到二楼</a>
		<a href="#item3">跳转到三楼</a>
		<a href="#item4">跳转到四楼</a>
		<a href="#item5">跳转到五楼</a>实现代码
		<p id="item1">一楼</p>
		<p id="item2" style="height:700px;background-color:red">二楼</p>
		<p id="item3" style="height:800px;background-color:green">三楼</p>
		<p id="item4" style="height:550px;background-color:blue">四楼</p>
		<p id="item5" style=" height:650px;background-color:yellow">五楼
			<a href="#top">返回顶部</a>
		</p>

初写博客，有问题给我留言，谢谢