开发工具
主要工具：
1.浏览器：谷歌浏览器，Edge
2.PS（多用于UI）
3.Hbuilder(国产)
认识网页
由文字，图像，超链接等组成。
实际上由代码编译而成。
Web标准
标准构成
结构（html），表现(CSS)，行为(JS)三个方面
总结：结构合理（最为重要），美观表现，交互行为吸引用户
认识HTML
Html是一种超文本标记语言。
不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
总结
：用文字来描述网页的标签
Html语言语法基本骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
标签
<!DOCTYPE html>版本号
<meta charset="utf-8">字符集编码方式
<title></title>文档标题
<body></body>内容主体
分类
- 双标签：“/”关闭符
例：<head></head>
- 单标签:非常少
例：</br>
关系
<head>
<title></title>
</head>
嵌套关系，为父子级关系
<head>
</head>
<body>
</body>
并列关系，为兄弟级关系
HTML常用标签
排版标签
标题标签
<head>头部标题，<title>文档标题
<h1></h1>-<h6></h6>依次递减
段落标签
<p></p>
水平线标签
</hr>
换行标签
</br>
Div ，span标签
没有语义，网页组成盒子，用于布局
Div独占一行
Span可并列一行
文本格式化标签
<b></b>,<strong></strong>字体加粗
<i></i>,<em></em>字体倾斜
<s></s>,<del></del>文本添加删除线
<u></u>,<ins></ins>文本添加下划线
图像标签img
image图像
<img/>标记属性
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框宽度
链接标签
Anchor
外部链接需要添加网址
内部链接直接链接网页名称
如果没有明确目标引号内为“#”，表示空链接
除文本超链接外还有图像，音频，表格，视频等超链接
base标签
可以设置链接的打开状态
特殊字符标签
注释标签
<!-- xxxxxxx-->
快捷键：ctrl+/
注释后的内容不会在网页中显示
路径
相对路径
同一级，上一级，下一级
绝对路径
完整的网络地址
列表标签
list-style:none取消列表默认样式
无序列表
<ul style="list-style:square;">
<li>111</li>
<li>111</li>
<li>111</li>
</ul> -->
有序列表
<ol style="list-style: circle;">
<li>222</li>
<li>222</li>
<li>222</li>
</ol>
自定义列表
<dl style="list-style: ;">
<li>333</li>
<li>333</li>
<li>333</li>
</dl>
总结：
标签样式较多，需要一定程度背书，多多实践运用在实际生活。