1. HTML 语法规范
htlml标签由尖括号包围例如<html>.大多数标签成对出现，例如<html></html>。<br/>是单标签。
2.标签关系
关系分为：包含和并列关系。
包含关系：
<head>
<title></title>
</head>
并列关系:
<head></head>
<body></body>
3. HTML基本结构标签
<htm>为根标签、、<head>为头部标签 、<title>为网页标题、<body>为网页主干。
<html>
<head>
<title>这是第一个页面</title>
</head>
<body>
键盘敲烂，工资过万。
</body>
</html>
4 开发工具
有dw、subime、webstorm、hbuilder、vscode几种开发工具。
ctrl+n新建文件 保存（ctrl+s）保存为.html文件。右击 "open in bowser"在网页中打开。
<!DCOTYPE>文件类型声明，作用是告诉浏览器使用那个版本的html来显示网页。<DOCTYPE html> 表示使用html5来显示页面。
<html lang="en">定义文档显示的语言。en定义语言为英文，zh-CN定义语言为中文
<meta charset="UTF-8"/>是多个字符的集合，方便计算机能够识别和存储各种文字。charset常见的值由 GB2312、big5、gbk和utf-8.其中utf-8属于万国码。包含全时间所有国家使用的字符。不写会导致页面出现乱码。
HTML常用标签
标签的语义
标签的语义指的就是标签的含义，根据标签的语义，再合适的地方给一个合适的标签，可以是页面变得清晰。
<h1>-<h6>标题标签
<h1>一级标题<h1>
作为标题使用 ，标题独占一行。从大到小。
段落标签和换行标签
<p>段落标签</p>
用于将HTML分割为不同段落
</br>换行标签
</br>属于单标签，强制换行
文本格式化标签
粗体、斜体或下划线等效果
加粗 <strong></strong>或者<b><b> 推荐使用<strong>语义更加强烈
倾斜 <em></em>或者<i></i> 推荐使用<em>语义更加强烈
删除线 <del></del>或者<s></s> 推荐使用<del>语义更加强烈
下划线 <ins><ins>或者<u><u> 推荐使用<ins>语义更加强烈
<div>和<span>标签
没有语义，它们类似于一个盒子 用来装入内容。都是用来进行布局。
div表示分割、分区。span意为跨距。
div独占一行，类似于一个大盒子。
span一行可以放很多个。类似于一个小盒子。
图像标签和路径
1图像标签
<img src="图像"/> src是标签的必须属性，用于指定图像的路径和文件名。
alt替换文本标签 当图片无法显示使用文本替换 <img src="1.jpg " alt="输入文字提示 "/>
title提示文本标签 鼠标放上图片提示文字 <img src="1.jpg" title="输入文字提示 "/>
width标签
修改图像宽度，<img src="1.jpg " width="000"/>
Height标签
修改图像高度, <img src="1.jpg " height="000"/>
高度宽度只需要修改一个，图片会根据修改等比例缩放。
Border标签
设置图像的边框粗细，<img src="1.jpg " border="000"/>
图像标签
图像标签可以拥有多个属性，必须写在标签名后。
属性之间部分先后顺序，标签名与属性、属性与属性之间需要用空格分开。
属性采取键值对的格式，即key="value"的格式，属性="属性值"。
图像标签和路径
目录文件夹和根目录
目录文件夹：
根目录：
路径：相对路径和绝对路径
相对路径：以引用的文件所在位置做参考基础，而建立的目录路径。就是图片相对于HTML页面的位置。
同一级路径：图像文件于HTML在同一级文件夹中，<img src="1.jpg"/>
下一级路径：图像文件于HTML在下一级文件夹中，<img src="image/1.jpg "/>
上一级路径：图像文件于HTML在上一级文件夹中，<img src="../1.jpg"/>
绝对路径：
绝对路径是指图片的在电脑之中的位置。类似于<img src="c:\user\tupian\1.jpg"/>。
或者是在网络之中的绝对地址。类似于<img src=“http://ww.xxx.com/1.png”/>。
超链接标签
<a href="网页地址" target="目标窗口弹出的方式”>文本或图像</a>
Href
在网页中链接到另一个界面。 <a href="http://www.qq.com">腾讯</a>.
Target
用于指定目标窗口的弹出方式。默认的是_self 当前窗口打开页面， _blank 是在新窗口打开页面,保留之前的界面。
<a href="http://www.qq.com" target="_self或者是_blank" >腾讯</a >
链接分类
1外部链接和内部链接
外部链接 是指连接到其他网站页面
例如 <a href="http://www.qq.com" >腾讯</a >
内部链接 是指网站内部页面之间的链接，直接链接内部页面名称即可。
例如 <a href="index.html">首页</a>
2下载链接:
下载链接链接的是文件exe或者是zip等压缩包
<a href="img.zip">xiazai</a>
3网页元素的链接 图片超链接
<a href=“htttp://www.baidu.com”><img src="baidu.jpg"/></a>
4空链接：
<a href="# " >空链接 </a >
5锚点链接：点击网页锚点可以快点跳到页面指定位置
如 <a href="#jieshao">人物介绍</a>
………………………………….
<h1 id="jieshao"></a>
即可点击人物介绍跳转到页面下方的人物介绍模块
Html的注释标签和特殊字符
注释标签
<!--注释注释注释--> 快捷键为 ctrl+/
注释标签中的信息在页面中不会显示，为了帮助程序员阅读理解使用。
特殊字符：
  空格字符
一个表示一个空格 例如 ； ； ； ；
Lt字符 大于号 gt 小于号
扫一扫
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
