文章目录
HTML
前端
1.什么是前端
- Web前端，用来给用户呈现网页
- 一个软件通常由后端+前端组成
2.常见的前端页面
- web页面
- PC端程序页面
- 移动端APP页面、小程序等等
一、什么是HTML
HTML超文本标记语言
- 超文本：文本、声音、图片、视频、表格、连接
- 标记：由许多标签组成
HTML页面运行在浏览器上面（推荐Chrome）
软件：VSCode
推荐插件：自动补全、浏览器显示、同步更新
 |
<>括起来的，都是HTML当中的标签
双标签：有头有尾 单标签
html
<html>
<head>
<title>这是页面标题</title>
</head>
<body>
这是页面内容
</body>
</html>- html:html文件根标签
- head:编写页面相关的属性
- title:页面的标题
- body:页面内容展示信息
DOM树： Document Object Mode (文档对象模型) 的缩写
所有的标签都是html的子标签
head和body是兄弟标签、head和title是父子标签
每一个标签相当于一个对象，相当于通过标签得到对象，进行增删查改
1.快速生成代码
VSCode 快速生成代码框架：！+ enter
IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键
html
<!DOCTYPE html>
//HTML5的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的-->
<html lang="en">
//指定当前页面内容是英文
<head>
<meta charset="UTF-8">
//浏览器解码规则
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//移动端适配
<title>标题</title>
</head>
<body>
这是页面内容
</body>
</html>二、HTML标签
0.注释
ctrl+/
html
<!-- 这是注释 -->在浏览器中 fn+f12,查看
1.标题
html
<h1>h1</h1>
<h2>n2</h2>
<h3>n3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>大------>小
整理快捷键：shift+alt+F
2.段落
html
<P>段落</P>另起一行
- 回车==空格
- 多个空格等于空格
3.换行
html
<br/>- 比段落间隙小
- 单标签
- break的缩写
4.格式化标签
企业通常借住CSS实现
前者对文本进行了强调（让爬虫获取到当前的文本）
- 加粗
html
<strong>css</strong>
<b>单位</b>- 倾斜
html
<em>但实际情况却并非如此</em>
<i>像素</i>- 删除线
html
<del>但实际情况却并非如此但实际情况却并非如此</del>
<s>像素</s>- 下划线
html
<ins>面浏览器</ins>
<u>网页</u> 5.图片标签：img
-
必须带有 src 属性. 表示图片的路径
-
alt属性
html
<img src="../image/kai.jpg" alt="加载失败">图片加载失败才会显示alt中的内容
-
title属性
html<img src="../image/kai.jpg" alt="加载失败" title="这个是我的图片">鼠标悬浮显示文本
-
widtn/height属性：控制宽度和高度
html
<img src="../image/kai.jpg" alt="加载失败" title="这个是我的图片"width=500px>一般只用修改一个，另一个会自动等比例修改。不然会失衡
- border属性：添加边框
html
<img src="../image/kai.jpg" alt="加载失败" title="这个是我的图片"width=500px border="10px">一般用CSS
目录结构
1.绝对路径：一个完整的磁盘路径, 或者网络路径
-
磁盘路径 D:\rose.jpg
-
网络路径 https://imagesX.cnblogs.com/blog/13XXX623/201407/300958470402077.png
2.相对路径：以 html 所在位置为基准, 找到图片的位置
-
同级路径: 直接写文件名即可 (或者 ./)
-
下一级路径: image/1.jpg
-
上一级路径: .../image/1.jpg
6.超链接标签：a
- href属性: 点击后会跳转到哪个页面
html
<a href="http://www.baidu.com">百度</a>
<a href="html01.html">跳转到html01</a>
<a href="#">当前页面</a>
<a href="http://www.baidu.com">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
title="跳转到百度">
</a>href必须要有
-
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
没有target:默认在当前页面打开连接，覆盖当前页面
html
<a href="http://www.baidu.com" target="_blank"> 7.表格标签
- table:整个表格
- tr:表格的一行
- td:一个单元格
- th:表头单元格，会居中加粗
- thead:表格的头部区域（范围比th大）
- tbody(内容)
复制快捷键：shift+alt+↓
- 表格默认边框是0px
- cellspacing: 单元格之间的距离. 默认为 2 像素
- cellpadding: 内容距离边框的距离, 默认 1 像素
- border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
- align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
html
<table border="1" width="200" height="300"
cellspacing ="0" cellpadding ="30" align="center">
<tr>
<td>姓名</td>
<td>性别</td>
<td> 年龄</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>12</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>15</td>
</tr>
<tr>
<td>小黄</td>
<td>男</td>
<td>11</td>
</tr>
</table>单元格合并
跨行合并:
html
<td rowspan="2">男</td>跨列合并:
html
<td colspan="2">小黄/女</td>- 合并完要检查内容,删除多余的单元格
8.列表标签
1.无序列表
html
<h1>无序列表</h1>
<ul type ="disc">//默认实心圆
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
<ul type = "square">//方块
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
<ul type ="circle">//空心圆
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>2.有序列表
html
<ol type="1">//默认数字
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ol type="A" start="4">大写，从第四个字母开始
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ol type="a">//小写
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ol type="I">//罗马大写
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ol type="i">//罗马小写
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>3.自定义列表
html
<dl>//总标签
<dt>自定义列表显示的内容 //小标题
<dd>//围绕标题来说明
自定义列表1
</dd>
<dd> 自定义列表2
</dd>
<dd>
自定义列表3
</dd>
</dt>
</dl>9.表单标签
-
用表单标签，完成服务器的一次交互
-
表单是让用户输入信息的重要途径
1.表单域
包含表单元素的区域
html
<form action="test.html">
... [form 的内容]
</form>描述了要把数据按照什么方式, 提交到哪个页面中.
2.表单控件
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
input 标签（单标签）
html
<form action="html03.html">
<!-- 文本框 -->
姓名<input type="text"><br> <!-- 单行输入 -->
<!-- 密码框 -->
密码<input type="password"><br>
<!-- 单选框 -->
性别
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
<!-- checked默认选择 -->
<!-- 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果 -->
<br>
<!-- 复选框 -->
爱好
<input type="checkbox">睡觉
<input type="checkbox">码字
<input type="checkbox">弹吉他
<br>
<!-- 普通按钮 -->
<input type="button" value="按钮" onclick="alert('hello')">
<!-- 点击弹出hello -->
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送 -->
<br>
<input type="reset">
<!-- 清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置 -->
</form>- type(必须要有)取值种类很多，进行对应取值：button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起名。对于 单选按钮, 具有相同的 name 才能多选一.
- value: input 中的默认值
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度.
label 标签
- 搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验
html
性别 <input type="radio" name="sex" id="male">
<label for="male">男</label>
<!-- for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应 -->
<input type="radio" name="sex" id="female">
<label for="female">女</label>select 标签
- 下拉菜单
- option 中定义 selected="selected" 表示默认选中
html
<select name="" id="">
<option>Java<object>
<option>Python<object>
<option selected="selected">C<object>
<option>C++<object>
</select>textarea 标签
-
文本域中的内容, 就是默认内容,
-
空格也会影响.
html<textarea name="" id="" cols="30" rows="10"></textarea>
10.无语义标签 div & span
-
没有固定的用途
-
进行布局设计
-
div独占一行，是大盒子（可以嵌套）
-
span不独占一行，小盒子
11.特殊标签
空格:
html
小于号:
html
<大于号:
html
> 按位与:
html
&