一、基本概念
1.网页和网站
1.网站有N个网页组成
2.网页中包含：文字，图片，视频，音频，链接，程序...
3.网页的内容由HTML技术实现
4.网页的后缀通常都是.html
2.浏览器和渲染引擎
1.常见的浏览器：谷歌，火狐，IE，Safari，欧朋
2.不同的浏览器有不同的内核（渲染引擎）
3.网页三层结构
1.结构层：使用HTML技术实现，说白了，就是给网页提供内容
2.样式层：给网页提供样式（布局，美化）
3.交互层：使用JS实现，JS是前端程序员最最最最需要掌握的技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
这是我的第一个网页
</body>
</html>4.开发工具
1.推荐使用VS code工具，好处：小巧，插件多
2.快捷键：
ctrl+f=>查找内容并替换内容
shift+alt+f=>格式化代码
F2=>重命名
键盘上的del键=>删除文件
鼠标中键+向下拽=>同时选中多行
div.wraper + tab =>生成一个带名字的div
！+ tab =>html基本骨架 ！是英文的！
shift+tab=>向前移动代码 tab => 向后移动代码
shift + alt + 向下箭头 => 复制上一行
5.标签，属性，元素
1.标签：标签都是使用<>包起来，分单标签和双标签，分男标签，女标签和人妖标签
2.标签与标签之间有关系，分兄弟关系和父子关系
3.属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性
4.属性也分两类：公有属性，特有属性
5.公有属性：class，id，title，，style
6.元素：标签+属性+标签之间的内容
<!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>
<p><span>我是一个span</span></p>
<p><span>我是一个span</span></p>
<span>我也是一个span</span>
<span>我也是一个span</span>
</body>
</html>二、HTML的基本骨架
1.文档声明
- HTML5的文档声明
- 告诉浏览器，以什么样的标准来解析我们写的代码
2.html元素
1.是一个网页的根元素，只有和一个
2.lang属性：指定网页的语言
3.head元素
1.网页的头部：基本上在对网页的设置，都会在head实现
2.title属性：指定网页的标题的3.meta属性：charset="utf-8" 如果不指定，会出现乱码
4.body元素
网页的主要内容都是写在body中的
<html>
<!-- html是网页的根标签 -->
<head>
<!-- 在head中可以对网页进行设置 -->
<title>
<!-- title表示网页的小标题 -->
我的第二个网页
</title>
<meta charset="utf-8">
<!-- meta是设置网页的元信息 -->
</head>
<body>
</body>
</html>
复制代码三、常用标签
1. h系列-标题标签：h1->h6逐级递减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>我是一个大标题</h1>
<h2>我是一个h2标签</h2>
<h3>我是一个h3标签</h3>
<h4>我是一个h4标签</h4>
<h5>我是一个h5标签</h5>
<h6>我是一个h6标签</h6>
</body>
</html>2. p标签，段落标签：浏览器会自动适用换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>3. 换行标签br ：强制换行+单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<hr>
<p>
"我是一个p标签"
<br>
"我是一个p标签"
</p>
</body>
</html>4. 文本格式化
加粗：strong或者b
倾斜：em或者i
删除线：del>或者s
下划线：ins或者u
5. 无语义标签:div,span
标签的语义化：
什么样的标签做什么样的事，如img标签表示图片，h1标签表示大标题，p标签表示段落....
不同的标签有，不同的含义，就是语义。但是html中有两个标签是没有任何语义的。
但在网页开发中，使用的最多的，这两个标签，就是div和span。
div是男标签，特点：独占一行。
span标签是女标签，特点：并排显示。
div+css:
div可以把网页分成多块，配合CSS就可以完成布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
font-weight: bold;
font-size: 20px;
}
span{
color: red;
}
</style>
</head>
<body>
<h1>我是一个h1标签</h1>
<div class="box1">我是一个div</div>
<span>我是一个小span</span>
<hr>
我是一个小span
</body>
</html>6. 图片标签
1.属性：
src：图片的路径
alt：当图片加载错误时显示的文字
title：当鼠标悬停在图片上显示的文字
width：图片的宽度
height：图片的高度
border：图片的边框
2.属性的特点：
(1)属性之间部分先后顺序
(2)属性名和属性值之间以键值对的形式存在
(3)属性名与属性值之间以等号分隔，属性值以以引号包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./01.webp" alt="">
<!-- src是source的简写 --><br>
<img src="./01.webp" alt="这是一张非常漂亮的图片">
<!-- 如果图片加载失败了，就显示alt对应的文本中的内容 --><br>
<img src="./01.webp" title="这是一张非常漂亮的图片">
<!-- 所有的标签都有一个title属性，表示鼠标去摸时，提示内容 --><br>
<img src="./01.webp" alt width ="300px">
<img src="./01.webp" alt height ="300px">
<img src="./01.webp" alt width height ="300px">
</body>
</html>7. 路径和链接
1.路径
(1)相对路径 在同一个文件夹直接找名字
向上一级：../ 向下/
(2)绝对路径
2.链接标签
(1)外部链接:写完整的协议 域名 网址
(2)内部链接: 直接写文件名即可
(3)属性
href:指定跳转的页面
title：
target：_self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式
#：会阻止页面跳转但是会刷新页面
3.锚点
(1)链接使用#
(2)目标标签id值与链接#号后面一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">xxx</a>
<a href="http://www.baidu.com" target="_blank">xxx</a>
<a href="http://www.baidu.com">xxx</a>
<hr>
<hr>
<a href="#">我是空链接</a>
<hr>
</body>
</html>8.注释与特殊字符
编辑器用Ctrl+/快捷键
四、列表类标签
1.无序列表
<ul><li></li></ul>2.有序列表
<ol><li></li></ol>3.自定义列表
<dl><dt><dd></dd></dt></dl>五、表格类标签
1.标签
1.table表格
2.tr行
3.td单元格
4.th表头 加粗 加黑 自动居中
5.caption表格的标题 写在内部 显示外部 居中
6.thead结构头
7.tbody结构体
8.tfoot结构底
2.属性
1.border:表格的边框 默认的0
2.width：宽度
3.height：高度
4.cellspacing:单元格与单元格之间的距离
5.cellspadding：单元格与内容之间的距离
6.align:left/center/right
7.colspan:列合并
8.rowspan:行合并注意：当给表格设置居中整个表格会居中（文字不会居中），当指定tr 或者td 文字居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
/* collapse 合并边框 */
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1" align="center" width="500px" height="220px">
<caption>xxx</caption>
<thead>
<tr align="center">
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
</tr>
</thead>
<thead>
<tr align="center">
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
</tr>
</thead>
<tfoot>
<tr align="center">
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tfoot>
</table>
</body>
</html>六、表单类标签
1.input属性
1.text:文本框
2.password:密码框
3.radio:单选按钮
4.checkbox:复选框
5.button:普通按钮
6.reset:重置按钮 需要配合form表单才有作用
7.submit:提交按钮
8.image:属性 src
9.file:文件按钮 上传图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
用户名:
<input type="text" placeholder="请输入你的用户名"><br>
密码：
<input type="text" placeholder="请输入你的密码"><br>
性别:男
<input type="radio" name="sex" checked="checked">
女
<input type="radio" name="sex"><br>
爱好:唱
<input type="checkbox">
跳
<input type="checkbox">
rap
<input type="checkbox"><br>
<input type="button" value="登录"><br>
<input type="reset" value="重置"><br>
<input type="submit"><br>
<input type="file"><br>
<input type="sadsa">
</form>
</body>
</html>2.name属性
1.发送后台......
2.name的标识 对于单选按钮 只能选择一个
3.value:文本框默认显示的文字
<input type="button" value="登录">4.checked: 默认选中 可以写一个属性 也可以 属性名=属性值
<input type="radio" name="sex" checked="checked">5.label用法
1.label请输入input type="text"input type="text"/label
2.label for="a"请输入input type="text" id="a"
6.文本域：textarea：用户留言
7.下拉列表:
下拉列表的默认选中：selected
8.form表单
1.主要的作用：是收集用户信息 发送后台
2.action: 提交后台的地址
3.method="get/post" 提交(传输)后台的方式
4.name="a"告诉服务器 由哪个表单提交过来的
扫一扫
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
