一、什么是浏览器
浏览器是显示网页的一个工具
一个网页有什么组成的:html css javascript
谷歌(统一使用!!!)
二、什么是html
超文本标记语言(Hyper Text Markup Language)
并不是一门开发语言。咱们的开发语言是java c php python 等
所见即所得
Html 官方的学习网站:https://w3school.com.cn
两种模式:
B/S模式: Browser/Server
浏览器/服务器模式(接下来要学习的)
1.打开任意一款浏览器
2.在浏览器地址栏中输入一个网址
C/S模式:Client/Server
客户端/服务器模式
维护成本太高了
三、HTML的基本标签
标签:标签是组成html的最小单位
语法格式:
双边标签:<标签名字 属性=“属性值”></标签名字> 成双成对的有开始标签和结束标签
单边标签:<标签名字 属性=“属性值”/>
1、结构标签
结构标签就是组成一个网页最基本的一些固定格式的标签
<html>
<head>
<!--这个是注释的写法-->
<!--meta是一个单边标签,设置当前页面编码集-->
<meta charset="utf-8"/>
<!-- 注释的快捷键 ctrl + ? -->
<!-- title 标签是设置当前标题的,在浏览器的头部显示 -->
<title>百度一下,你就知道了</title>
</head>
<body>
所见即所得
</body>
<!-- 1.html标签都是<>括起来的 -->
<!-- 2.html不区分大小写,但是一般小写 -->
<!-- 3.标签分为单边标签和双边标签,记标签的功能 -->
<!-- 4.标签内可以加属性,一般的标签的属性值是双引号引起来的,一定注意,等号两边尽量不要加空格 -->
<!-- 5.标签是相互嵌套的,但是一定能够注意缩进 -->
</html>
2、排版标签
1.换行标签br 单边标签
2.分割线标签 hr 单边标签
3.段落标签 p 双边标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>排版标签</title>
</head>
<body>
后宫佳丽三千<br/>
独宠博哥一人
<hr>
<p>如果你是用体力挣钱,你就老实点。如果你是脑力挣钱,你就机灵点。
如果你用钱在挣钱,你就狠一点。如果你在身边的资源挣钱,要豁达点。</p>
<p>火锅</p>
<p>烧烤</p>
<!-- 段落标签,段与段之间有间隔 -->
</body>
</html>
3、文本标签
标题标签 h1- h6 双边
文字标签 font 双边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>烤全羊</h1>
<h2>烤乳猪</h2>
<h3>烤腰子</h3>
<h4>酸菜鱼</h4>
<h5>水煮肉片</h5>
<h6>毛血旺</h6>
黄河大鲤鱼
<!-- font标签可以带一些属性
size:大小 属性值是1-7 默认是3
color: 颜色 所有的表示颜色的都可以表示
face: 字体样式 楷体 宋体 微软雅黑
-->
<font size="7" color="pink" face="微软雅黑">黄河大鲤鱼</font>
</body>
</html>
4、列表标签
1.无序列表(unorder list)
ul 和 li(list) 标签结合使用,其中li标签是ul子标签
ul标签的属性:
type:
属性值:circle 空心的圆 disc 实心的圆(默认的) square 实心的方块
2.有序列表(order list)
ol和li标签结合使用,其中li标签是ol标签的子标签
ol标签的属性:
type:
属性值:1, A, a, I,i
start:
属性值:数字 从哪开始
3.自定义列表
<ul type="disc">
<li>岳云鹏</li>
</ul>
<ul type="circle">
<li>张鹤伦</li>
</ul>
<ul type="square">
<li>秦霄贤</li>
</ul>
<ol type="1">
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>
<ol type="A">
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>
<ol type="I">
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>
<ol type="a">
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>
<ol type="i">
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ol>
5、块标签和行标签
块级标签单独成一行 div 双边标签
行内标签 span 双边标签
无意义的标签,一般结合css和js使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div标签和span标签</title>
</head>
<body>
<!-- 后期结合css和js使用 -->
<div>伏羲山</div>
<div>少林寺</div>
<div>老君山</div>
<span>雪花</span>
<span>青岛</span>
<span>乌苏</span>
<!-- 也是无意义的标签 -->
<footer>脚部</footer>
<header>头部</header>
</body>
</html>
6、图片标签
img 用来显示图片的 单边标签
标签属性:
src:图片的路径,可以本地的路径,也可以网络上面的路径
关于路径:相对路径和绝对路径
width:宽度 单位是像素 px
height:高度 单位也是像素 px
【如果单独设置了宽或者高,图片会等比例缩放】
alt:图片的文本描述,当图片加载失败的时候显示该信息。加载成功不显示
title:当鼠标移动到图片上的时候,鼠标下面会显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
</head>
<body>
<!-- source -->
<!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01638d59391481a8012193a3a90931.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619764528&t=dd35658664c0b8854517f0305c74de26"/>
-->
<!-- 相对路径和绝对路径一定要多多注意,尽量使用相对路径,绝对路径可能不显示图片 -->
<img src="1.jpg" height="200px" width="700px"
alt="图片加载失败" title="呵呵哒">
</body>
</html>
7、超链接标签
链接标签 a 双边标签
属性:
href:是对应a标签的地址。可以是本地地址,也可以是网络地址
targer:目标,打开目标网页的方式。_self 本窗体打开 _blank 新开一个窗体
<a href="http://www.baidu.com">百度一下</a>
<a href="入门标签.html" target="_self">在本窗口中跳到指定的页面</a>
<a href="入门标签.html" target="_blank">新开一个窗体</a>
8、基于a标签的锚点功能
1.跳到哪里
2.做一个标记
<a name="head">这是头部</a>
<a href="#foot">跳到底部</a>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<p>听闻远方有你,动辄跋涉千里</p>
<p>我吹过你吹过的风,这算不算相拥</p>
<a name="foot">这是尾部</a>
<a href="#head">跳到头部</a>
9、表格标签
table 双边标签
tr:双边标签 控制行 是table标签的子标签
td:双边标签 控制的是列 td是tr的子标签
caption:表头标签 是对整个表格的一个描述
th:和td标签类似,但是比td字体粗点颜色重点,可以作为表的字段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!-- table标签的属性 -->
<!--border 边框的宽度 width 表格的宽度 bordercolor 边框的颜色 -->
<!-- cellpadding单元格内边距 cellspacing 单元格外边距 -->
<table border="1px" width="600px" bordercolor="green"
cellpadding="30px" cellspacing="1px" align="center">
<caption>这个是表头</caption>
<!-- tr -->
<!-- align 行对齐的方式-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<!-- td也有属性 -->
<!-- rowspan 行合并 -->
<!-- colspan 列合并 -->
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
<tr align="center">
<td colspan="2">7</td>
<td>9</td>
</tr>
</table>
</body>
</html>
10、文本格式化标签
< b > 定义粗体的文本 双边标签
< big > 定义大号字体
< em > 定义着重文字(斜体)
< i > 斜体
< small > 定义小号字体
< strong > 定义加重语气
< sub > 定义下标字
< sup > 定义上标字
< ins > 定义插入字体
< del > 定义删除字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<b>定义粗体的文本</b>
<br>
<big>大号字体</big>
<br>
<em>着重文字,斜体</em>
<br>
<i>斜体</i>
<br>
<strong>加重语气</strong>
<br>
<sub>下标字</sub>
<br>
<sup>上标字</sup>
<br>
<ins>插入字体</ins>
<br>
<del>删除字体</del>
</head>
<body>
</body>
</html>
11、特殊字符实体
  ; 空格
