相关概念
- web组成
结构(html) 表现(css) 行为(js)
W3c:万维网联盟
Ecma:欧洲电脑网商联合会
- Html的相关概念
Html :超文本标记语言
Html5:第五次重大修改
- 网页的建设流程
域名注册 空间租用 网站建设(ui设计 前端开发 后台开发 测试) 网站推广 网站维护
- 站点的建立
作用:整合网站所有资源
命名规则:
A、小写英文字母、数字、下划线的组合;
B、其中不得包含汉字、空格和特殊字符;
C、必须以英文字母或下划线(_)开头,不可以数字开头;
- Html5的基本结构
首页叫做index.html
<!Doctype html> 声明文档类型
<html> 根标签
<head> 头部区域
<meta chartset=“utf-8/gb2312”> 声明编码格式(如果出现问题会导致网页内容乱码)
<title>网页的标题</title>
</head>
<body>主体内容</body>
</html>
代码调试工具 浏览器里的f12
- Html的基本语法
双标签(常规标签 对标签)
<标签 属性=“属性值”属性=“属性值”></标签>
单标签(空标签)
<标签 属性=“属性值” />
注意点:
尖括号里的第一个单词叫做标签、标记、元素
属性和标签之间用空格隔开,一个标签可以有多个属性,属性和属性之间用空格隔开,属性不分先后顺序
属性和属性值用等号连接,属性值必须写在引号里边(引号一定要用英文模式的引号)
单标签必须要有结束的反斜杠(XHTML的要求,HTML可有可无)
- Html常用的标签
- 文章类标签
标题标签h1-h6(默认加粗字体 h1最大 h6最小)
H1一般一个页面中只有一个h1
段落标签p (段落与段落之间会空一行文字的距离)
特殊字符: 空格 版权图标 © 注册商标 ®
小于号 < ; 大于号 >
修饰类标签:加粗 b strong 倾斜 i em 下划线 u ins 删除线 del s
上角标 sup 下角标 sub
水平线:<hr />
强制换行标签:<br />
- 列表标签
有序列表
<ol type=”1,a,A,i,I”start=”数字指从第几个开始”><li></li></ol>
无序列表
<ul type=”disc,circle,square”><li></li></ul>
自定义列表
<dl>
<dt>标题问题 只能有一个问题</dt>
<dd>答案 可以有多个</dd>
</dl>
- 图片标签
<img src="t1.png" width="200" height="500" border="10" title="提示信息" alt="替换文本">
Src 图片路径
Width 图片宽度
Height 图片高度
Border 图片边框
Title 提示信息(当鼠标放在图片上时会显示的提示文本)
Alt 替换文本(当图片发生错误时显示的文字信息)
【三种相对路径】
A:当前文件与目标文件在同一文件夹下 直接写文件名+拓展名
B:当前文件与目标文件所在文件夹在同一目录下 下目标文件夹名称/目标文件名+拓展名
C:当前文件所在文件夹与目标文件在同一目录下 ../目标文件名+拓展名
【alt与title的区别】
相同点:都是图片的属性 都有利于SEO(搜索引擎的优化)
不同的:title当鼠标放在图片上时会显示的提示文本,title倾向用户体验度,alt是当图片发生错误时显示的文字信息,alt倾向于SEO
网页中所支持的图片格式:jpg png gif
- 超链接标签
Url:统一资源定位符: 协议 http 域名 www.baidu.com 端口号 8080 路径 index.html
<a href=”路径”></a>
连接本地文件,路径遵循三种相对路径的写法
<a href="图片插入.html">打开图片插入页面</a>
连接在线网站 需要添加上对应的协议
<a href="http://www.baidu.com" title="哈哈">百度</a>
连接本地的word文件(表格 PPT 压缩包)
<a href="../笔记.docx">笔记</a>
连接一张图片
<a href="t.png">打开图片</a>
连接邮箱
<a href="mailto:123@qq.com">邮件</a>
利用图片做超链接 在新的窗口打开属性target 值_blank/_self(默认值)
<a href="http://www.baidu.com" target="_blank" title="哈哈">
<img src="t.png">
</a>
空连接
<a href="#">空连接</a>