前端三要素
1.HTML 搭建页面骨架
2.css 修饰页面
3.JavaScript 交互
HTML(超文本标记语言)
1.a.开发环境搭建
编辑器:vscod 编写代码的地方
sublime 体积小,运行速度快
文本编辑器 没有代码提示以及插件
浏览器:火狐 代码执行的地方
谷歌
IE
部署环境:apache 代码部署的地方
b.三拨人
w3c 制定规范(标准)
例:<div></div> 盒子
浏览器厂商 火狐、谷歌、微软
程序员 使用者
2.介绍
1) 作用:搭建页面骨架
2) HTML:是HyperText Markup Language(超文本标记语言)的简写
3) HTML文件后缀名:.htm或者.html
3.html文档结构 (注释:ctrl+/ 或 <!--注释内容-->
<!DOCTYPE html> <!---文档声明 html5-->
<html lang="en"> <!--html文档的根元素-->
<head> <!--html文档的头部 定义一些文档的配置-->
<meta charset="UTF-8"> <!--定义文档的字符集-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--定义IE浏览器的兼容-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--定义了响应式-->
</head> <!--定义样式、js-->
<body> <!--html文档的体部-->
<div>hello world!</div>
</body>
</html>
4.语法
1)注释
<!--注释内容-->
注释内容不会被浏览器解析
作用
1.记录你的编程思路
2.便于后期代码维护
2)元素
a.双标签元素
元素=开始标签+结束标签+内容+属性
b.单标签元素
只有开始标签+元素
3)属性
a.属性写在开始标签中
b.属性=属性名+属性值
c.属性名和属性值之间用=分隔,属性值使用引号(双引号、单引号)包引起来
d.核心属性:每一个元素都可以拥有的属性
title:提示信息
id:元素的唯一值
class:类名(css选择器)
style:定义一些样式
e.特有属性:某些元素特有的属性
charset:字符集
src:路径
4)空白、实体
a.无论有多少空格,浏览器都会按照一个空格来处理
b.实体: (空格)、<(<)
5.块级元素(搭建页面的骨架)
1)特点:a.独占一行空间
b.默认元素宽度为父元素的100%,高度由内容或者子元素决定
c.块级元素可以设置宽高
例:div:无意义的块级元素(没有任何的默认样式)
p:段落 默认有一个margin-top margin-botoom
h1~h6:标题 默认字体大小和字体宽度,外边距
ul:无序列表 (ol有序列表)
子元素:li
dl:列表
dt 标题
dd 列表项
6.行内元素(装饰性)
1)特点:a.共享一行空间,如果一行无法放下,则自动换行显示
b.默认宽高都有内容所决定
c.默认无法设置宽高
例:span:无意义的行内元素
a:超链接
超链接(绝对路径、相对路径)
路径
绝对路径
E:/
相对路径
./
../
锚点
为目标元素定义一个id值,写上一个a标签,给a标签的href属性写上目标元素的#+id值
strong:这是强调
i:这是斜体
em
2)img 图片
src 图片的路径
alt 当图片加载失败的时候,替代图片的文字
width 宽度
heigh 高度
7.元素使用的策略
a.使用块级元素搭建页面骨架,使用行内元素装饰
b.不知道用什么块级元素的时候,就用div
c.不知道用什么行内元素的时候,就用span
href 表示跳转的目的地,取值如下
8.目标元素的ID值
1)用于锚点跳转
href="#目标元素的ID值"
2)URL
URL使用path来定位文件,path又分为相对路径和绝对路径
路径
绝对路径 E:/
相对路径 ./ 、 ../
3)email
<a href="mailto:liuyr@briup.com">联系我们</a>
属性学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div title="hello" id="app" class="main" style="color: blue;">hello</div>
</body>
</html>
块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
</head>
<body>
<div style="width: 100px;height: 200px;background-color: cornflowerblue;">666</div>
<div>123</div>
<div>234</div>
<p>这是一个段落
</p>
<h3>这是一个标题1</h3>
<h4>这是一个标题2</h4>
<h5>这是一个标题3</h5>
<ul><li>html</li></ul>
<ul><li>css</li></ul>
<ul><li>java</li></ul>
<ol><li>香蕉</li><li>苹果</li><li>橘子</li></ol>
<dl>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>Java</dd>
</dl>
<span>cool</span>
<span>cool</span>
</body>
</html>
行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素</title>
</head>
<body>
<div>cool</div>
<span id="top">我是一个行内元素</span>
<span>我也是一个行内元素</span>
<a href="https://www.baidu.com">百度一下</a>
<a href="./快级元素.html">块级元素</a>
<div style="height: 2000px;"></div>
<a href="#top">回到顶部</a>
<a href="mailto:1162530691@qq.com">发邮件给</a>
<strong>这是强调</strong>
<i>这是一个斜体</i>
<img src="./1536-878.jpg" alt="图片不见了">
<div>cool <span>cool</span></div>
</body>
</html>