< ; <
> ; >
& ; &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>哈哈 哈哈</p>
<p>&alt;<</p>
<p>>></p>
<p>&&</p>
</body>
</html>
12、表单标签
form(双边标签)标签 下面有一个子标签input(单边标签)标签
表单一般用于前端发送数据到后端一种形式。
url: https://www.baidu.com:443/index.html?username=goudan&password=123123
组成部分:协议 + 域名+ 端口号+ 文件名字+ 参数
form标签:
属性:
action:提交数据到哪?也就是一个网址
method:提交方式
get:(查询数据)
1.不安全
2.传输效率高
3.数据传输大小是有限制的 2kb
4.通过get请求可以看到你的信息
post:(增删改)
1.假装很安全
2.传输慢
3.数据大小没有限制的
4.看不到,但是程序员可以看到
input:
属性:
name :比较重要,不要忘了写。如果不写无法取到值
value:值
type:
属性值:
text:可视化文本框
password:密码文本框
submit:提交按钮
radio:单选按钮
checkbox:多选框
file: 上传文件,需要注意事项
date:日期框
hidden:隐藏文本框
reset:重置按钮
select:下拉框 里面子标签option
textarea:文本编辑框(js富文本编辑器)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
<input type="text" name="username"/><br>
<input type="password" name="password"/><br>
<br>
<br>
<!-- 单选框的value必须写,如果不写就没有值,一直是on -->
<input type="radio" name="sex" value="0" />男
<input type="radio" name="sex" value="1" />女
<br>
<br>
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="1" />唱歌
<input type="checkbox" name="hobby" value="2" />跳舞
<input type="checkbox" name="hobby" value="3" />游泳
<input type="checkbox" name="hobby" value="4" />篮球
<input type="checkbox" name="hobby" value="5" />rap
<br>
<br>
<!-- 日期文本 -->
<input type="date" name="birthday"/>
<br>
<br>
<!-- 上传文件,请求方式必须是post 而且form标签属性李必须加上enctype="multipart/form-data" -->
<input type="file" name="file" />
<br>
<br>
<!-- 隐藏文本 -->
<input type="hidden" name="hid" value="sb" />
<br>
<br>
<!-- 下拉列表 -->
<select name="city">
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">深圳</option>
</select>
<br>
<br>
<!-- 文本编辑器 -->
<textarea name="info"></textarea>
<br>
<br>
<input type="reset" value="重置" />
<input type="submit"value="提交" />
</form>
</body>
</html>