1 基本
1.1 第一个前端程序
- 内容
<html><head><title>我的网页</title></head><body>Hello,我的第一个网页</body>
</html>
使用浏览器打开
1.2 工具安装
- 浏览器
谷歌浏览器
清缓存
ctrl+shift+delete
- vscode
- 生成浏览器文件.html的快捷方式
!+回车
- 常用快捷键
- 快速打开浏览器
插件open in browser 安装，就会多出两个选项来
2 Html5
2.1 介绍
- 概念
是一种用来描述网页的一种语言，被称为超文本标记语言，本质是标记语言，标记语言是一套标记标签，一般用
- DOCTYPE声明
DOCTYPE是document type(文档类型)的缩写。
<!DOCTYPE html>
是H5的声明位于文档的最前面，甚至在<html>之前
作用是网页必备的组成部分，避免浏览器的怪异模式
- html5的基本骨架
-
html标签
-
head标签
- 必须包含title标签
- meta标签：一般是限定utf-8编码格式，注意是一个单标签
-
body标签
<!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>我的第一个网页
</body>
</html>
2.2 标签之标题
- 标题介绍
从h1到h6从大到小，双标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
- 案例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>
快捷键
h$*6+回车
- 网页案例
https://www.mi.com/shop
- 标题标签位置摆放
align="left center | right"
默认为左的，可以设置属性变成右边
2.3 标签之段落、换行、水平线
- 概念
段落§：通过段落去承载文本
换行(br)
水平线(hr)
- 段落
- 运用
<!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>我是一个段落标签</p>
</body>
</html>
- 网页案例
3. 换行
- 运用
注意是单标签
<!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>我是一个段落标签</p><p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
</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>Document</title>
</head><body><p>我是一个段落标签</p><p>如果您希望在不产生一个<br>新段落的情况下进行换行</p><hr color="red" width="300px" size ="10px" align = "left">
</body></html>
2.4 标签的图片
- 概念
使用标签定义HTML页面中的图像
<img scr="" alt="" title="" width="" height="">
- 运用
- 用法
- scr
图片必须和代码在同一个文件夹下
<!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><img src="1683454588303.jpg" >
</body>
</html>
效果
- alt
<body><img src="1683454588303.jpg" alt = "我的qq头像">
</body>
当图片获取不到的时候，会显示alt的名字，即代替文本
- width
<body><img src="1683454588303.jpg" alt = "我的qq头像" width="300px">
</body>
- height
<body><img src="1683454588303.jpg" alt = "我的qq头像" width="300px" height="300px">
</body>
- title
鼠标边边会出现文字提示
- 关于scr的补充
- 绝对路径
- 相对路径
子级关系/
父级关系…/
同级关系./
2.5 超文本链接
- 概念
使用来设置超文本链接，其中href属性来描述链接的地址
<a href="url">链接文本</a>
- 运用
<body><a href="https://www.baidu.com">百度</a>
</body>
记得写全https://
图片也可以当作跳转的中介
<body><a href="https://www.baidu.com"><img src="1683454588303.jpg" alt="qq头像" width="300px"></a>
</body>
2.6 文本标签
- 基本使用
<body><em>月月</em><b>月月</b><i>月月</i><strong>月月</strong><del>月月</del><span>月月</span>
</body>
- 嵌套
<body><p>我喜欢吃<em>em白菜</em></p>
</body>
2.7 列表标签之有序列表
- 有序列表
- 基本使用
<body><ol><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol>
</body>
- ol属性
<body><ol type ="1"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol><ol type ="a"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol>
</body>
- 嵌套
也可以嵌套，li中再套一组ol
<body> <ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li></ol></li></ol>
</body>
2.8 无序列表
- 概念
<ul><li>苹果</li><li>橘子</li><li>香蕉</li>
</ul>
</body>
- ul属性
<body>
<ul type ="disc"><li>苹果</li><li>橘子</li><li>香蕉</li>
</ul><ul type ="circle"><li>苹果</li><li>橘子</li><li>香蕉</li>
</ul><ul type = "squre"><li>苹果</li><li>橘子</li><li>香蕉</li>
</ul><ul type = "none"><li>苹果</li><li>橘子</li><li>香蕉</li>
</ul></body>
- 嵌套
也可以嵌套的
- 实际运用
- 百度新闻
- 小米
辅助以css
- 快捷键
ul>li*2
2.9 标签之表格
- 概念
表格：
行：，有几行就几个tr
单元格(列)：，有几列就在tr中写几列，中间可以写文本的
- 运用
三行三列的单元格
<body><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
</body>
- 快捷键
table <tr*2>td{单元格}
table>tr*3>td*3{哦哦}回车成这样<table><tr><td>哦哦</td><td>哦哦</td><td>哦哦</td></tr><tr><td>哦哦</td><td>哦哦</td><td>哦哦</td></tr><tr><td>哦哦</td><td>哦哦</td><td>哦哦</td></tr></table>
- 属性
- 基本属性
以后用css调整的多
- 运用
<table border="1"><tr><td>哦哦</td><td>哦哦</td><td>哦哦</td></tr><tr><td>哦哦</td><td>哦哦</td><td>哦哦</td></tr><tr><td>哦哦</td><td>哦哦</td><td>哦哦</td></tr>
</table>
- 效果
宽高也可以设置，也可以后css调整
- 单元格合并
- 水平合并colspan
<body><p>合并单元格</p><table border="1"><tr><td>yes1</td><td>yes2</td><td>yes3</td></tr><tr><td colspan="2">yes4 yes5</td><td>yes6</td></tr><tr><td>yes7</td><td>yes8</td><td>yes9</td></tr></table>
</body>
- 垂直合并rowspan
<body><p>水平合并单元格3,4以及垂直合并单元格3，6</p><table border="1"><tr><td>yes1</td><td>yes2</td><td rowspan="2">yes3 yes6</td></tr><tr><td colspan="2">yes4 yes5</td></tr><tr><td>yes7</td><td>yes8</td><td>yes9</td></tr></table>
</body>
效果
如果合并四个，先水平合并，后垂直合并
2.10 表单
- 引入
- 属性
表单一般包括容器和控件，控件包含输入框和按钮
<form action="url" method ="get|post" name="myform"></form>
action服务器地址，method请求类型，name表单名字
- 组成
表单标签，表单域(输入框)，表单按钮
<form><input type ="text"><input type = "submit">
</form>
- 补充表单元素
- 文本框
<form>用户名：<input type ="text"></form>
- 密码框
<form>Password：<input type ="password" name = "pwd"></form>
密码是小黑圆点
- 提交按钮
<form><input type = "submit" value = "Submit"></form>
